HTML

2026.05.03

公式ドキュメント
HTML

概要

HTML（HyperText Markup Language）は、Web ページの構造を記述するマークアップ言語です。本チートシートでは HTML5 仕様に基づき、実務で頻繁に使用するタグ・属性・アクセシビリティのベストプラクティスをまとめます。MDN を第一次ソースとして最新仕様を反映しています。

最初に覚える最小セット

HTML では、まず <!DOCTYPE html>、html lang、meta charset、meta viewport、見出し階層、label と input の関連付け、画像の alt を押さえます。

HTML は見た目を作る言語ではなく、文書構造と意味をブラウザ・検索エンジン・支援技術に伝える言語です。装飾は CSS に任せ、タグは意味で選びます。

文書の基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ページタイトル</title>
</head>
<body>
 <!-- コンテンツ -->
</body>
</html>
要素説明
<!DOCTYPE html>HTML5 文書宣言
<html lang="ja">ルート要素、言語属性を必ず指定
<head>メタ情報やリンク先を記述
<body>表示されるコンテンツ本体

ポイント: lang属性は検索エンジンやスクリーンリーダーが言語を判別するために必須です。日本語ならlang="ja"、英語ならlang="en"を指定します。

メタ情報

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="description" content="ページの概要説明">
 <meta name="robots" content="index, follow">
 <link rel="canonical" href="https://example.com/page">
 
 <!-- OGP (Open Graph Protocol) -->
 <meta property="og:title" content="シェア時のタイトル">
 <meta property="og:description" content="シェア時の説明文">
 <meta property="og:image" content="https://example.com/og-image.jpg">
 <meta property="og:url" content="https://example.com/page">
 <meta property="og:type" content="website">
 
 <!-- Twitter Card -->
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:site" content="@username">
</head>
属性説明
charset="UTF-8"文字エンコーディング（必須）
name="viewport"レスポンシブ対応の基本設定
name="description"検索結果に表示される説明文
name="robots"検索エンジンへの指示
property="og:*"SNS シェア時の表示制御

注意: meta charsetは必ずhead内の最初の方に配置します。途中に置くと文字化けの原因になります。

テキスト要素

タグ説明例
<h1>〜<h6>見出し（h1 は 1 ページに 1 つ）<h1>メインタイトル</h1>
<p>段落<p>本文テキスト。</p>
<strong>重要（太字）<strong>重要</strong>
<em>強調（斜体）<em>強調</em>
<small>注釈・免責事項<small>※注意事項</small>
<code>インラインコード<code>const x = 1;</code>
<pre>整形済みテキスト<pre>改行も 空白も保持</pre>
<blockquote>引用ブロック<blockquote cite="url">...</blockquote>
<br>改行行1<br>行2
<hr>水平線（テーマ区切り）<hr>
<h1>記事タイトル</h1>
<p>これは<strong>重要な</strong>情報です。詳細は<code>config.json</code>を参照してください。</p>
<blockquote cite="https://developer.mozilla.org">
 <p>MDN は Web 開発者のための公式リソースです。</p>
</blockquote>

リスト

タグ説明
<ul>順序なしリスト
<ol>順序付きリスト
<li>リスト項目
<dl>定義リスト
<dt>定義語
<dd>定義説明
<!-- 順序なしリスト -->
<ul>
 <li>項目1</li>
 <li>項目2</li>
</ul>

<!-- 順序付きリスト -->
<ol start="3" type="A">
 <li>A項目</li>
 <li>B項目</li>
</ol>

<!-- 定義リスト -->
<dl>
 <dt>HTML</dt>
 <dd>HyperText Markup Language の略</dd>
 <dt>CSS</dt>
 <dd>Cascading Style Sheets の略</dd>
</dl>

実践メモ: olのtype属性で番号形式を変更可能（1/a/A/i/I）。start属性で開始番号を指定できます。

リンクと画像

リンク

属性説明
hrefリンク先 URL
target="_blank"新しいタブで開く
rel="noopener"セキュリティ対策（target=“_blank” 時に必須）
rel="nofollow"SEO: リンク先を推奨しない
downloadリンク先をダウンロード
<a href="/about">会社概要</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部サイト</a>
<a href="/files/report.pdf" download>レポートをダウンロード</a>
<a href="mailto:info@example.com">お問い合わせ</a>
<a href="tel:+81-3-1234-5678">電話する</a>

画像

属性説明
src画像の URL
alt代替テキスト（必須）
loading="lazy"遅延読み込み
srcsetレスポンシブ画像
width / heightサイズ（レイアウトシフト防止）
<img src="/images/logo.png" alt="会社ロゴ" width="200" height="80">
<img src="/images/hero.jpg" alt="メインビジュアル" loading="lazy">
<img 
 srcset="/images/small.jpg 480w, /images/large.jpg 1200w"
 sizes="(max-width: 600px) 480px, 1200px"
 src="/images/large.jpg" 
 alt="レスポンシブ画像">

注意: imgのalt属性は必須です。装飾画像の場合はalt=""と空文字を指定してスクリーンリーダーに読み飛ばしを指示します。

テーブル

タグ説明
<table>テーブル本体
<thead>ヘッダー行グループ
<tbody>ボディ行グループ
<tfoot>フッター行グループ
<tr>行
<th>見出しセル
<td>データセル
<table>
 <thead>
 <tr>
 <th>商品名</th>
 <th>価格</th>
 <th>在庫</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>商品A</td>
 <td>¥1,200</td>
 <td>20</td>
 </tr>
 <tr>
 <td colspan="2">合計</td>
 <td>¥1,200</td>
 </tr>
 </tbody>
</table>
属性説明
colspan="2"列を横に結合
rowspan="3"行を縦に結合
scope="col"列の見出し（アクセシビリティ）
scope="row"行の見出し

フォーム

<form action="/submit" method="POST">
 <fieldset>
 <legend>ユーザー登録</legend>
 
 <label for="username">ユーザー名</label>
 <input type="text" id="username" name="username" required>
 
 <label for="email">メールアドレス</label>
 <input type="email" id="email" name="email" required>
 
 <label for="age">年齢</label>
 <input type="number" id="age" name="age" min="18" max="100">
 
 <label for="bio">自己紹介</label>
 <textarea id="bio" name="bio" rows="4"></textarea>
 
 <button type="submit">送信</button>
 </fieldset>
</form>

input 要素の主要 type

type説明例
textテキスト入力<input type="text" name="name">
emailメールアドレス<input type="email" required>
passwordパスワード<input type="password" minlength="8">
number数値<input type="number" min="0" max="100">
date日付<input type="date">
time時刻<input type="time">
tel電話番号<input type="tel" pattern="[0-9-]+">
urlURL<input type="url">
checkboxチェックボックス<input type="checkbox" checked>
radioラジオボタン<input type="radio" name="group">
fileファイル選択<input type="file" accept="image/*">
rangeスライダー<input type="range" min="0" max="100">
colorカラーピッカー<input type="color">
search検索<input type="search">
hidden非表示フィールド<input type="hidden" value="token">

ポイント: type="email"やtype="url"を使うと、ブラウザが自動で形式検証してくれます。モバイルでは適切なキーボードも表示されます。

フォームの主要属性

属性説明
required必須項目
pattern="正規表現"入力形式の検証
minlength / maxlength文字数制限
min / max数値・日付の範囲
step数値の刻み幅
placeholder入力例の表示
autocomplete自動補完の制御
readonly読み取り専用
disabled無効化
multiple複数選択可能（file/select）
acceptファイル形式の制限
<!-- バリデーション例 -->
<input type="text" pattern="[A-Za-z0-9]+" placeholder="半角英数のみ" required>
<input type="email" autocomplete="email" placeholder="user@example.com">
<input type="password" minlength="8" required>
<input type="file" accept="image/png, image/jpeg" multiple>

select と textarea

<label for="country">国</label>
<select id="country" name="country">
 <option value="">選択してください</option>
 <option value="jp">日本</option>
 <option value="us">アメリカ</option>
 <option value="uk">イギリス</option>
</select>

<label for="message">メッセージ</label>
<textarea id="message" name="message" rows="5" maxlength="500"></textarea>

注意: labelのfor属性とinputのidを一致させることで、ラベルクリックで入力欄にフォーカスできます。アクセシビリティのため必須です。

セマンティック要素

タグ説明用途
<header>ヘッダー領域ロゴ・ナビゲーション
<nav>ナビゲーションメインメニュー
<main>メインコンテンツ（1 ページに 1 つ）本文領域
<article>独立したコンテンツブログ記事・ニュース
<section>セクション区切りテーマ毎のまとまり
<aside>補足情報サイドバー・広告
<footer>フッター領域著作権・SNS リンク
<figure>図表の容器画像・グラフ・コード例
<figcaption>図表のキャプションfigure 内の説明文
<body>
 <header>
 <h1>サイトタイトル</h1>
 <nav>
 <ul>
 <li><a href="/">ホーム</a></li>
 <li><a href="/about">概要</a></li>
 </ul>
 </nav>
 </header>
 
 <main>
 <article>
 <h2>記事タイトル</h2>
 <p>本文...</p>
 <figure>
 <img src="/chart.png" alt="売上グラフ">
 <figcaption>2026年度 売上推移</figcaption>
 </figure>
 </article>
 
 <aside>
 <h3>関連記事</h3>
 <ul>...</ul>
 </aside>
 </main>
 
 <footer>
 <p>&copy; 2026 Company Name</p>
 </footer>
</body>

実践メモ: セマンティック HTML は検索エンジンやスクリーンリーダーが文書構造を理解しやすくします。divの代わりに適切なタグを選びましょう。

メディア

動画

<video controls width="640" height="360" poster="/thumbnail.jpg">
 <source src="/video.mp4" type="video/mp4">
 <source src="/video.webm" type="video/webm">
 お使いのブラウザは video タグに対応していません。
</video>

音声

<audio controls>
 <source src="/audio.mp3" type="audio/mpeg">
 <source src="/audio.ogg" type="audio/ogg">
 お使いのブラウザは audio タグに対応していません。
</audio>
属性説明
controls再生コントロールを表示
autoplay自動再生（非推奨、モバイルで動作しない場合あり）
mutedミュート状態で開始
loop繰り返し再生
preload="auto"事前読み込み（auto/metadata/none）
poster動画のサムネイル画像

レスポンシブ画像（picture）

<picture>
 <source media="(max-width: 600px)" srcset="/mobile.jpg">
 <source media="(max-width: 1200px)" srcset="/tablet.jpg">
 <img src="/desktop.jpg" alt="レスポンシブ対応画像">
</picture>

注意: autoplayは多くのブラウザでmuted と併用しないと動作しません。ユーザー体験を考慮して必要な場合のみ使用しましょう。

埋め込み

<!-- iframe -->
<iframe 
 src="https://example.com" 
 width="600" 
 height="400" 
 title="埋め込みページ"
 loading="lazy">
</iframe>

<!-- canvas（JavaScript で描画） -->
<canvas id="myCanvas" width="400" height="300"></canvas>

<!-- SVG -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
 <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

グローバル属性

すべての HTML 要素に指定できる属性。

属性説明例
id一意な識別子<div id="main">
classCSS クラス（複数可）<p class="text bold">
styleインライン CSS<span style="color: red;">
data-*カスタムデータ属性<div data-user-id="123">
aria-*アクセシビリティ属性<button aria-label="閉じる">
lang言語指定<span lang="en">Hello
dir文字方向（ltr/rtl）<p dir="rtl">
hidden非表示<div hidden>
contenteditable編集可能<div contenteditable="true">
tabindexタブ順序<div tabindex="0">
titleツールチップ<abbr title="略語の正式名">
<div 
 id="user-card" 
 class="card featured" 
 data-user-id="42" 
 data-role="admin"
 aria-label="ユーザー情報カード">
 ...
</div>

ポイント: data-*属性で独自データを保持し、JavaScript からelement.dataset.userIdでアクセスできます。HTML を汚さずデータを埋め込む定番手法です。

アクセシビリティ要点

項目説明
見出しの階層h1 → h2 → h3 の順に使う（飛ばさない）
alt 属性すべての画像に適切な代替テキスト
label と inputfor と id で関連付ける
aria-labelボタンやアイコンに説明を追加
role 属性セマンティックタグが使えない時に補完
tabindexキーボード操作順序を制御
コントラスト文字と背景の色コントラスト比 4.5:1 以上
<!-- 良い例 -->
<button aria-label="メニューを開く">
 <i class="icon-menu"></i>
</button>

<label for="search">検索</label>
<input type="search" id="search" name="q" aria-label="サイト内検索">

<!-- 見出し階層 -->
<h1>ページタイトル</h1>
<section>
 <h2>セクション1</h2>
 <h3>サブセクション1-1</h3>
</section>
<section>
 <h2>セクション2</h2>
</section>

注意: 見出しレベルを飛ばす（h1 → h3）のは NG。スクリーンリーダーが文書構造を正しく読み上げられません。

OGP / SEO メタタグ最小セット

メタタグ説明必須
<title>ページタイトル○
meta name="description"検索結果の説明文（120〜160文字）○
meta property="og:title"SNS シェア時のタイトル○
meta property="og:description"SNS シェア時の説明文○
meta property="og:image"SNS シェア時の画像（1200×630px 推奨）○
meta property="og:url"正規 URL○
meta property="og:type"コンテンツタイプ（website/article）-
meta name="twitter:card"Twitter カード種別-
link rel="canonical"重複ページの正規 URL 指定△
<head>
 <title>記事タイトル | サイト名</title>
 <meta name="description" content="記事の概要を120〜160文字で簡潔に記述します。">
 
 <meta property="og:title" content="記事タイトル">
 <meta property="og:description" content="SNSでシェアされた際の説明文">
 <meta property="og:image" content="https://example.com/images/og-image.jpg">
 <meta property="og:url" content="https://example.com/articles/example">
 <meta property="og:type" content="article">
 
 <meta name="twitter:card" content="summary_large_image">
 <link rel="canonical" href="https://example.com/articles/example">
</head>

実践メモ: OGP 画像は1200×630pxが推奨サイズ。Facebook・Twitter 双方で最適に表示されます。画像内にテキストを含める場合は中央に配置しましょう。

Tips

  • <!DOCTYPE html> は必ず文書の先頭に配置（標準モードで描画）。
  • <meta charset="UTF-8"> は <head> 内の最初の方に置く。
  • 見出しタグは装飾目的で使わず、文書構造を表すために使う。
  • target="_blank" には必ず rel="noopener noreferrer" を併記（セキュリティ対策）。
  • フォームの送信ボタンは <button type="submit"> が推奨（<input type="submit"> より柔軟）。
  • <main> タグは 1 ページに 1 つだけ。ページのメインコンテンツを明示。
  • テーブルは必ず <thead> / <tbody> で構造化する。
  • input の name 属性はサーバー送信時に必要、id は label との関連付けに使用。
  • SVG はインライン埋め込みで CSS/JS から操作可能。
  • loading="lazy" で画像・iframe の遅延読み込みが簡単に実装できる（パフォーマンス向上）。

まとめ

HTML では、タグの種類を暗記するより、文書構造・フォーム・アクセシビリティ・メタ情報を正しく置くことが重要です。lang、alt、label、rel="noopener noreferrer"、width / height などは、見た目に出にくくても品質と安全性に直結します。

新しい要素や属性を使うときは、MDN と WHATWG 仕様で用途とブラウザ対応を確認してください。

参考リソース

関連記事

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR