第12章
HTMLチートシート — よく使うタグ・属性・使い分け一覧
約5分
この章は、HTMLタグや属性を素早く確認するためのチートシートです。暗記用の一覧ではなく、「どの場面で使うか」「何と一緒に使うか」「避けたい使い方」を確認するために使ってください。
基本文書構造
| タグ・宣言 | 用途 | 一緒に使うもの | 避けたい使い方 |
|---|---|---|---|
<!doctype html> | HTML文書宣言 | ファイル先頭 | 省略 |
html | 文書全体 | lang | lang なし |
head | メタ情報 | title, meta, link | 表示本文を入れる |
body | 表示本文 | 見出し、本文、画像など | head 用の情報を入れる |
テキスト
| タグ | 用途 | 使ってよい場面 | 避けたい使い方 |
|---|---|---|---|
h1〜h6 | 見出し | ページ構造を作る | 文字サイズ目的 |
p | 段落 | 本文のまとまり | 見出しやリスト代わり |
br | 意味のある改行 | 住所、詩など | 余白調整 |
strong | 重要な強調 | 注意・重要事項 | 太字目的 |
em | 強勢 | 読み方のニュアンス | 重要警告の代用 |
small | 注釈・細則 | コピーライト、補足 | 本文の縮小 |
code | コード片 | HTMLタグ名やコマンド | 長いコード全体 |
リンク・画像
| タグ | 用途 | 主要属性 | 注意点 |
|---|---|---|---|
a | リンク | href, target, rel | リンクテキストを具体的にする |
img | 画像 | src, alt, width, height | 意味のある画像には alt |
figure | 図版のまとまり | なし | 単なる装飾には不要 |
figcaption | 図版の説明 | なし | figure 内で使う |
<a href="/quiz/html-basic">HTMLクイズを見る</a>
<img src="/images/html.png" alt="HTMLのロゴ" width="320" height="180">html
リスト・表
| タグ | 用途 | 判断基準 |
|---|---|---|
ul | 順序なしリスト | 並び順に意味がない |
ol | 順序ありリスト | 手順やランキング |
li | リスト項目 | ul / ol の子 |
dl | 説明リスト | 用語と説明 |
table | 表 | 行と列の関係がある |
th | 見出しセル | scope を付けると明確 |
td | データセル | 実データ |
フォーム
| タグ・属性 | 用途 | 注意点 |
|---|---|---|
form | フォーム全体 | action, method を確認 |
label | 入力欄の説明 | for と id を対応 |
input | 入力欄 | type, name を指定 |
textarea | 複数行入力 | 閉じタグが必要 |
select | 選択リスト | option と使う |
button | ボタン | type を明示 |
required | 必須入力 | サーバー側検証も必要 |
セマンティック要素
| タグ | 用途 | 覚え方 |
|---|---|---|
header | 導入・ヘッダー領域 | ロゴ、見出し、ナビ |
footer | 末尾情報 | コピーライト、関連リンク |
main | 主要コンテンツ | 1ページの中心 |
nav | 主要ナビゲーション | メニュー |
section | 見出し付きの区切り | 章・節 |
article | 独立した内容 | 記事、投稿 |
aside | 補足情報 | 関連リンク、サイドバー |
div | 意味なしコンテナ | 最後の選択肢 |
グローバル属性
| 属性 | 用途 | 注意点 |
|---|---|---|
id | 一意な識別子 | 同じページで重複させない |
class | 分類・スタイル指定 | 複数要素に使える |
lang | 言語指定 | html に必須級 |
title | 補足情報 | 重要情報をtitleだけにしない |
hidden | 非表示 | 必要な情報を隠さない |
data-* | 独自データ | JS連携で使う |
aria-label | アクセシブルネーム補助 | 正しいHTMLの代用にしない |
関連クイズタグの見方
このアプリのHTMLクイズでは、次のようなテーマで復習すると効果的です。
| テーマ | この章で見る場所 |
|---|---|
| HTML要素・属性 | 全体 |
| セマンティックHTML | セマンティック要素 |
| フォーム | フォーム |
| アクセシビリティ | alt, label, button, aria-label |
| SEO・meta | 基本文書構造、head |
参考リンク
次章では、HTMLをCSSとJavaScriptへつなげる方法を整理します。
HTMLクイズに挑戦するタグ・属性の使い分けをチートシートで復習してからクイズで確認しよう