2

ヘッダーとフッターのポイントは何ですか?

ここに示されているように、それらが書かれた順序でページにレンダリングされることを考えると、それらの違いは何ですか?

<article>
    <footer>This is a footer</footer>
    <header>This is a header</header>
</article>
4

3 に答える 3

2

唯一の明確なソースは HTML5 仕様です。これらの要素の意味を定義します。

header要素の場合:

このheader要素は、導入またはナビゲーション補助のグループを表します。

footer要素の場合:

このfooter要素は、最も近い祖先のセクション化コンテンツまたはセクション化ルート要素のフッターを表します。通常、フッターには、誰がそれを書いたか、関連文書へのリンク、著作権データなど、そのセクションに関する情報が含まれています。

両方のセクションで、使用目的に関する詳細なコメントと例を示します。

自分自身の言葉で:

footerは、著者名、発行日、カテゴリ/タグなどのメタデータの場所です。各セクション要素 ( sectionarticleasidenav) は独自の要素を持つことができますfooterfooterがセクション要素の一部でない場合は、ページ全体に適用されます。例:

<body>
  <article>
    <footer><!-- metadata about the article --></footer>
  </article>
  <footer><!-- metadata about the whole page --></footer>
</body>

このheader要素は、見出し、要約/要約、「NSFW」などの警告などの紹介コンテンツ用です。

headerHTML5 仕様には、 の場合と同様に、要素のセクション化に関する同じ文言が含まれていないことに注意してくださいfooter。ただし、これはHTML5.1 で既に修正されており(関連するバグを参照)、HTML5 でも変更される可能性があります。

これらの要素の命名には注意を払うべきではありません。Aは、記事headerの最後とfooter最初に表示されることもあります。

全体像:headerおよびfooter(および) は、セクション要素 (またはページ全体)のメイン コンテンツの一部ではないaddressセクション要素 (またはページ全体) のコンテンツをマークアップするのに役立ちます。

なしの簡単な例footer:

<article>
  <h1>About me</h1>

    <h2>What I love</h2>
      <p>I like <cite>The Hitchhiker's Guide to the Galaxy</cite>.</p>

    <h2>What I hate</h2>
      <p>I hate <cite>Pacman</cite>.</p>

    <p>Tags: <a href="/personal">personal</a>, <a href="/fandom">fandom</a></p>

</article>

↑ この記事の最後の段落 (この記事のタグを含む) は、「嫌いなもの」という見出しの範囲になります。私は「タグ」、「個人的」、または「ファンダム」が嫌いではないので、これはもちろん間違っています。したがって、この段落が前の見出しに関連付けられないように、これをマークアップ内に反映する必要があります。

<article>
  <h1>About me</h1>

    <h2>What I love</h2>
      <p>I like <cite>The Hitchhiker's Guide to the Galaxy</cite>.</p>

    <h2>What I hate</h2>
      <p>I hate <cite>Pacman</cite>.</p>

    <footer>
      <p>Tags: <a href="/personal">personal</a>, <a href="/fandom">fandom</a></p>
    </footer>
</article>

↑ にタグを入れたfooterので、「嫌いなもの」の対象外です。article代わりに、要素全体のフッター (→ メタデータ) を表すようになりました。

于 2013-05-27T16:21:30.260 に答える
0

一般に、タグでは、ヘッダーに記事の件名、フッターに作成者および/または執筆時間を含めることができます。

詳細については、次のリンクを参照してください。

ヘッダー要素

フッター要素

于 2013-05-26T19:26:13.877 に答える