HTMLのテキスト要素 — 見出し・段落・強調を正しく使う - HTML入門 — Webページの構造とタグのチートシート

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

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

html

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

HTMLタグは「どう見せたいか」ではなく「何を意味するか」で選びます。

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

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

html

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

学習者

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

先生

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

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

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

html

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

html

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

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