ヘッダーが必要な理由とそれらに使用するタグ
この質問は私たちによく寄せられます。
HTMLが何年も前に発明されたとき、世界は完全に異なっていました。 仕様の作成者は、段落、リスト、表、写真、そしてもちろん見出しが1つのストリームで連続して入力されたテキスト文書に触発されました。 エッセイや学期末レポートのように、最大の見出しはタイトルです。小さな見出しはパーツまたは章です。
それ以降のHTMLには、 <h1>から<h6>までの6つの見出しレベルがあります。 それらは、それに続くすべてを見出し、暗黙のセクションを形成します。 このようなページの論理部分。 次の見出しが表示されたときにのみ閉じるため、これらは暗黙的です。
<h1></h1> <h2></h2> <p></p> <h3></h3> <p></p>
しかし、セクションは<section>要素で明示的に設定するのが最適です。3番目のリリースを覚えていますか？ これらの2つのフラグメントは、セマンティクスの点では同一ですが、これは冗長ではありますが、はるかに明確です。
<h1></h1> <section> <h2></h2> <p></p> <section> <h3></h3> <p></p> </section> </section>
このような暗黙のセクションのシステムのため、仕様では、見出しの下のキャプションに<h*>要素を使用しないことを強くお勧めします。 これは通常の段落であり、見出しは別のコンテンツを示す必要があります。 仕様には、 複雑な要素をマークアップする例の章があります ：署名、パン粉、ダイアログ-それを読んでください。
わかった！ 明示的なセクションがあるため、ネストすることでパーツの比率を簡単に決定できます。 ブラウザ自体がヘッダーが必要なレベルを推測するのではないでしょうか？ そして、考慮してください： <h1> 、 <h2> 、al ... lost。 したがって、コードの一部を交換する方が便利です。
HTML5の作成者にも同じ考えがあり、仕様でオフラインアルゴリズムについて説明しました。 ページでは<h1>のみを使用できます。また、 <article>や<section>などの構造要素のネストを指定することの重要性もあります。
<h1></h1> <section> <h1></h1> <section> <h1></h1> </section> </section>
開発者はこのアイデアを本当に気に入っており、多くはそれを実装するために駆けつけました。 しかし問題は、オフラインアルゴリズムがブラウザ、リーダー、または検索エンジンによってまだ実装されていないことです。 そのようなページでは、すべての見出しは、彼らがNo.1であり、最も重要であると叫んでいます。 しかし、すべてが重要であれば、何も重要ではありません。
これを行う必要はありません。今では仕様自体がそれについて書いています。 見出しのレベルを自分で監視する必要があります。 実際、これはそれほど難しいことではありません。通常のページでは、構造部分が3レベル以上あることはほとんどありません。 だから怠けてはいけません。
待てない クラスを<div>と、全員がすぐに表示されます-これが最大の見出しです。別のクラスを配置します-見出しが小さくなり、表示されます。 CSSがあるのに、なぜレベルの計算にこのナンセンスがあるのですか？
<div class="big-black"> </div> <div class="small-grey"> </div>
確かに、スタイルは重要な視覚モデルを作成します。大きな黒いテキストはより重要であり、小さな灰色のテキストはまったく重要ではありません。 ただし、そのようなページを見る場合のみです。
マークアップタグを使用してページを読むユーザーの2つの重要なグループがあります。 彼らはあなたの<div>がどれだけ大きくて黒いように見えません-ページで最も重要なものを見つけるために、彼らは<h1>を探します。 これらはリーダーとロボットです。 ロボットを使用すると、すべてが明確になります。これらは、ページを理解するのに助けが必要な検索エンジンです。
リーダーまたはスクリーンリーダーは、インターフェイスが表示されない、またはまったく表示されない、または通常の方法でブラウザを制御できないユーザーによって使用されます。 VoiceOver、NVDA、JAWSはコンテンツを読み上げ、意味のあるタグにのみ焦点を合わせます。 div要素とspan要素は、どのクラスやスタイルをラップしても何も意味しません。 そのようなサイトは、見出しのない新聞のようなもので、単なるテキストの混乱です。
なんて新聞だ！ 2017年、庭で目を覚まします。私は壁新聞ではなく、同形の1ページのアプリケーションを実行しています。 ここにコンポーネントの状態があります-テキストがないセマンティクスの場合はどうですか？ とてもいい質問です。
すべての読者は、最初から最後までタグごとにページを追跡します。 そして、中のすべてを連続して読みます。 非常に非効率的です。各ページは見出しから始まり、それを読み進めている間、自分がフォローしていたものを忘れます。 したがって、読者にはページの重要な部分のみを表示する特別なモードがあります。 構造要素のヘッダー、nav、mainなど、すべてのリンク、すべてのヘッダー。
すべての見出しを表示して読むと、ページの視覚モデルではなくメンタルを作成できます。 それから、タイトルを選択して、すぐに目的のセクションに移動します。 メニュー、検索、カタログ、設定、ログイン-アプリケーションのこれらすべての部分には、それらへのアクセスを簡素化する権利を与えることができます。
- - - - - -
しかし、デザインに重要なパーツの見出しがない場合があります。 デザイナーは描きます。カツレツのメニュー、フィールドの検索など、すべてが彼にとって明らかです。 ただし、これにより、アクセス可能なインターフェイスを作成することを妨げることはありません。 必要な見出しを配置してから、それらを非表示にします。 どうやって？ display: noneのみdisplay: none 、その読者は無視します。 このような視覚的に隠されたパターンは、ビデオの説明にもっとあります。
レイアウトがどのように見えるかだけでなく、 論理レイアウトがどのように整理されるかも考えてください。 見出しを忘れないでください。スタイルを表示して、ページやアプリケーションの見出しを教えてください。
ビデオ版
ここで質問することができます 。