HTML文字参照（エンティティ）チートシート

この章は、HTML文字参照（一般に「HTMLエンティティ」と呼ばれるもの）と、タグや属性を素早く確認するためのチートシートです。暗記用の一覧ではなく、「どの場面で使うか」「何と一緒に使うか」「避けたい使い方」を確認するために使ってください。

基本文書構造

タグ・宣言	用途	一緒に使うもの	避けたい使い方
`<!doctype html>`	HTML文書宣言	ファイル先頭	省略
`html`	文書全体	`lang`	`lang` なし
`head`	メタ情報	`title`, `meta`, `link`	表示本文を入れる
`body`	表示本文	見出し、本文、画像など	`head` 用の情報を入れる

タグ	用途	使ってよい場面	避けたい使い方
`h1`〜`h6`	見出し	ページ構造を作る	文字サイズ目的
`p`	段落	本文のまとまり	見出しやリスト代わり
`br`	意味のある改行	住所、詩など	余白調整
`strong`	重要な強調	注意・重要事項	太字目的
`em`	強勢	読み方のニュアンス	重要警告の代用
`small`	注釈・細則	コピーライト、補足	本文の縮小
`code`	コード片	HTMLタグ名やコマンド	長いコード全体

HTMLで特別な意味を持つ文字をそのまま表示したい場合は、文字参照を使います。

表示・意味	名前付き文字参照	数値文字参照	主な用途
`<`	`<`	`<`	タグ開始記号を文字として表示
`>`	`>`	`>`	タグ終了記号を文字として表示
`&`	`&`	`&`	文字参照の開始記号と区別
`"`	`"`	`"`	属性値などで引用符を表示
`'`	`'`	`'`	アポストロフィを表示
改行しない空白	` `	` `	単語間での意図しない改行を防ぐ
`©`	`©`	`©`	著作権表示
`®`	`®`	`®`	登録商標
`™`	`™`	`™`	商標

詳しい使い方は「HTMLのテキスト要素」で確認できます。

<a href="/quiz/html-basic">HTMLクイズを見る</a>
<img src="/images/html.png" alt="HTMLのロゴ" width="320" height="180">

html

迷ったら「このタグ名で、内容の意味が説明できるか」を判断基準にします。

次章では、HTMLをCSSとJavaScriptへつなげる方法を整理します。