online class text for web and video

webcordingカテゴリーの共通アイキャッチ画像

HTML実践

HTMLアウトライン

HTMLアウトラインは、HTML文書の論理的な構造を示すもので、文書内の各要素がどのように階層化され、関連付けられているかを表します。
<header> <section> <aside>などのセクショニング要素と<h1>から<h6>の見出しタグを使って文章の各セクションを区切り、その関係性を示すことで、文書全体の大まかな構成を把握しやすくします。特に視覚障害者が利用するスクリーンリーダーのような支援技術や検索エンジンにとって重要な役割を担います。

暗黙的アウトライン概要

セクショニング要素を使用せず、見出しタグだけで文書構造を階層化して表します。
HTML5でセクショニング要素が導入される以前、HTML4.xの頃はHTMLアウトラインといえば暗黙的アウトラインを指していました。
暗黙的アウトラインは文書構造が曖昧で、スクリーンリーダーや検索エンジンが正確に文書を理解しにくくなりますが、単純な構造、明確なセクション区切りが不要な場合には、現在でも暗黙的アウトラインが使われることがあります。
例えば、ブログの単一の記事ページや特定の用途に特化したページでは、見出しタグだけで十分な構造を持つことができるため、セクショニング要素をわざわざ使わないことがあります。

見出しタグ

HTMLには6種類の見出しタグがあり、情報を論理的に階層化するために使います。<h1>が最も重要で<h6>が最も詳細なレベルになります。
正しい見出しタグの使用はスクリーンリーダー（アクセシビリティ）や検索エンジン（SEO）がページ内容を理解するのに役立ちますが、<h1>から<h6>までをすべて使用する必要はありません。文書やセクションの内容に応じて適切な見出しレベルを選び、過度な階層を避けることが重要です。
見出しタグを適切に使うことで、ページの情報が整理され、ユーザーにとっても、また検索エンジンにとってもわかりやすくなります。

  • <h1>は最も重要な見出しで各ページやセクションのタイトルに使用します。
    <h1>タグはHTML4xまではページ内に1つとされていましたが、HTML5で<header> <main> <footer> <section> <article> <nav> <aside>などのセクショニング要素が導入された事により、ページを意味的に分割し論理的な構造を作成できるようになり、各セクションが独立したコンテンツブロックとして扱われるため、<h1>タグを各セクション内に使用することが推奨されています。
  • <h2>は主要なセクションやトピックの見出しに使用します。<h1>タグの下に位置するメインセクションや主要なトピックを示します。ページの大きなセクションやテーマを分けるために使用します。
  • <h3>はサブセクションの見出しとして使用します。<h2>で定義されたトピックの下に位置するサブトピックに使用します。
  • <h4>～<h6>は更に細かい見出しとして使用します。

暗黙的アウトラインの構造

暗黙的アウトラインは、以下のような階層構造を持ちます

  • <h1> ページ全体の最重要な見出し
    • <h2>：<h1>に関連する主要なセクションやトピック。
      • <h3>：<h2>に関連するサブセクション。
        • <h4>：<h3>に関連するさらに細かい内容。
          • <h5>：<h4>の細かい詳細。
            • <h6>：<h5>のさらに細かい内容。

明示的アウトライン概要

セクショニング要素（<section>, <article>, <nav>, <aside>など）と見出しタグ（<h1>から<h6>）を使って文書の階層を明確に定義するものです。HTML5では、これらの要素を使うことでブラウザが自動的にアウトラインを生成します。

セクショニング要素

アウトラインに影響しないセクショニング要素

<hgroup>：1 つの<h1>から<h6>要素と、1 つ以上の<p>要素をグループ化します。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/hgroup

明示的アウトラインの構造

  • <header> ドキュメントのヘッダー
    • <h1> ページのメインタイトルやコーポレートロゴなど
    • <nav> ナビゲーションメニュー
      • <ul>
        • <li> リンク1
        • <li> リンク2
        • <li> リンク3
  • <main> 主なコンテンツ
    • <h1> メインタイトルなど
    • <section> コンテンツのセクション
      • <h2> セクションの見出し
      • <div> または <p> セクションの内容
    • <section> コンテンツのセクション
      • <h2> セクションの見出し
      • <div> または <p> セクションの内容
    • <article> 記事
      • <header>
        • <h1> 記事のタイトル
      • <section> 記事のセクション1
        • <h2> セクション1の見出し
        • <div> または <p> セクション1の内容
      • <section> 記事のセクション2
        • <h2> セクション2の見出し
        • <div> または <p> セクション2の内容
    • <aside> サイドコンテンツ（サブメニューや広告）
      • <h2> サイドコンテンツの見出し
      • <div> または <p> サイドコンテンツの内容
  • <footer> ドキュメントのフッター
    • <p> 著作権情報
    • <nav> フッターメニュー
      • <ul>
        • <li> リンク1
        • <li> リンク2
        • <li> リンク3
コーディングが終了したら

HTML 5 Outliner でアウトラインのチェックを行ってみてください。

PAGE TOP