Web Accessibility Academy · レッスン

header、nav、main、footer：4つの主要要素

ユーザーが想定するランドマークでページを構成します。

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

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

A Map for Your Page

Sighted users scan a page in a glance. Screen reader users need a map, and HTML5 landmark elements draw it for them.

Meet the Big Four

Four elements cover most pages: header, nav, main, and footer. Together they split your layout into regions users can jump between. 🗺️

header: The Top Banner

A page-level header holds your site name, logo, and intro content. Screen readers expose it as the banner region.

<header>
  <h1>CoddyKit</h1>
</header>

nav: Where Links Live

Wrap your primary set of links in nav. It tells assistive tech this block is navigation, so users can find or skip it fast.

<nav>
  <a href="/">Home</a>
  <a href="/docs">Docs</a>
</nav>

main: The Real Content

The main element wraps the unique content of the page. It is the destination users care about most.

<main>
  <h1>Article title</h1>
  <p>Body...</p>
</main>

footer: The Bottom Region

A page-level footer holds copyright, legal links, and contact info. Screen readers announce it as the contentinfo region.

<footer>
  <p>&copy; 2026 CoddyKit</p>
</footer>

Implicit Roles for Free

These tags carry built-in ARIA roles, so header becomes banner and nav becomes navigation with zero extra attributes.

Context Changes the Role

A header inside an article is just a section header, not the page banner. Only a top-level header counts as the banner landmark.

Why div Cannot Do This

A div has no role, so a screen reader sees nothing to jump to. Landmark tags turn invisible structure into real navigation.

<div class="nav">...</div>

A Whole Page Mapped

Stack the four together and a screen reader user instantly hears the shape of your page before reading a word. 🎯

<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

Free Skip-Ahead Power

With landmarks in place, users can jump past the header straight to main, skipping repeated links on every page.

Quick Check

Which landmark wraps the unique, primary content of a page?

Recap: The Big Four

You learned that header, nav, main, and footer give screen reader users a map. Native tags mean free landmark roles. 🙌

よくある質問

「header、nav、main、footer：4つの主要要素」レッスンは無料ですか？

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

「header、nav、main、footer：4つの主要要素」で何を学びますか？

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

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

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

「header、nav、main、footer：4つの主要要素」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Web Accessibility Academyに戻る