5

適切なセマンティック マークアップについて話しているのです。

通常、h1 から始めて、そこから下に向かって作業しない理由はないことを私は知っています。

しかし、サイドバーのような独自の階層を持つサイドバーのようなものを作成している場合、ベスト プラクティスは何ですか? h1 から開始し、css ルールを使用してサイドバー h1 とメインの h1 を区別できることはわかっていますが、代わりに h3 から開始すると、直接一致するため、それほど多くの css を記述する必要がない可能性が高くなります。 、または少なくともメインの h3 に近い。

同時に、それは厳密にはセマンティックではありませんね。

ここにベストプラクティスはありますか? (私は主に、スクリーン リーダーに最適に見えるものに関心があります)

4

5 に答える 5

2

見出しレベルを飛ばすのは良くないと考える人もいます。このビューは非常に普及しているため、実際にはHTML 4.01 仕様で言及されています(緑色のテキストを参照)。しかし、仕様では、レベルをスキップしてはいけないとは言っていません。

実際、HTML5 仕様には、すべての見出しが である例も含まれており、新しいタグ<h1>を使用して互いに区別されています。<section>それは数年前にはクレイジーに見えたでしょう。

<h1>記事のタイトルが含まれている記事を少なくとも 1 つ用意することをお勧めします。ただし、通常、サイドバーには特定のレベルの見出しは必要ありません。<h1>サイドバーから始めようが、サイドバーから始めようが、検索エンジンでさえ、誰も気にしません<h4>。スクリーン リーダーを使用している人々を支援するために、ある程度の階層があることを確認してください。それ以外は、あなたがやりたいことを何でもしてください。

于 2011-01-07T22:24:40.287 に答える
1

ヘッダーについて考えるときは、CSS とスタイル設定を無視してください。それは、ページの見出しの重要性に完全にかかっています。

個人的には、サイドバーの見出しをh3せいぜい約 で開始しh5ます。ドキュメントの見出しの重みによって、それぞれのレベルが決まります。たとえば、あまり重要でないヘッダー「Navigation」はh1.

Google やその他の検索エンジンにとって、「ナビゲーション」と「My Amazing title」h1の両方が同じように重要である場合、意味的にはそうではありません。

見出しのセマンティック レベルを決定したら、CSS を使用してスタイルを設定し、デザインに適したサイズにすることができます。開発者が間違った印象を受けるように、デフォルトのフォント サイズをすべての見出しで同じにするべきでした。

于 2011-01-07T22:19:30.403 に答える
0

CSS の子孫を使用することが推奨される方法だと思います。「多すぎる」CSS を書くことを心配する必要はありません。CSS を使用してレイアウトを明示的に定義すればするほど、より柔軟になります。サイドバー ID をメイン セレクターとして使用します。

<style>
  h1 {
    font-size: 2em;
  }

  #sidebar h1 {
    font-size: 1.1em;
  }
</style>

そして、コードで次のように定義します。

<div id="sidebar">
  <h1><!-- sidebar H1--></h1>
</div>
<h1>Page Title</h1>

h1また、アクセシビリティ上の理由から、メイン コンテンツのタイトルにのみ使用することをお勧めします。同様に、コンテンツの小見出しにのみh2-を使用します。(メニュー固有のマークアップについてh6は WAI-ARIA を参照してください)。role

于 2011-01-07T22:22:14.477 に答える
0

ディペンツ。一部の検索エンジンは、h1 が h2、h3 などよりも重要であると考えていると思いますが、コーディングでは問題ありません。

于 2011-01-07T22:17:23.203 に答える
-1

リストを使用してから、クラスを使用して CSS でフォ​​ーマットすることもできますが、これもセマンティックではありません。

<ul>
  <li class="level1">Level 1</li>
  <li class="level2">Level 2</li>
</ul>

<style>
  .level1 { font-size: 1.2em; }
  .level2 { font-size: 0.8em; }
</style>

段落タグはよりセマンティックな場合があります。

<p class="level1">Level 1</p>
<p class="level2">Level 2</p>

<style>
  .level1 { font-size: 1.2em; }
  .level2 { font-size: 0.8em; } 
</style>
于 2011-01-09T19:24:59.090 に答える