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