HTML5 学習ノート簡潔版 (3): 新しい要素 hgroup、ヘッダー、フッター-H5 チュートリアル-php.cn

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

黄舟

リリース： 2017-01-21 16:34:00

オリジナル

2361 人が閲覧しました

hgroup

タグは、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>

ログイン後にコピー

同じページ内で、各コンテンツブロックに独自の

要素を含めることができます。たとえば、

<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>

ログイン後にコピー

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

要素タグも

で使用できます。

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>

ログイン後にコピー

複数の