liguofeng29’s blog

個人勉強用ブログだっす。

HTML5の要素と属性 - HTML5新規要素①(ドキュメント構造関連)

HTML5 ┗━HTML5の常用要素と属性

HTML5以前では、div要素で表現してたが、HTML5からはドキュメント構造を表す要素が大量に追加されている。

HTML5ドキュメント構造要素

  • article : 独立する完全かる文章

    • 内部要素：header - タイトル
    • 内部要素：footer - 脚注
    • 内部要素：section - 段落
    • 内部要素：複数のarticle

  • section : ブロックを表す

  • nav : ナビーを表す

  • aside : ページ、文章の追加情報を定義する

  • hgroup : <h1.../> ～ <h6.../>を組み合わせる？

  • figure : イメージ領域を表す、複数のimg要素を内部で持つ

  • figcaption : figureの内部で使用し、イメージ領域のタイトル

サンプルコード

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> ドキュメント構造関連要素 </title>
   <link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<article>
    <!-- 文章ヘッダー -->
    <header>
        <h1>文章のタイトルです</h1>
        <div>文章の作者</div>
    </header>
    <p>
    文章の内容文章の内容文章の内容文章の内容文章の内容文章の内容
    文章の内容文章の内容文章の内容文章の内容文章の内容文章の内容。</p>
    <!-- コメントのブロックを表す  -->
    <section>
        <!-- articleは1コメントを表す -->
        <article>
            <!-- コメントタイトル -->
            <header>
                <h2>コメント１のタイトル</h2>
                <div>回答者１</div>
            </header>
            <p>コメント1コメント1コメント1コメント1コメント1コメント1</p>
        </article>
        <!-- articleは1コメントを表す -->
        <article>
            <!-- コメントタイトル -->
            <header>
                <h2>コメント２のタイトル</h2>
                <div>回答者２</div>
            </header>           
            <p>コメント1コメント1コメント1コメント1コメント1コメント1</p>
        </article>
    </section>
    <!-- 文章のフッター -->
    <footer>
        これは文章のフッターです。
    </footer>
    
    <aside>
        <h3>文章の追加情報</h3>
        <section>
        <div>ユーザ名  : xxx</div> 
        <div>前回投稿日: 2009-7-27</div> 
        <div>ユーザレベル�: 99</div> 
        </section>
    </aside>
    
</article>
<aside>
    <h3>ナビー</h3>
    <nav>
        <ul>
            <li><a href="#">関連内容</a></li>
            <li><a href="http://google.co.jp">google.co.jp</a></li>
            <li><a href="http://yahoo.co.jp">yahoo.co.jp</a></li>
        </ul>
    </nav>
</aside>
<figure style="border:2px solid black;padding:5px;width:500px;height200;">
    <figcaption><b>イメージ領域</b></figcaption>
    <img src="img1.png" alt="img1"/>
    <img src="img2.png" alt="img2"/>
    <img src="img3.png" alt="img3"/>
</figure>
</body>
</html>

article {
    font-size:11pt;
}
header {
    background-color:#ddd;
}
footer {
    border-top: 1px solid black;
    font-size: 12px;
    text-align: center;
}
aside {
    position:absolute;
    background-color:#dda;
    border:1px solid black;
    width: 200px;
    left:75%;
}
article>aside{
    top:40%;
}
body>aside{
    top:5%;
}

f:id:liguofeng29:20160117155029p:plain