HTML5特有のタグ

HTML5で組んでいる人だけが対象となります。

HTML5に対応していないブラウザにも、認識させる方法は、IE8以下をHTML5に対応させる方法で述べました。

有名どころの、section、article、nav、header、footer、aside、figure、figcaptureあたりを覚えておけばよいかと思います。

下の図のようなdivでマークアップしていた要素を、その働きごとに対応するタグに書き換えたのがHTML5のタグになります。

ヘッダー部分を囲んでいたdivをheaderに、フッター部分のdivはfooterに、サイド部分のdivはasideに、1つの記事になりえるくらい大きな単位（複数の見出し）を囲むdivをarticleに、1つ1つの記事の区切り（見出しから次の見出しまで）をsectionで、パンくず等ナビをnavで囲んだのがHTML5です。

HTML5で組んでいる人は、先ほどdivで作った骨格を

<!-- HTML5 -->
<body>
<div id="a1234">
    <div id="a1">
        <ul id="b1"></ul>
    </div>
    <div id="a23">
        <div id="a2">
        </div>
        <div id="a3">
            <h2></h2>
            <p></p>
            <h2></h2>
            <p></p>
        </div>
    </div>
    <div id="a4">
    </div>
</div>
</body>

次のように直してください。

<!-- HTML5 -->
<body>
<div id="a1234">
    <header id="a1">
        <nav><ul id="b1"></ul></nav>
    </header>
    <div id="a23">
        <aside id="a2">
        </aside>
        <article id="a3">
            <section>
                <h2></h2>
                <p></p>
             </section>
            <section>
                <h2></h2>
                <p></p>
            </section>
        </article>
    </div>
    <footer id="a4">
    </footer>
</div>
</body>

さらに詳しく知りたい方は、こちらへ。

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>