ヘッダーとフッターのポイントは何ですか?
ここに示されているように、それらが書かれた順序でページにレンダリングされることを考えると、それらの違いは何ですか?
<article>
<footer>This is a footer</footer>
<header>This is a header</header>
</article>
ヘッダーとフッターのポイントは何ですか?
ここに示されているように、それらが書かれた順序でページにレンダリングされることを考えると、それらの違いは何ですか?
<article>
<footer>This is a footer</footer>
<header>This is a header</header>
</article>
唯一の明確なソースは HTML5 仕様です。これらの要素の意味を定義します。
header
要素の場合:
この
header
要素は、導入またはナビゲーション補助のグループを表します。
footer
要素の場合:
この
footer
要素は、最も近い祖先のセクション化コンテンツまたはセクション化ルート要素のフッターを表します。通常、フッターには、誰がそれを書いたか、関連文書へのリンク、著作権データなど、そのセクションに関する情報が含まれています。
両方のセクションで、使用目的に関する詳細なコメントと例を示します。
自分自身の言葉で:
footer
は、著者名、発行日、カテゴリ/タグなどのメタデータの場所です。各セクション要素 ( section
、article
、aside
、nav
) は独自の要素を持つことができますfooter
。footer
がセクション要素の一部でない場合は、ページ全体に適用されます。例:
<body>
<article>
<footer><!-- metadata about the article --></footer>
</article>
<footer><!-- metadata about the whole page --></footer>
</body>
このheader
要素は、見出し、要約/要約、「NSFW」などの警告などの紹介コンテンツ用です。
header
HTML5 仕様には、 の場合と同様に、要素のセクション化に関する同じ文言が含まれていないことに注意してください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
代わりに、要素全体のフッター (→ メタデータ) を表すようになりました。