セマンティックHTMLと内部リンク

内容に合うHTML要素を選ぶと、文書構造がユーザー支援技術や検索エンジンへ伝わりやすくなります。

このLessonのゴール

• 内容に合うセマンティックHTML要素を選べる
• 見出しを見た目ではなく文書の階層に沿って配置できる
• リンク先の内容が分かるリンクテキストへ改善できる

<main>
  <article>
    <h1>HTMLの基本</h1>
    <section>
      <h2>基本構造</h2>
      <p>HTML文書の骨組みを解説します。</p>
    </section>
  </article>
</main>

リンクテキストには「こちら」だけでなく、リンク先の内容が分かる言葉を使います。

<a href="/courses/html">HTML基礎コースを見る</a>

見出しは見た目ではなく階層で選び、CSSでサイズを調整します。

実際に試してみよう

既存ページの見出し階層とリンクテキストを確認し、ページ単体で意味が伝わるよう修正してください。