HTML5文章構造化タグ

Tag:

HTML5では、文章の構造を強化するためのタグが追加されています。ここでは簡単な利用例を紹介します。

セクション関連のタグ

文章のかたまりを意味づけるために、以下のタグが追加されています。

タグ 概要
article 独立したコンテンツ。
section 章分けなどで利用。タイトルと内容で構成される1つのまとまり。
aside 関連リンクなどの補足情報。
nav ナビゲーション。

ページ構造化タグ

HTML5では、headerタグ、footerタグなどが追加されています。いままで、<div id=”header”>としていた箇所であれば、<header>に置き換えられるはずです。

利用例

追加されたタグを利用し、文章を構造化させた例を示します。

<html>
    <body>
        <div id="wrapper">

            <!-- ヘッダー -->
            <header id="header">
                <div class="container">
                    <h1 class="site-title"><a><img src=""></a></h1>
                    <p class="site-description"></p>                    
                    <dl id="site-info">
                        <dt></dt>
                        <dd></dd>
                    </dl>
                </div>
            </header>

            <!-- グローバルナビゲーション -->
            <nav id="gnav">
                <div class="container">
                    <ul>
                        <li id="menu-item-1"><a>ホーム</a></li>
                        <li id="menu-item-2"><a></a></li>
                    </ul>
                </div>
            </nav>

            <!-- パンくずナビゲーション -->
            <nav id="breadcrumb">
                <div class="container">
                    <ul>
                        <li><a>ホーム</a></li>
                        <li><a></a></li>
                    </ul>
                </div>
            </nav>

            <!-- コンテンツ -->
            <div id="contents">
                <div class="container">
                    
                    <!-- メイン -->
                    <article>
                        <section>
                            <h2></h2>
                            <section>
                                <h3></h3>
                            </section>

                            <section>
                                <h3></h3>
                            </section>

                            <section>
                                <h3></h3>
                            </section>

                            <aside></aside>
                        </section>
                    </article>

                    <!-- サイドバー -->
                    <div class="sidebar sidebar-right">
                        <h3></h3>

                        <aside class="banner">
                        </aside>
                    </div>

                    <p id="pagetop"><a></a></p>
                </div>
            </div>

            <!-- フッター -->
            <footer id="footer">
                <div class="container">
                    <p id="copyright"><small>Copyright (c)  XXXXX All Rights Reserved.</small></p>
                </div>
            </footer>
        </div>
    </body>
</html>

スポンサーリンク