公開日2020.07.31

最終更新日2022.10.04

アール

＜div＞ばかり使ってない？HTML5コンテンツ・モデルについて！

今回は、HTMLコンテンツ・モデルについてお話したいと思います。

HTMLコンテンツ・モデルについて今一理解していなかった自分は、
ヘッター、フッター、メイン以外は、迷ったら取りあえずで<div>囲っておけば問題ないだろうの考えでWEB作成してましたが、、

ご指摘受けてから<div>を減らし、今回お話するコンテンツ・モデルを取り入れたことでがコード全体がスッキリすることを実感致しました！

さてと、
「迷ったら<div>でいいや」

って、なっていた自分みたいにならない様に、、、
HTMLコンテンツ・モデルについて分かりやすくご紹介していきたいと思います。

では、早速、目次にそって進めたいと思います！

前回記事をより深掘りした記事となります

HTML5とはHTML4と何が違うの？

今までのHTMLでは、要素は大きく分けて「ブロック要素」「インライン要素」の2つに分類されておりましたが、、、

ブロック要素
文書の骨組みとなる要素です（ex:見出し、段落、表など）。
body要素に直接、子要素として配置することができます。

<body>
    <h1>タイトル</h1>
    <p>コメント。コメント。コメント。</p>
</body>

インライン要素
文章中の一部として扱われる要素です（ex:リンク、段落、文字の強調など）。
ブロック要素内で配置することができます。

<p>
    お問い合わせ</br>
    ○○○○＠×××
</p>

HTML5では「ブロック要素」「インライン要素」という考え方が廃止されました。その代わりに新しく導入されたコンテンツ・モデルは、新し定義であり各要素にどの要素を入れることが出来るかを明確に示した配置ルールです。

今まで使っていた要素が複数の「カテゴリー」に細かく分類されるようになりました。そして、「コンテンツ・モデル」によってマークアップルールが決まるようになりました。

コンテンツ・モデルの種類

HTML5からは、章・節・項などのセクションを明示的に表す７つのコンテンツモデルが追加されました。一体どんなものなのかざっくりと説明したいと思います。

分類名	役割
Metadata (メタデータ・コンテンツ）	セクションの見出しとなるもの
Flow （フロー・コンテンツ）	子孫にテキストなどを持つもの
Sectioning （セクショニング・コンテンツ）	見出しと概要を付けられるもの
Heading （ヘッディング・コンテンツ）	セクションの見出しとなるもの
Phrasing （フレージング・コンテンツ）	段落などの中に含まれる文節・語句など
Embedded （エンベッディッド・コンテンツ）	文書に他のリソースを埋め込むもの
Interactive （インタラクティブ・コンテンツ）	ユーザーによる操作に対応するもの

（参照：HTML5リファレンス）

今まで<div>で書いていた箇所にコンテンツモデルを使うことで、すっきりとしたコードに仕上げることが出来るようになりましたね！

各要素は、上記のコンテンツのいずれか一つに分類されるだけでなく、一つの要素に対して複数のコンテンツが定義されることもあります。

では、
次章では、コンテンツ・モデルの中で最も使うことが多いセクションニングコンテンツの正しい使い方につてご説明していきたいと思います。

セクションニングコンテンツ

以前までは、セクショニングコンテンツが無い場合でも見出し等の階層構造により認識されてきました。
HTML5が登場してからは、セクショニングコンテンツを使用してはっきりと階層構造を示すようになりました。

過去のソースコード
<h1>見出し</h1>
    <h2>見出し</h2>
    <p>コメント</p>
    <h2>見出し</h2>
    <p>コメント</p>

現在のソースコード
<section>
    <h1>見出し</h1>
    <section>　
        <h2>見出し</h2>
        <p>コメント。</p>
    </section>
    <section>
        <h2>見出し</h2>
        <p>コメント</p>
    </section>
</section>

2つのソースコードを比べてみると、一目瞭然セクションニングコンテンツを使っている方が分かりやすいですよね！

セクショニングコンテンツに含まれるのは、<article> <aside> <nav> <section>の４つになっております。

使うにあたって見出し要素となる<h1>~<h6>が必要となります。
ただ、<aside> <nav>の要素は、文脈的に見出しをつけるのが難しいので無理に付ける必要ありません。

下記より、各要素の役割＆使い方についてご説明致します。

<article>要素

文章、ページ、サイトなどの中で、独立または自己完結できるコンテンツを示すための要素です。ブログ、雑誌、新聞の記事などに使われることが多いです。記事一覧などがあるページにおいても、記事１つずつ囲むなどして１ページのなかに複数使われることもあります。

<mein>
    <article>　
        <h1>記事１</h1>
        <p>コメント。コメント。コメント。コメント。</p>
    </article>
    <article>　
        <h1>記事２</h1>
        <p>コメント。コメント。コメント。コメント。</p>
    </article>
</mein>

<aside>要素

周りのコンテンツとの関連が薄いコンテンツを示す要素です。
メインとなるコンテンツと余り関係ない情報、広告表示などに利用されることが多いです。

<aside>
    <p>コンテンツと余り関係ない内容。広告やリンク先等。</p>
</aside>

<nav>要素

Webページ内のナビゲーション部分を示す要素です。ナビゲーションとは、ウェブサイト内の他のページへのリンク、ページ内リンクなどのことです。
リンクしたい箇所を全て<nav>～</nav>で囲む必要はなく、主要なナビゲーションとなるセクションのみを囲むことに適しています。

<nav>
    <ul>
        <li>メニュー1</li>
        <li>メニュー2</li>
        <li>メニュー3</li>
    </ul>
</nav>

<section>要素

章・項・節・段落のような見出しからはじまる部分を示す要素です。
<article> <aside> <nav>要素に該当しない部分に使用します。
見出し要素となる<h1>～<h6>がない部分には使うことが出来ません。

<section>
    <h1>タイトル</h1>
    <p>コメント。コメント。コメント。コメント。コメント。</p>
</section>

この４つがセクションニングコンテンツとなります。

HTML5から新しく登場した意味を持つタグを使用することで、ブラウザにとって構造が理解しやすいコードを書くことが出来るようになります。
以前の様なコードの書き方をしてしまうと、ブラウザでは構造を正しく理解することが出来ず、検索結果表示順位を決める評価付けで正しく評価出来なくなってしまう恐れがあります。

構造を正しく理解してもらう為にも、セクションニングコンテンツに該当する箇所は積極的に使っていきましょう！

便利なタグはどれ？

一般的によく使われるタグは、<h> <div> <p> <a> <img>この５種類ですかね。
実は、この他にもコードを書くときに便利なタグが沢山あります。
この章では、便利なタグを幾つか紹介してみようと思います！

<time>タグ

日付や時刻を指定する部分を示す要素です。
24時間表記や新暦のグレゴリオ暦における正確な日付を表します。

<p><time>2020/02/02<time>サイトリニューアル</p>

<em>タグ

アクセントをつける箇所を示す要素です。
<em>には、重要性を伝える意味はありません。

<p>白い猫は<em>とっても</em>可愛らしいです。</p>

<rudy>タグ

読みにくい漢字、フリ仮名、きらきらネームの読み方を正しく伝えたい時に示す要素です。タグを使わず漢字のあとに（）で読み方を書く方法も多くみられますが、<rudy> を使った方が文章がすっきりして見えます。一般的に <ruby> は、 <rp> <rt> とセットで利用します。

<rudy>
    薔<rt>ば</rt>
    薇<rt>ら</rt>
</rudy>

<figure>タグ & <figcaption>タグ

<figure>は、図表であることを示す要素です。
<figcaption> は、<figure>で囲った図表に対してのコメントであることを示す要素です。
基本は、<figure> と <figcaption> セットで利用します

<figure>
    <img src = "../img/.." alt = "画像の名前">
    <figcaption>画像に対するコメント</figcaption>
</figure>

<video>タグ & <audio>タグ

<video> は動画ファイル、<audio> は音声ファイルであることを示す要素です。 <video> <audio> は、同じ要領で記述します。

<video src="https://~"></video>

この記述によってファイルを読み込むことが出来ました。
次に動画再生の詳細を指定する以下のような属性を使う必要があります。

<controls> → 再生ボタンや再生位置のインターフェイスを表示出来ます。
<autopiay> → ページを読み込んだ時点で、自動再生することが出来ます。
<loop> → ループ再生を指定することが出来ます。

まだまだ沢山、HTML5より登場した便利なタグがありますがその中でも自分が知っていると便利だと思うタグについてご紹介させて頂きました！

今まで、使えるタグがなく<div>で囲って表現していた箇所で使えそうなタグがありましたらぜひ使ってみて下さい！

まとめ

今回はHTMLコンテンツ・モデルについてご紹介させて頂きました。

それぞれの文章の内容によって適したコンテンツ・モデルがあることが分かりましたね。
最後まで読んで下さった皆様なら自分みたいに、

迷ったら<div>でいいや！

には、ならないと思います。
最後の手段で<div>を使い、他の要素それぞれの適したコンテンツ・モデルを使ってWEB作成をしていきましょう！

最後まで、お付き合い頂きましてありがとうございます。