0Pricing
HTML Academy · レッスン

header nav main footer

セマンティックなタグでページの主要なランドマークを構成します

「header nav main footer」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

HTML5のランドマーク要素

HTML5では、ページの領域を定義するランドマーク要素が導入されました。

  • <header> — 導入コンテンツまたはナビゲーション
  • <nav> — ナビゲーションリンク
  • <main> — ページ固有の主要コンテンツ
  • <footer> — フッター情報

これらを使うと、汎用的な<div>を意味のある構造に置き換えられます。

header要素

<header>要素には、導入コンテンツを含めます。

<header>
  <a href="/" class="logo">
    <img src="logo.svg" alt="Company name">
  </a>
  <nav>...</nav>
  <button>Sign In</button>
</header>
<!-- header can appear multiple times: page header, article header -->
<!-- But only one page-level header per page is recommended -->

nav要素

<nav>要素には、ナビゲーションリンクをまとめます。

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
<!-- Use aria-label to distinguish multiple navs -->
<!-- Not every group of links is a nav — only major navigation -->

複数のnav要素

1つのページに複数の<nav>要素を配置できます。それぞれにラベルを付けます。

<nav aria-label="Main navigation">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Footer links">...</nav>
<!-- aria-label tells screen reader users what each nav is for -->
<!-- Screen readers list landmarks — unique labels help navigation -->

main要素

<main>要素は、このページ固有の主要コンテンツを示します。

<main id="main-content">
  <h1>HTML5 Landmark Elements</h1>
  <p>Learn about semantic page structure...</p>
</main>
<!-- Rules:
  - Only ONE main element per page
  - Should not be a descendant of header, footer, aside, nav
  - id="main-content" enables skip links -->
<!-- Assistive tech users jump directly to main -->

footer要素

<footer>要素には、フッター情報をまとめます。

<footer>
  <p>&copy; 2025 CoddyKit. All rights reserved.</p>
  <nav aria-label="Footer navigation">
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
  </nav>
</footer>
<!-- footer can appear multiple times: page footer, article footer -->
<!-- Page footer typically has copyright, links, contact -->

ページの基本構造

セマンティックなページ構造の完全な例です。

<body>
  <header>
    <a href="/"><img src="logo.svg" alt="Site name"></a>
    <nav aria-label="Main">...</nav>
  </header>

  <main id="main-content">
    <h1>Page Title</h1>
    <p>Primary content here.</p>
  </main>

  <aside>Related content</aside>

  <footer>
    <p>&copy; 2025 Company</p>
  </footer>
</body>

ナビゲーションをスキップするリンク

キーボードユーザーがナビゲーションを飛ばせるように、スキップリンクを追加します。

<a href="#main-content" class="skip-link">Skip to main content</a>

<header>... navigation ...</header>

<main id="main-content" tabindex="-1">
  <h1>Page Heading</h1>
</main>

/* CSS: */
.skip-link {
  position: absolute; top: -100%;
  background: #0070f3; color: white; padding: 0.5rem;
}
.skip-link:focus { top: 0; }

ランドマークロール

HTML5のランドマーク要素は、ARIAのランドマークロールに対応します。

  • <header> → role="banner"（ページレベルの場合のみ）
  • <nav> → role="navigation"
  • <main> → role="main"
  • <footer> → role="contentinfo"（ページレベルの場合のみ）
  • <aside> → role="complementary"

セクション内のheaderとfooter

headerとfooterは、<article>や<section>の内側にも配置できます。

<article>
  <header>
    <h2>Article Title</h2>
    <p>By Jane Smith | March 2024</p>
  </header>
  <p>Article content...</p>
  <footer>
    <p>Tags: HTML, CSS</p>
  </footer>
</article>
<!-- In this context, header/footer are NOT banner/contentinfo roles -->
<!-- They are generic sections within the article -->

よくある間違い

次のようなセマンティックなランドマークの間違いを避けてください。

  • リンクのグループすべてに<nav>を使う
  • 1つのページに複数の<main>要素を配置する
  • <main>を<header>や<nav>の内側に配置する
  • フッター以外のコンテンツに<footer>を使う

クイックチェック

1つのページにmain要素はいくつ配置すべきですか？

振り返り：header nav main footer

ランドマーク要素の要点：

  • <header> — 導入コンテンツ。セクションごとに繰り返し使用できます
  • <nav> — 主要なナビゲーション。複数ある場合はaria-labelでラベルを付けます
  • <main> — ページ固有の主要コンテンツ。1ページに必ず1つだけ配置します
  • <footer> — フッターコンテンツ。セクションごとに繰り返し使用できます
  • id="main-content"を対象にするスキップリンクを追加します

よくある質問

「header nav main footer」レッスンは無料ですか？

はい。「header nav main footer」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「header nav main footer」で何を学びますか？

セマンティックなタグでページの主要なランドマークを構成します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「header nav main footer」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. header nav main footer
  2. article要素と自己完結型コンテンツ
  3. section要素とdivの違い
  4. time address mark
← HTML Academyに戻る