HTMLの書き方｜タグの使い分けと基本ルール

HTMLとは｜このカテゴリで分かること

HTMLの書き方は、タグを覚えることよりも「この内容にはどのタグが意味として正しいか」を選べるようになることが出発点です。このカテゴリでは、セマンティックHTML、見出し構造、フォーム部品、画像、表、ダイアログといった、Webサイト制作で毎回使う要素を取り上げます。HTMLタグの一覧を暗記したい人というより、コーディングを始めたばかりで「div だらけになってしまう」「フォームの属性が多すぎて混乱する」と感じている人、実務で既存コードを直す機会が増えたコーダーを想定しています。

HTMLは、文書の構造と意味を表す言語です。見た目はCSSの担当ですが、見出しやリスト、フォームの部品を正しく選んでおくと、検索エンジンやスクリーンリーダーなど、人間の目以外でページを読む仕組みにも内容が伝わります。仕様は WHATWG が Living Standard として継続的に更新しているため、細かな要素の扱いは時間とともに変わりうる点も頭に入れておいてください。

読む順番（おすすめの順路）

初めての人は、まずページ全体の骨組み、次に部品、最後に応用要素という順に読むと、つながりが理解しやすくなります。

1. セマンティックHTMLとは｜header・main・article の使い分け … header・main・article など、ページの骨組みの考え方を最初に押さえます。
2. HTMLの見出し構造（h1〜h6）｜正しい階層とやってはいけない書き方 … 骨組みの中で見出しをどう階層化するか。SEOとアクセシビリティの両方に効きます。
3. HTMLフォームの基本｜label・name・required・autocomplete の書き方 … 実務で最も事故が起きやすいフォームの基本を、label と name から確認します。
4. input type の種類一覧｜email・tel・number・date の使い分け … 入力欄の種類を使い分けると、スマホのキーボードも変わります。
5. HTMLのtableの書き方｜caption・thead・th scope とアクセシビリティ … 表の構造とアクセシビリティ。デザイン目的で使わない理由も分かります。
6. picture と srcset の使い方｜sizes・レスポンシブ画像の書き方 … 画像をデバイスに合わせて出し分ける方法です。
7. meta viewport とは｜width=device-width と user-scalable の注意点 … レスポンシブ対応の前提になる head の設定です。
8. target="_blank" と rel の使い方｜noopener・noreferrer・nofollow … 別タブで開くリンクの安全面の注意点です。
9. details と summary の使い方｜JS不要のアコーディオンとFAQ … JavaScriptなしで開閉UIを作る方法です。
10. HTMLのdialog要素の使い方｜showModal・returnValue・::backdrop … モーダルを標準要素で作る応用編です。仕上げに読みます。

押さえておきたいポイント（リサーチ）

公式ドキュメントで確認できる、このカテゴリの前提を整理します。最新の対応状況は各公式ページで確認してください。

• HTMLの仕様は WHATWG の HTML Living Standard が継続的に更新している「生きた標準」です。
• レスポンシブ画像には2つの課題があります。画面サイズや解像度に応じて適切な画像を出す「解像度切り替え」と、画面ごとにトリミングの違う画像を出す「アートディレクション」です（MDN）。
• 前者は img 要素の srcset と sizes、後者は picture 要素の source で扱います。picture の中には、フォールバックとして img 要素が必須です（MDN）。
• 画像のダウンロードは CSS や JavaScript が読み込まれる前に始まるため、画像の出し分けは HTML 側の属性で行うのが基本とされています（MDN）。
• dialog 要素は、showModal() でモーダルとして開くと背後のコンテンツが操作できなくなり、背景は ::backdrop 疑似要素でスタイルできます。form の method に dialog を指定すると、送信でダイアログを閉じられ、押したボタンの値が returnValue に入ります（MDN）。

よくある疑問

Q. HTMLの書き方は何から勉強すればよいですか。
A. まず セマンティックHTMLとは｜header・main・article の使い分け で骨組みの考え方を押さえ、HTMLの見出し構造（h1〜h6）｜正しい階層とやってはいけない書き方 で見出しの階層を理解すると、残りの要素も迷いにくくなります。

Q. div と section や article はどう違いますか。
A. div は意味を持たない汎用の箱、section や article は内容のまとまりに意味を与える要素です。判断の基準は セマンティックHTMLとは｜header・main・article の使い分け で整理しています。

Q. フォームで最低限つけるべき属性は何ですか。
A. label と入力欄の対応、name、必要に応じて required や autocomplete です。詳しくは HTMLフォームの基本｜label・name・required・autocomplete の書き方 を参照してください。

Q. 別タブで開くリンクに注意が必要なのはなぜですか。
A. リンク先ページが window.opener 経由で元ページを操作できる問題が知られているためです。MDN によると、現在のブラウザでは target=”_blank” で暗黙に noopener と同様の動作になりますが、Referer の扱いなど rel の指定が関わる点は残ります。対応状況は公式で確認し、具体的な書き方は target="_blank" と rel の使い方｜noopener・noreferrer・nofollow にまとめています。