間違いやすいHTML5の要素を再確認
こんにちは。koyaです。
突然ですが、龍が如く7はプレイしましたか？
今まで龍が如くシリーズをプレイしたことはありませんでしたが、物語の舞台が関内、伊勢佐木町だったため思わず買ってしまいました。
見覚えのある景色を走り回るのはプレイしてて楽しかったです。横浜にゆかりのある方には是非触って欲しいです。
さて、今回はタイトルの通りよく間違いを見かけるHTML5の要素についてまとめたいと思います。
僕もマークアップを始めた頃は<section>と<article>の違いなどがさっぱりだったので、初心者の方など参考にしていただければと思います。
- section要素
- article要素
- div要素
- ul、ol要素
section要素
section要素は文脈のセクション分けをするためのタグです。本で言うと目次のようなものですね。
文脈を分けるためのものなので、見出し要素(h1〜h6)が要素内に必ず存在する必要があります。
例えば、次のような目次があります。
今日のネタ
- 握り寿司
- 甘エビ
- ウニ
- 軍艦巻き
- マヨコーン
- 手巻き寿司
これをセクション分けすると以下のようになります。
See the Pen section by bashalog (@bashalog) on CodePen.
このように、要素の内容が文章のアウトラインを構成する場合に使用するのが適切です。
スタイリング目的での使用をする場合はdivを使った方がいいですね。
article要素
article要素はブログ記事や記事に他するコメントなどの独立した記事として使用可能なものを明示するためのタグです。
article要素も見出し要素(h1〜h6)が要素内に必ず存在する必要があります。要注意。
article要素は<article>〜</article>のみを取り出しても独立した記事として成立するものなので、より限定的、明示的な使い方になります。
See the Pen article by bashalog (@bashalog) on CodePen.
このように記事ごとブロック分けする場合はarticle要素を使いましょう。
div要素
ここまでsection要素とarticle要素の使い方を明示しましたが、div要素は特別な意味を持たない要素です。
そのため、スタイリングのために分割や共通属性をまとめる場合はdiv要素を使うことになります。
マークアップする際に他の要素が適切でない場合にdivを選択することでマシンリーダブルなコードになります。
2020/02/21追記、修正
同じく特別な意味を持たないタグに<span>がありますが、 <div> はコンテンツを囲む要素であるのに対し、 <span> は文字を囲む要素となっています。
HTML5でブロック要素・インライン要素による分類が廃止された件こちらの記事で解説されていますが、<span>はフレージング・コンテンツが期待される場所に使うべきものとなっています。
<p>などのフレージング・コンテンツの中で使用しましょう。
ul・ol要素
リストを作成するときに使用する<ul> <ol>ですが、これらは入れ子要素に<li>しか入れてはいけません。
例を挙げると以下のようなコードです。
See the Pen list by bashalog (@bashalog) on CodePen.
リンク付きのリストを作成する場合に上のようなコードをたまに見かけますが、こちらの記述はNGです。
<li>に対してのリンクなのでそう書きたくはなりますが、中の文字に対してaタグを付けましょう。
まとめ
今回はよく見る例についてまとめました。
入れ子のルールなどについて困った際にはMDNなどを一度チェックしましょう。
もし間違った記述をしていても、https://validator.w3.org/などでチェックをするとすぐにエラーを返してくれます。
これらのルールを守らなくてもHTMLの表示は変わりませんが、マシンリーダブルなコードを書くように心がけましょう！
