HTMLのテキスト要素 — 見出し・段落・強調を正しく使う

Webページの多くは文章でできています。HTMLでは、文字の大きさや太さではなく、その文章が何の役割を持つかでタグを選びます。

<article>
  <h1>HTMLの基本</h1>
  <p>HTMLはWebページの構造を作る言語です。</p>
  <p><strong>見た目ではなく意味でタグを選ぶ</strong>ことが大切です。</p>
</article>

テキスト要素のチートシート

見出しの階層

見出しはページのアウトラインを作ります。

<h1>サービス紹介</h1>
 
<h2>特徴</h2>
<h3>高速に動く</h3>
<h3>スマートフォンに対応</h3>
 
<h2>料金</h2>

h1 の次にいきなり h4 を使うと、構造が読み取りづらくなります。見た目を小さくしたい場合は、見出しレベルを下げるのではなくCSSで調整します。

学習者

文字を大きくしたいから h1 を何回も使う、というのはダメですか？

先生

見た目のために見出しを選ぶと、ページ構造が崩れます。大きさはCSS、意味はHTMLで分けて考えましょう。

改行と段落

文章のまとまりは p、住所や詩のように意味のある改行は br を使います。

<p>HTMLは構造を作ります。</p>
<p>CSSは見た目を整えます。</p>

<p>
  〒100-0001<br>
  東京都千代田区千代田1-1
</p>

br を連続して余白を作るのは避けます。余白はCSSの margin で調整します。

HTMLで特殊な文字を表示する — 文字参照

HTMLでは、< や & などの一部の文字がタグや文字参照の開始記号として使われます。これらを文字そのものとして確実に表示したいときは、**文字参照（character reference）**を使います。一般に「HTMLエンティティ」と呼ばれることもあります。

文字参照は & で始まり、基本的に ; で終わります。

たとえば、HTMLタグを説明文の一部として表示する場合は、< と > を文字参照で記述します。

<p>段落には &lt;p&gt; タグを使います。</p>
<p>パン &amp; コーヒー</p>

ブラウザでは次のように表示されます。

段落には <p> タグを使います。
パン & コーヒー

名前付き文字参照と数値文字参照

< や © のように名前を使う方法を名前付き文字参照と呼びます。同じ文字をUnicodeのコードポイントに対応する数値で表すこともできます。

<p>&copy; 2026</p>  <!-- 名前付き文字参照 -->
<p>&#169; 2026</p>  <!-- 10進文字参照 -->
<p>&#xA9; 2026</p> <!-- 16進文字参照 -->
 
<p>&#28450;&#23383;</p>    <!-- 10進数で「漢字」 -->
<p>&#x6F22;&#x5B57;</p> <!-- 16進数で「漢字」 -->

最初の3行はどれも © 2026、後ろの2行はどちらも 漢字 と表示されます。このように、数値文字参照では漢字を含むUnicode文字をコードポイントで表せます。

HTMLで予約されている文字には、意味を読み取りやすい名前付き文字参照を使うのが一般的です。日本語や © などをUTF-8でそのまま書ける場合は、無理に文字参照へ変換する必要はありません。

よくあるミス

参考リンク

• MDN: 見出し要素
• MDN: p 要素
• MDN: strong 要素
• MDN: Character reference（文字参照）

次章では、ページ同士をつなぐリンクとナビゲーションを学びます。