HTMLで文字を表示する｜見出し・段落・リスト・装飾タグの基本

Webページに文字を表示するには、HTMLのさまざまなタグを使います。見出し、段落、リスト、強調など、テキストの種類や役割に応じて適切なタグを選ぶことで、構造的で読みやすいページを作ることができます。

この記事では、HTMLでよく使われるテキスト関連のタグを実際のコード例とともに解説します。

見出しタグ（h1〜h6）

見出しタグは、ページの構造を定義する重要なタグです。<h1>が最も大きい見出しで、<h6>が最も小さい見出しです。

<h1>メインの見出し（h1）</h1>
<h2>セクションの見出し（h2）</h2>
<h3>サブセクションの見出し（h3）</h3>
<h4>小見出し（h4）</h4>

<h1>タグは1ページに1〜2回の使用に留めるのが推奨されます。検索エンジン（Google等）はh1タグをそのページの主題と判断するため、SEO対策の観点からも重要です。見出しの階層は飛ばさず、h1 → h2 → h3 の順に使いましょう。

段落タグ（p）

段落を表すには<p>タグを使います。HTMLでは、コード上で改行しても自動的にブラウザ上で改行されないため、段落ごとに<p>タグで囲む必要があります。

<p>これは最初の段落です。HTMLではコード上の改行は無視されます。</p>
<p>これは2つ目の段落です。pタグで囲むことで段落が分かれます。</p>
<p>途中で改行したい場合は<br>タグを使います。<br>このように改行されます。</p>

<br>タグは段落の途中で改行したい場合に使用します。ただし、レイアウト目的で<br>を連続使用するのは避け、余白はCSSのmarginやpaddingで制御するのが望ましいです。

リストタグ（ul・ol・li）

箇条書きにはリストタグを使います。順序なしリスト（<ul>）と順序ありリスト（<ol>）の2種類があります。

<!-- 順序なしリスト（・で表示） -->
<ul>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
</ul>

<!-- 順序ありリスト（番号で表示） -->
<ol>
    <li>手順1：HTMLファイルを作成する</li>
    <li>手順2：コードを書く</li>
    <li>手順3：ブラウザで確認する</li>
</ol>

<!-- ローマ数字のリスト -->
<ol type="i">
    <li>ローマ数字のリスト</li>
    <li>type属性で形式を変更できる</li>
</ol>

<li>タグは必ず<ul>または<ol>の中に入れて使用します。<ol>タグのtype属性を変更することで、番号の形式を数字（1, 2, 3）、アルファベット（a, b, c）、ローマ数字（i, ii, iii）などに変えることができます。

テキスト装飾タグ

文字を強調したり、特殊な表示にするためのタグがいくつか用意されています。

<!-- ルビ（ふりがな） -->
<ruby>振り仮名<rt>ふりがな</rt></ruby>

<!-- マーカー（蛍光ペン風ハイライト） -->
<p><mark>背景色を付けて目立たせる</mark></p>

<!-- 取り消し線 -->
<p><s>取り消し線を引いたテキスト</s></p>

<!-- 太字と斜体 -->
<p><strong>重要な太字テキスト</strong></p>
<p><em>強調された斜体テキスト</em></p>

<!-- 下線 -->
<p><u>下線付きテキスト</u></p>

<strong>タグは意味的に「重要」であることを示し、<em>タグは「強調」を示します。見た目だけでなく、検索エンジンやスクリーンリーダーにとっても意味のある区別です。単に太字にしたいだけの場合は、CSSのfont-weight: bold;を使う方が適切です。

まとめ