/ アウトライナーがあっても、サイトヘッダーのセマンティックマークアップ - html5、semantics、markup、outliner

outliner-html5、セマンティクス、マークアップ、アウトライナであっても、サイトヘッダのセマンティックマークアップ

通常、HTML5文書をコーディングするときは、次の構文を使います。

<header class="site-header">
<hgroup class="site-brand">
<h1 class="brand-name">
Brand Name
</h1>
<h2 class="brans-slogan">
Awesome Slogan
</h2>
</hgroup>
</header>
<article>
<header class="article-header">
<h1 class="article-title">Article Header</h1>
</header>
[... content ...]
</article>

あるようでした header サイトヘッダーの正しいタグですが、 仕様 そして このコードの概要、私は2つの欠点を見ました

  • header タグはその内容を第一レベルに、記事のタイトルは第二レベルにする
  • その目的は、ページが誰であるかをユーザーに知らせることであるため、サイトヘッダーには見出しがまったく含まれていない場合があります。

最善のアプローチは何でしょうか?

回答:

回答№1は1

あなたの最初の問題はあなたが2つのh1タグを持っているということです。これは適切なセマンティックマークアップではありません。あなたはヘッダータグについては正しいので、その領域に高レベルのhタグを入れることが望ましいでしょう。

言われていること、あなたの最初の質問はデザインとコンテンツアーキテクチャの問題。あなたがあなたの記事の本文でh1を使うつもりなら、あなたはあなたのページのヘッダで使う別のタグを選ぶべきです。

仕様によると、「ヘッダー要素 通常含まれている セクションの見出し(h1-h6要素またはhgroup要素)、およびそのセクションの紹介資料やナビゲーション補助などのコンテンツ。」

しかし、それはする必要はありません。 h1タグ(およびtitleタグ)は、ページの主な意味を表すものです。 2つのh1タグやヘッダータグは必要ありませんが、これら2つのタグを一緒に使用する必要はありません。


回答№2の場合は0

の使い方 header この例では大丈夫です。

しかし、それはここでは必ずしも必要ではありません。 h1-h6 そして hgroupあんた 必要 これはヘッダーであることを指定します。これは定義によってすでに明らかになっているからです。 header あなたが追加のコンテンツを含めることを望むなら、それがそれがそれがヘッダー対メインのコンテンツに属するべきであることを必ずしも明らかにしていないなら有用です。

しかし使用に害はありません header 見出しのためだけに、CSS / JSフックのためにそれを必要とするなら、それを続けてください、将来的に追加のヘッダコンテンツを含めるなど

header タグはその内容を第一レベルに、記事のタイトルは第二レベルにする

それが何を意味するのか理解できません。 header elementはドキュメントのアウトラインに影響を与えません。これは紹介コンテンツとメインコンテンツを区別する方法です。

その目的は、ページが誰であるかをユーザーに知らせることであるため、サイトヘッダーには見出しがまったく含まれていない場合があります。

header 要素が見つかりません 持ってる 見出しを含める例えば。この例は問題ないでしょう。

<article>
<header>I visited Berlin last week and in this post I document what I liked about it.</header>
<p>…</p>
</article>

footer 素子 は似ており、内容によっては両方の要素が適している可能性があります。

記事の作者を特定したい場合は、 footer.