雰囲気でそれっぽく使うHTML5

今回は「普段あまりHTML書かないけど、書かないといけなくなってしまった。。」という方などをターゲットに、これだけ知っておけばそれっぽく書けるHTMLのTIPSをお伝えしていきます。

覚えるべきポイントはたったの３つです！（本当はもっとありますよ）

ポイント１　入れられる要素、入れられない要素を理解する
ポイント２　アウトラインを構成する要素を理解する
ポイント３　タグの意味を知って適切に使い分ける

ポイント１　入れられる要素、入れられない要素を理解する

HTMLを書くのにあまり慣れていない人は、ルール上許されていない入れ子構造にしてしまう、というミスをおかしがちです。

各HTML要素には入れられる要素、入れられない要素が決まっていおり、そのルールをコンテンツモデルと呼びます。

例えば、div要素やp要素の場合は以下の通りです。

div要素 = フローコンテンツ = ほぼなんでも入れられる
p要素＝フレージングコンテンツ = spanやemは入れられるがdivなどは入れられない

そのルールを主要なタグに絞って図示してみましたが、なじみのない名称も多く、少し覚えづらいですよね。。

そんな時はこの３点だけを意識してみください（ほぼうまくいくはずです）

子要素には自分より大きそうな要素は入れない
ul,ol,dl,tableあたりは例外系として気をつける
- ul/ol：直下の子要素にはli要素しか入れられない
- dl：直下の子要素にはdt要素かdd要素しか入れられない
- table：table要素/tr要素はそれぞれ決まったものしか子要素に持てない
a要素はコンテンツモデルを継承する（= a要素は無視できる）
- div > a 要素の中に入れられるのは div 要素の時と同じ

迷った時は「HTML 入れ子」などのクエリで検索すると、早見表などを見つけられるので、参考にしてみてください。

ポイント２　アウトラインを構成する要素を理解する

HTMLではアウトライン（大枠の文書構造）を正しく整えると、SEOやアクセシビリティにおいて大きなメリットがあります。

h1〜h6要素を使うだけでもアウトラインの作成は可能ですが、セクショニングコンテンツを使って明示的に指定する方が断然分かりやすく、ミスも起きづらいのでおすすめです。

セクションニングコンテンツはたった４つしかないため覚えるのは難しくありません。

article
aside
nav
section

この時気をつけたいことがもう少しだけあります ↓

body要素もセクションを作る
main要素、header要素、footer要素はセクションを作りそうな雰囲気だが実際には作らない

これだけ覚えておけば、自由にアウトラインの作成が可能になります。

最後にアウトライン作成の例を貼っておきます。

アウトラインの例


<body>
  <h1>サイト名など</h1>
  <artcile>
    <h2>記事タイトルっぽいもの</h2>
    <section>
      <h3>章タイトルっぽいもの1</h3>
    </section>
    <aside>
      <h3>章タイトルっぽいもの2</h3>
    </aside>
  </artcile>
</body>

上記コードで以下のようなアウトラインが生成されます。

1. サイト名など
- 1.1 記事タイトルっぽいもの
  - 1.1.1 章タイトルっぽいもの1
  - 1.1.2 章タイトルっぽいもの2

ポイント３　タグの意味を知って適切に使い分ける

慣れるまでは同じような雰囲気のタグをどう使い分けていいか悩んでしまいますよね。

そんな悩みの一部はタグの意味（原義、何の略語なのか）を知ると解決できるので、早速見ていきましょう。

div = division = 区分 = あまり意味はなく、あくまでまとまりを作るものに過ぎない
p = paragraph = 段落 = 文章の１つのまとまりなので、複数段落や１単語にはあまり適さない
ol/ul/li
- ol = orderd list = 順序ありリスト = ランキングなど並びに意味があるリストに適している
- ul = unorderd list = 順序なしリスト = olが適さない箇条書きなどで使う
- li = list item = リストの要素
dl/dt/dd
- dl = definition list = 定義リスト
- dt = definition term = 定義される言葉
- dd = definition description = 定義の説明
- ※ HTML5になって使い方が緩和され「定義」というほどではない「説明」レベルの内容でも使うことができるようになりました

まとめ

以上、それっぽく書くために最低限知っておきたい内容に絞ってHTMLの使い方をご紹介しました。

もちろん、さらに綺麗に書いたり、よりセマンティックに書いたりも可能ですので、ご興味ある方はW3CのガイドラインやGoogleのSEOガイドラインなどにも目を通してみください。

この記事をシェアしてくれると小躍りします