1ページにh1は1つ：主要トピックに名前を付ける
すべてのページに、明確な最上位見出しを1つだけ設定します。
「1ページにh1は1つ：主要トピックに名前を付ける」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
The Page Title You Hear
The h1 is your page's headline. Screen reader users often jump straight to it to learn what this page is actually about. 🔎
One Main Topic
A page is about one main thing, so it gets one h1. Think of it as the title on a book cover, not a chapter heading.
<h1>Your Order Summary</h1>h1 Is Not About Size
Pick h1 for meaning, never for looking big. If you want smaller text, style it with CSS and keep the heading level correct.
It Names, Not Decorates
A good h1 describes the content below it. Reading the h1 alone should tell a user roughly what they will find on this page.
Match the Tab Title
Your h1 should echo the browser tab title. When both agree, users feel confident they landed on the right page.
<title>Your Order Summary - Shop</title>
<h1>Your Order Summary</h1>Not the Logo
Your site name in the corner usually is not the page topic. The h1 belongs to this page's content, not your brand logo. 🏷️
Why One, Not Many
Several h1 tags blur the outline, so users cannot tell the real topic from a section. One clear top level keeps the page focused.
Where It Lives
Place the h1 high in your main content, before the sections it introduces. It sets the stage for everything that follows.
<main>
<h1>Annual Report 2025</h1>
<h2>Highlights</h2>
</main>Never Skip Straight to h2
Starting a page at h2 leaves the outline without a root. Give the page its single h1 first, then nest sections below it.
Keep It Honest
Write the h1 in plain words a stranger would understand. Skip clever puns that hide what the page really does.
Empty h1 Is a Trap
An h1 that wraps only an image or icon may read as nothing. Give it real text, even if you hide that text visually.
Quick Check
How many h1 elements should a typical page have?
Recap
You learned the h1 names a page's one main topic, sits high in the content, and is chosen for meaning over size. One page, one h1. ✅
よくある質問
「1ページにh1は1つ：主要トピックに名前を付ける」レッスンは無料ですか？
はい。「1ページにh1は1つ：主要トピックに名前を付ける」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「1ページにh1は1つ：主要トピックに名前を付ける」で何を学びますか？
すべてのページに、明確な最上位見出しを1つだけ設定します。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「1ページにh1は1つ：主要トピックに名前を付ける」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 1ページにh1は1つ：主要トピックに名前を付ける
- 飛ばさずに見出しレベルを入れ子にする
- 見出しは大きな文字ではなくナビゲーション
- 耳でページのアウトラインを監査する