HTML要素辞書 by Sentaro

<h1>

見出しレベル 1（Heading Level 1）要素。文書の主要な見出しを作成します。

info

概要

<h1> 要素は、HTML文書（または <section>, <article> などのセクショニングルート）の最も重要で主要な見出しを表します。原則として、**ページ全体で1つだけ使用**し、文書のアウトライン構造の頂点に位置づけられるべき要素です。

play_circle

HTML (Source)

<h1>HTML <h1> 要素の完全解説</h1> <h2>このセクションの概要</h2> <p>h1要素の基本的な使い方を説明します。</p>

Preview (Result)

h1要素の基本的な使い方を説明します。

list

属性名	説明
hidden	グローバル属性。要素がまだ、またはもはや関連性がないことを示し、非表示にします。（全てのHTML要素で使用可能）
class	グローバル属性。要素にクラス名を指定し、CSSやJavaScriptのターゲットとします。（全てのHTML要素で使用可能）
id	グローバル属性。要素の固有の識別子を指定し、ページ内リンクのターゲットなどに使用します。（全てのHTML要素で使用可能）
title	グローバル属性。要素に関する補足情報を示し、ツールチップとして表示されることがあります。（全てのHTML要素で使用可能）

code

1. 基本的な文書構造

<body>
 <header>
  <h1>私のブログへようこそ</h1>
 </header>
 <main>
  <article>
   <h2>最新記事のタイトル</h2>
   <p>記事の概要...</p>
  </article>
 </main>
</body>

2. ページタイトルとしての利用（推奨）

<!-- 記事やページの内容を最も適切に表す見出しとして利用 -->
<h1>2025年最新Web開発トレンド</h1>

<h2>1. JavaScriptフレームワークの進化</h2>
<h3>React, Vue, Svelteの比較</h3>

3. ロゴとテキストの組み合わせ（非推奨・ロゴは画像）

<!-- h1内にはテキスト（タイトル）を入れるべきです -->
<h1>
 <img src="/images/logo.svg" alt="会社名ロゴ">
 会社名
</h1>

lightbulb

SEO（検索エンジン最適化）上の重要性
<h1> は、検索エンジンがページの主要なテーマを理解するために最も重要視する要素の一つです。ページの内容を簡潔かつ正確に表すキーワードを含めるようにしましょう。

accessibility_new

アクセシビリティ
スクリーンリーダーなどの支援技術は、見出し（h1〜h6）を利用してページ構造をナビゲートします。見出しレベルを飛ばさず（例: h1の次にh3を使わない）、論理的な階層構造を保つことが、アクセシビリティを確保する上で非常に重要です。