ホームページ > 記事 > ウェブフロントエンド > HTML5 学習ノート簡潔版 (3): 新しい要素 hgroup、ヘッダー、フッター

HTML5 学習ノート簡潔版 (3): 新しい要素 hgroup、ヘッダー、フッター

黄舟オリジナル: 2017-01-21 16:34:002193ブラウズ

hgroup

d8eccd9ed644b68a6460a2bb84548c82 タグは、Web ページまたはセクションのタイトルをグループ化するために使用されます。

<hgroup>
  <h1>Welcome to my WWF</h1>
  <h2>For a living planet</h2>
</hgroup>

<p>The rest of the content...</p>

header

header 要素は、ガイダンスおよびナビゲーション機能を備えた補助要素です。通常、ヘッダー要素にはブロックのタイトル (h1 ～ h6、または hgroup 要素タグなど) を含めることができますが、データテーブル、検索フォーム、関連するロゴイメージなどの他のコンテンツを含めることもできます。

この要素を使用して、ページ全体のタイトル部分を記述することができます:

<header>
    <h1>The most important heading on this page</h1>
</header>

同じページ内で、各コンテンツブロックに独自の 1aa9e5d373740b65a0cc8f0a02150c53 要素を含めることができます。たとえば、

<header> 
  <h1>The most important heading on this page</h1>
</header>

<article> 
  <header>   
    <h1>Title of this article</h1> 
  </header> 
  <p>...Lorem Ipsum dolor set amet...</p>
</article>

1aa9e5d373740b65a0cc8f0a02150c53タイトルタグ(h1～h6)またはhgroupが含まれます。さらに、データテーブル、検索フォーム、関連するロゴ画像などの他のコンテンツも含めることができます。最新の W3C HTML5 仕様に従って、c787b9a589a3ece771e842a6176cf8e9 要素タグも 1aa9e5d373740b65a0cc8f0a02150c53 で使用できます。

footer

footer 要素は、直接の親コンテンツブロックの末尾またはルートブロックとして使用できます。通常、フッターには、著者、関連する読書リンク、著作権情報など、関連するブロックに関する追加情報が含まれます。

過去 (そして現在)、私たちは通常、次のようなコードを使用してページのフッターを記述します:

<div id="footer">
  <ul>
     <li>copyright</li>
     <li>sitemap</li>
     <li>contact</li>
     <li>to top</li>
  </ul>
<div>

HTML5 では div は使用できませんが、よりセマンティックなフッターを使用して記述します:

<footer>
  <ul>
     <li>copyright</li>
     <li>sitemap</li>
     <li>contact</li>
     <li>to top</li>
  </ul>
</footer>

複数の c37f8231a37e88427e62669260f0074d 要素を同じページ内で使用できます。これは、ページ全体のフッターとして使用することも、コンテンツブロックの最後として使用することもできます。または 23c3de37f2f9ebcb477c4a90aac6fffd 内:

<section>
   Section content appears here.
   <footer>
      Footer information for section.
   </footer>
</section>

<article>
   Article content appears here.
   <footer>
      Footer information for article.
   </footer>
</article>

address

address 要素は、文書作成者の名前、サイトリンク、メールアドレス、実際の住所、電話番号などの連絡先情報を文書内に表示するために使用されます。 etc. ; 住所は、電子メールアドレスや実際の住所などの「住所」の概念を示すために使用されるだけでなく、文書の作成者に関連するさまざまな連絡先情報も含まれる必要があります。

上記の定義に基づいて、次のコードを使用して、一部のボランティアの名前とホームページのリンクを表示できます。

The HTML5 Doctor is run by the following group of volunteers:
<address>
  <a href="http://html5doctor.com/author/jacko">Jack Osborne</a>,
  <a href="http://html5doctor.com/author/richc">Rich Clark</a>,
  <a href="http://html5doctor.com/author/miker">Mike Robinson</a>,
</address>

これも c37f8231a37e88427e62669260f0074d 要素と 46dd80ba616c57a652514755c74c4211 要素を使用した別の例です。現在のドキュメント作成者の連絡先情報に関連しない連絡先情報をページに表示する必要がある場合は、hCard マイクロフォーマットを使用できます:

<footer>
  <div class="vcard"> by
    <address class="author">
      <em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em>
    </address> on
    <time datetime="2009-11-04" class="published updated">November 4th, 2009</time>
  </div>
</footer>

nav

nav 要素は、次のように使用できるリンクグループです。ページナビゲーション。その中のナビゲーション要素は、他のページまたは現在のページの他の部分にリンクします。すべてのリンクグループを c787b9a589a3ece771e842a6176cf8e9 要素に含める必要はありません。たとえば、この場合、サービス利用規約、ホームページ、著作権表示などのリンクグループが含まれます。 c787b9a589a3ece771e842a6176cf8e9 要素を必要とせずに、c37f8231a37e88427e62669260f0074d 要素を使用するのが最も適切です。

私たちは常に次の方法でナビゲーションバーを定義することに慣れてきました:

<div class="vcard">
  <p class="fn"><a class="url" href="#">Dr. Jack Osborne</a><p>
  <p class="adr">
    <span class="street-address">HTML5 Hospital</span>
    <span class="region">Doctorville</span>
    <span class="postal-code">Postal Code</span>
    <span class="country-name">Great Britain</span>
  </p>
  <p class="tel">+44 (0)XXXX XXXXXX</p>
</div>

以下は W3C によって提供されたコード例です:

<body>
    <h1>The Wiki Center Of Exampland</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/events">Current Events</a></li>
            ...more...
        </ul>
    </nav>
    <article>
        <header>
            <h1> Demos in Exampland</h1>
            <p>Written by A. N. Other.</p>
        </header>
        <nav>
            <ul>
                <li><a href="#public">Public demonstrations</a></li>
                <li><a href="#destroy">Demolitions</a></li>
                ...more...
            </ul>
        </nav>
        <div>
            <section id="public">
                <h1>Public demonstrations</h1>
                <p> ...more...</p>
            </section>
            <section id="destroy">
                <h1>Demolitions</h1>
                <p>...more...</p>
            </section>
            ...more...
        </div>
        <footer>
            <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
        </footer>
    </article>
    <footer>
        <p><small>© copyright 1998 Exampland Emperor</small></p>
    </footer>
</body>

以上就是HTML5学习笔记简明版（3）：新元素之hgroup,header,footer的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5 学習ノート簡潔版 (2): 新しい要素セクション、記事、余談次の記事：HTML5 学習ノート簡潔版 (2): 新しい要素セクション、記事、余談

続きを見る

HTML5 学習ノート簡潔版 (3): 新しい要素 hgroup、ヘッダー、フッター

関連記事