HTMLで文章を書くときは、文字をそのまま並べるのではなく、見出し・段落・箇条書き・重要な語句など、内容の役割に合うタグで構造を作ります。正しい構造は、読者だけでなくブラウザ、検索エンジン、読み上げソフトにも文章を伝えやすくします。
この記事では、pタグを使う基本から、改行、見出し、強調、箇条書き、読みやすいCSSまでを初心者向けに解説します。最後に、記事本文を丸ごと作るサンプルも紹介します。
HTMLの文章はタグで構造を付ける
テキストエディタで文章を改行しただけでは、ブラウザで同じ段落構成になるとは限りません。HTMLでは、文章のまとまりをタグで明示します。
<article>
<h1>HTMLで読みやすい文章を書く</h1>
<p>HTMLでは文章の役割に合うタグを使います。</p>
<h2>基本のタグ</h2>
<p>見出しと段落から始めましょう。</p>
<ul>
<li>見出しで話題を分ける</li>
<li>段落で内容をまとめる</li>
</ul>
</article>このコードをブラウザで開くと、ページタイトル、章の見出し、段落、箇条書きの順に表示されます。文章の階層が見た目にも分かりやすくなります。
pタグで段落を作る
pはparagraphの略で、ひとまとまりの段落を表す要素です。通常の本文は、段落ごとに<p>と</p>で囲みます。
<p>HTMLはWebページの構造を作る言語です。</p>
<p>CSSは文字色や余白などの見た目を整えます。</p>変更前に2つの文章をタグなしで続けて書くと、まとまりが分かりません。上のようにp要素を分けると、ブラウザは別々の段落として扱い、テーマやCSSで段落間の余白も調整できます。
1つのp要素には、原則として1つの話題をまとめます。話題や主張が変わる場所でp要素を分けると、スマートフォンでも流し読みしやすくなります。
HTMLファイル内の改行だけでは段落にならない
HTMLのソースコードでEnterキーを押しても、通常の文章では複数の空白や改行が1つの空白として扱われます。
<p>1行目です。
2行目です。
3行目です。</p>ブラウザでは、基本的に1つの段落として横方向へ続いて表示されます。段落を分けたい場合はp要素を分けてください。
brタグは同じ段落内で改行する
brは、同じ段落の途中で改行が必要なときに使う空要素です。住所、詩、歌詞のように、改行位置そのものに意味がある内容に向いています。
<address>
〒100-0001<br>
東京都千代田区千代田1-1
</address>変更後は、郵便番号の次で改行されます。brには終了タグがないため、</br>は書きません。
段落間の余白を作るためにbrを何個も並べるのは避けます。段落はp要素で分け、余白はCSSのmarginで指定します。
見出しで文章の階層を作る
HTMLの見出しはh1からh6まであります。数字は文字サイズではなく、文章構造の階層を表します。
h1：ページ全体の主見出しh2：ページ内の大きな章h3：h2の章に含まれる小見出しh4〜h6：さらに細かい階層
<h1>HTML入門</h1>
<h2>文章を書くタグ</h2>
<p>pタグと見出しタグを使います。</p>
<h3>pタグの書き方</h3>
<p>文章を段落ごとに囲みます。</p>h1の次にh2、その中の話題にh3という順で使います。文字を小さく見せたいという理由だけでh2からh4へ飛ばさず、見た目はCSSで調整してください。
箇条書きで情報を整理する
同じ種類の項目が複数ある場合は、文章を読点で長くつなぐよりリストにすると把握しやすくなります。順番がない項目にはul、手順など順番が重要な項目にはolを使います。
順番がない箇条書きはulタグ
<ul>
<li>見出しを付ける</li>
<li>段落を短く分ける</li>
<li>一行を長くしすぎない</li>
</ul>手順はolタグ
<ol>
<li>index.htmlを作る</li>
<li>文章へタグを付ける</li>
<li>ブラウザで確認する</li>
</ol>どちらのリストでも、各項目はli要素で囲みます。ブラウザではulが点、olが番号付きで表示されます。
重要性と強調をHTMLで表す
strongは強い重要性、emは文中の強調を表します。多くのブラウザではstrongが太字、emが斜体になりますが、見た目だけを目的に使うタグではありません。
<p><strong>保存してから</strong>ブラウザを再読み込みしてください。</p>
<p>HTMLは<em>文章の意味</em>を表す言語です。</p>すべての文をstrongで囲むと、どこが重要なのか分からなくなります。読者が特に注意すべき語句へ限定して使いましょう。
引用文はblockquoteタグで区別する
他のページや資料からまとまった文章を引用する場合は、blockquote要素を使います。自分の文章と引用文を意味の上でも分けられます。
<blockquote cite="https://example.com/source">
<p>ここに引用した文章を書きます。</p>
</blockquote>
<p>出典：<a href="https://example.com/source">資料名</a></p>cite属性で引用元のURLを示せますが、通常は画面に表示されません。読者が出典を確認できるよう、本文中にも資料名とリンクを書きます。
articleとsectionで長い文章を分ける
ブログ記事やニュース記事のように、それだけで内容が成立するまとまりにはarticle要素を使えます。記事内の章をテーマごとに分ける場合はsectionを使い、原則として見出しを付けます。
<article>
<header>
<h1>HTMLで文章を書く方法</h1>
<p>見出しと段落の基本を解説します。</p>
</header>
<section>
<h2>pタグで段落を作る</h2>
<p>本文を段落ごとに囲みます。</p>
</section>
</article>すべての装飾用ボックスをsectionにする必要はありません。内容として章にならない単なる囲みにはdivを使います。
CSSで文章を読みやすくする
HTMLで文章の構造を作ったら、CSSで文字サイズ、行間、横幅、段落間の余白を整えます。まずは次の設定から確認してください。
.article-body {
width: min(100% - 2rem, 65ch);
margin-inline: auto;
color: #1e293b;
font-size: 1rem;
line-height: 1.8;
}
.article-body p {
margin-block: 0 1.5em;
}
.article-body h2 {
margin-block: 2.5em 0.75em;
line-height: 1.35;
}
.article-body h3 {
margin-block: 2em 0.75em;
line-height: 1.4;
}65chで一行の長さに上限を付け、本文のline-heightを1.8にしています。変更後は、広い画面でも文章が端から端まで伸びず、次の行へ視線を移しやすくなります。
日本語本文のletter-spacingを大きくしすぎると、単語や文節のまとまりが読みづらくなります。まずは標準の字間で確認し、必要な場合も小さな値から調整してください。
伝わる文章にする書き方のコツ
結論と対象読者を最初に示す
読者が「自分向けの記事か」「何が分かるか」を判断できるよう、導入文で対象と結論を伝えます。操作方法の記事なら、先に使うタグやプロパティを示してから手順を説明すると迷いにくくなります。
一段落には一つの話題を書く
説明、注意点、別の話題を一つのp要素へ詰め込むと、要点を探しにくくなります。話題が変わる場所で段落を分け、長くても1〜3文程度から読みやすさを確認します。
結論・理由・例・結論の順で説明する
PREP法は、Point（結論）、Reason（理由）、Example（具体例）、Point（結論）の順で説明する方法です。すべての段落へ機械的に当てはめる必要はありませんが、解説の順序に迷ったときの基準になります。
漢字と専門用語を続けすぎない
漢字や専門用語が続く文章は、初心者が読み止まりやすくなります。必要な専門用語は最初に意味を説明し、短い文や具体例を組み合わせてください。
記事本文を作る完成例
これまでの要素を組み合わせ、短い解説記事を作ります。index.htmlのbodyへ次のコードを入れてください。
<main>
<article class="article-body">
<header>
<h1>HTMLの学習を始める方法</h1>
<p>初心者が最初に練習する内容を紹介します。</p>
</header>
<section>
<h2>最初に覚えるタグ</h2>
<p>まずは見出し、段落、リンクを使ってみましょう。</p>
<ul>
<li>見出し：h1〜h6</li>
<li>段落：p</li>
<li>リンク：a</li>
</ul>
</section>
<section>
<h2>練習のポイント</h2>
<p><strong>コードを書いたら必ず保存し、</strong>ブラウザで結果を確認します。</p>
</section>
</article>
</main>ブラウザでは、記事タイトル、導入文、2つの章、箇条書き、重要な注意点が階層に沿って表示されます。文字だけを並べた状態より、どこに何が書かれているかを把握しやすくなります。
文章の表示が崩れるときの確認点
- 段落間に余白がない：p要素を分け、CSSの
marginを確認します。 - 改行されない：段落はp、同じ段落内の必要な改行はbrを使います。
- 見出し階層が不自然：h1、h2、h3の順序を文章構造に合わせます。
- 箇条書きの点が出ない：CSSで
list-style: none;が指定されていないか確認します。 - 文章が横に長すぎる：本文へ
max-widthやch単位の上限を付けます。 - 文字や背景のコントラストが弱い：薄い灰色の本文を避け、読みやすい色の組み合わせにします。
修正後はパソコンだけでなく、スマートフォン相当の画面幅とブラウザの拡大表示でも確認してください。文章が枠からはみ出さず、見出しと本文の区別が保たれていれば問題ありません。
まとめ
HTMLで文章を書くときは、通常の本文をp、章のタイトルをh1〜h6、同じ段落内の必要な改行をbr、箇条書きをul・ol・liで表します。重要性にはstrong、強調にはemを使い、文章の意味をタグで伝えます。
HTMLで構造を作った後に、CSSで文字サイズ、行間、一行の長さ、段落間の余白を調整しましょう。短い段落と適切な見出しを使い、複数の画面幅で読みやすさを確かめてください。