HTMLの基本を理解する

HTMLの基本を理解する

今回はある平文に対して、HTML5によるマークアップを行うという課題に取り組みました。

これまで、何度か趣味でウェブサイト作ったことがあるため、HTMLについてはある程度知っているつもりでおり、復習としてこのプラクティスを始めたのですが、それは大きな間違いだったと気付かされました……。

自分のHTMLに関する知識はXHTMLやHTML4時代で止まっており、HTML5が主流となった今では時代遅れになっていたみたいです。

HTML5ではdivタグをあまり使わない

これまで私は、何でもかんでも情報の塊はdivタグで囲うというマークアップをしていたのですが、html5ではそのような使い方をしないと知りました。

divタグはスタイルを適用したい時や、他に適当なタグが見つからない場合の最終手段として使うタグであり、HTML文章のアウトラインを作るためには、articleタグやsectionタグを使うのが正しい作法のようです。

ただ、articleタグとsectionタグの使い分けを理解するのに手こずりました。

使用例を見ていると、articleタグがsectionタグの子要素となることもあれば、逆のパターンもあり、感覚的に理解することが難しかったためです。

とりあえずは、articleタグはそれだけで独立したコンテンツとして成立する内容に対して使い、sectionタグはそれ以外の、見出しがつけられる(アウトラインにリストされる)「章」や「節」に対して用いる、と理解しました。

この独立したコンテンツとはなにか?と思うと思いますが、『RSSフィードで読み込こまれた際に1つの記事として成り立っているか』ということをまずは意識してみましょう。 成り立っているならばarticle要素が適しており、そうでなければsection要素など別の要素を検討します。 http://www.mdn.co.jp/di/articles/4040/?page=6

迷ったところ

hnタグがsection真下になくても良いのか?

<section>
  <p>hoge</p>
  <p>huga</p>
  <h2>見出し</h2>
</section>

コメント欄をどのようにマークアップするか

一つ一つのコメントをarticleタグで囲ったが、コメントは独立したコンテンツと言えるか。加えて、今回の課題の場合、コメントに見出しとなるような要素がなかったため、hnタグをarticle内に含めることをしなかった。

strongタグとemタグの違い

strongタグは客観的に見て重要なこと、ユーザーに特に伝えたいことに対して使い、emタグは文章内で抑揚をつけたい時などに用いる、と覚えた。

終わりに

今までは文章の構造など意識せず、「見た目が整ってればいいや」という適当な気持ちで、divタグを多用したマークアップを行っていましたが、今回の課題を通して、HTML5の正しい作法を学び、アウトラインを意識して記述することの意義を理解することができました。


参考資料

第5回 HTML5で新しく定義された新要素 「article要素」の使い方の基本をまとめよう | Webデザインとグラフィックの総合情報サイト - MdN Design Interactive