6日でできる 新HTML入門｜見出しと段落
見出しで流れを作り、段落で読みやすく整える。HTMLの基本タグで、伝わるWebページを作ろう。
Webページは、ただ文章を並べるだけでは読みやすくなりません。どこが大きなテーマなのか、どこから本文が始まるのか、どこで内容が切り替わるのかを分かりやすく整理することで、読む人にとって理解しやすいページになります。
HTMLには、文章の役割を示すためのタグが用意されています。たとえば、見出しを表す <h1> から <h6>、段落を表す <p>、内容の区切りを示す <hr> などがあります。これらを正しく使うと、ブラウザに文書の構造を伝えながら、読みやすいページを作成できます。
ここでは、Webページの基本となる「見出し」「段落」「水平線（ヘアライン）」について、サンプルHTMLを使いながら、やさしく丁寧に解説していきます。
見出しはページの内容を整理するために使う
見出しは、Webページの中で「ここから何について説明するのか」を示す大切な要素です。書籍や教科書にタイトルや小見出しがあるように、Webページでも見出しを使うことで、内容の流れが分かりやすくなります。
HTMLでは、見出しを指定するために <h1> から <h6> までのタグを使います。hはheadingの略で、見出しという意味を持ちます。数字が小さいほど重要度が高く、一般的には大きく表示されます。
| タグ | 役割 | 使い方の目安 |
|---|---|---|
| <h1> | 最も重要な見出し | ページ全体のタイトル |
| <h2> | 大きな区切りの見出し | 主要な内容の見出し |
| <h3> | h2の中にある小見出し | 詳細な説明の見出し |
| <h4> | h3の中にある小見出し | さらに細かい項目 |
| <h5> | h4の中にある小見出し | 補足的な小項目 |
| <h6> | 最も小さい見出し | かなり細かい補足 |
見出しタグを使うと、ブラウザでは通常、前後に余白が入り、文字も本文より目立つように表示されます。ただし、見出しタグは文字を大きくするためだけのタグではありません。文書の構造を示すためのタグです。
そのため、「大きく表示したいから <h1> を使う」という考え方ではなく、「ページの中で一番重要な見出しだから <h1> を使う」と考えることが大切です。
図1：見出しでページの流れを整理する
この図から分かること
見出しは、Webページの内容を階層的に整理するために使います。<h1> はページ全体の大きなテーマ、<h2> は大きな区切り、<h3> はさらに詳しい内容を示す見出しとして使うと、文章の流れが分かりやすくなります。
見出しを正しく使うと、読者はページ全体の構成をつかみやすくなります。また、ブラウザや検索エンジン、読み上げソフトなどにも文書の構造を伝えやすくなります。
見出しタグの基本的な書き方
見出しタグは、開始タグと終了タグで見出しにしたい文字を囲んで使います。
たとえば、ページの一番大きな見出しには <h1> を使います。
<h1>Web制作の基本</h1>次に大きな見出しには <h2> を使います。
<h2>HTMLを学ぶ理由</h2>このように、見出しタグは内容を囲んで使うタイプのタグです。<h1> で始めたら、</h1> で閉じます。<h2> で始めたら、</h2> で閉じます。
見出しの数字は、見た目の大きさだけで決めるのではなく、内容の階層に合わせて選びます。ページ全体のタイトルを <h1> にし、その下の大きな項目を <h2>、さらに細かい説明を <h3> にするように考えると、自然な構造になります。
見出しを使ったHTMLファイルの例
ここでは、<h1> と <h2> を使って、ページのタイトルと大きな項目を表示するHTMLを作成してみます。
ファイル名： Lesson3-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Web制作入門</title>
</head>
<body>
<h1>Web制作を始めよう</h1>
<h2>HTMLでページの土台を作る</h2>
</body>
</html>ブラウザの表示例
このHTMLでは、<h1> に「Web制作を始めよう」、<h2> に「HTMLでページの土台を作る」と書いています。
ブラウザで表示すると、<h1> の見出しは大きく目立つ文字として表示され、<h2> はそれより少し小さい見出しとして表示されます。どちらも本文とは違い、見出しとして認識しやすい見た目になります。
見出しを使うときの注意点
見出しタグは便利ですが、使う順番を意識することが大切です。基本的には、<h1> の下に <h2>、<h2> の下に <h3> というように、内容の階層に沿って使います。
たとえば、ページ全体のタイトルが <h1> で、その中に大きな説明項目が複数ある場合は、それぞれを <h2> にします。さらに、<h2> の中で細かく分けたい内容があれば <h3> を使います。
避けたいのは、見た目だけを理由に見出しレベルを飛ばしてしまうことです。たとえば、<h1> の次にいきなり <h5> を使うと、文書構造として分かりにくくなります。
| よい考え方 | 避けたい考え方 |
|---|---|
| 内容の重要度や階層に合わせて見出しを選ぶ | 文字の大きさだけで見出しを選ぶ |
| <h1> の下に <h2> を置く | <h1> の次に理由なく <h5> を置く |
| 見出しでページの流れを整理する | 見出しを装飾目的だけで使う |
見出しは、ページの案内板のような役割を持っています。読み手が迷わず内容を追えるように、自然な順番で使っていきましょう。
段落は本文のまとまりを作るために使う
見出しでテーマを示したら、その下に本文を書いていきます。本文を書くときに大切なのが、段落の考え方です。
HTMLでは、文章のまとまりを表すために <p> を使います。pはparagraphの略で、段落という意味です。1つのまとまった内容を <p> と </p> で囲むことで、ブラウザに「ここは1つの段落です」と伝えられます。
段落を使うと、文章の前後に自然な余白が入り、長い文章でも読みやすくなります。前回学んだ <br> は行を変えるためのタグでしたが、<p> は文章のまとまりを作るためのタグです。
| タグ | 主な役割 | 向いている使い方 |
|---|---|---|
| <br> | 文章の途中で改行する | 住所や短い行の区切り |
| <p> | 文章のまとまりを作る | 本文、説明文、紹介文 |
長い説明文を作る場合は、<br> で何度も改行するよりも、<p> で段落を分けるほうが自然です。段落ごとに内容を整理すると、読者は文章の区切りを理解しやすくなります。
pタグの基本的な書き方
<p> は、段落にしたい文章を開始タグと終了タグで囲んで使います。
<p>HTMLはWebページの構造を作るための言語です。</p>複数の段落を作りたい場合は、段落ごとに <p> を分けて書きます。
<p>HTMLはWebページの土台を作ります。</p>
<p>タグを使うことで、文章の役割をブラウザに伝えられます。</p>このように書くと、ブラウザでは2つの段落として表示されます。段落と段落の間には、ブラウザの標準表示によって余白が入ります。
ここで大切なのは、段落の終わりに <br> を追加する必要がないということです。<p> は段落として表示されるため、終了タグのあとに自然な区切りができます。
段落を使ったHTMLファイルの例
次に、見出しの下に本文の段落を追加してみましょう。<h1> と <h2> で内容の見出しを作り、その下に <p> で説明文を入れます。
ファイル名： Lesson3-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML学習ノート</title>
</head>
<body>
<h1>HTML学習ノート</h1>
<h2>見出しと段落を使う理由</h2>
<p>HTMLでは、見出しを使ってページの内容を分かりやすく整理できます。</p>
<p>段落を使うと、文章のまとまりがはっきりし、読みやすい本文になります。</p>
</body>
</html>ブラウザの表示例
このHTMLでは、ページ全体のタイトルとして <h1> を使い、内容の見出しとして <h2> を使っています。その下に、2つの <p> を使って本文を段落に分けています。
1つ目の段落では見出しの役割について説明し、2つ目の段落では段落の役割について説明しています。このように、内容ごとに段落を分けると、文章の流れが分かりやすくなります。
図2：見出しと段落で読みやすい本文を作る
この図から分かること
見出しは、これから説明する内容のテーマを示します。段落は、そのテーマについての本文をまとまりごとに整理します。
<h1> や <h2> だけではページの内容は十分に伝わりません。見出しの下に <p> で本文を配置することで、読者は「何についての説明なのか」「どこまでが1つの内容なのか」を理解しやすくなります。
pタグを使うときの注意点
<p> は、文章のまとまりを作るためのタグです。そのため、1つの段落には、1つの話題や1つのまとまった説明を入れると読みやすくなります。
長い文章を1つの <p> に詰め込みすぎると、画面上で読みにくくなります。反対に、1文ごとに細かく分けすぎても、文章の流れが途切れて見えることがあります。
段落を分ける目安は、話題が変わるところです。たとえば、最初の段落ではHTMLの役割を説明し、次の段落では見出しの役割を説明する、というように分けると自然です。
| 段落の分け方 | 説明 |
|---|---|
| 話題が変わるところで分ける | 内容の切り替わりが分かりやすくなる |
| 1つの段落に詰め込みすぎない | 長文でも読みやすくなる |
| 改行目的だけで使わない | 段落として意味のあるまとまりを作る |
<p> は見た目を整えるためだけではなく、文章の意味を整理するためのタグです。読者が読み進めやすいように、内容のまとまりを意識して使いましょう。
水平線は内容の区切りを示すために使う
Webページの中で、内容が大きく切り替わる場面があります。たとえば、「準備すること」と「実際に作業すること」を分けたい場合や、「前半の説明」と「後半の説明」を視覚的に区切りたい場合です。
このようなときに使えるのが <hr> です。<hr> は、ページ内に水平線を表示し、内容の区切りを示すタグです。
hrはhorizontal ruleの略で、横方向の線という意味があります。HTMLでは、セクションの区切りや話題の変わり目を示すために使われます。
<hr> は空要素なので、終了タグは書きません。<br> と同じように、タグ単体で役割を持っています。
<hr><hr> を書くと、ブラウザではその位置に横線が表示されます。また、通常は前後に余白が入り、内容の切り替わりが分かりやすくなります。
hrタグを使ったHTMLファイルの例
ここでは、学習の流れを「準備」と「実践」に分けるHTMLを作ってみます。2つの内容の間に <hr> を入れることで、画面上でも区切りが分かりやすくなります。
ファイル名： Lesson3-3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>学習ステップの確認</title>
</head>
<body>
<h1>学習の準備</h1>
<p>HTMLファイルを作成するために、エディタとブラウザを用意します。</p>
<hr>
<h1>学習の実践</h1>
<p>見出しや段落のタグを書き、ブラウザで表示を確認します。</p>
</body>
</html>ブラウザの表示例
このHTMLでは、前半に「学習の準備」、後半に「学習の実践」という2つの内容があります。その間に <hr> を入れることで、内容が切り替わる場所を視覚的に示しています。
<hr> は、単なる飾りの線として使うよりも、内容の区切りを意味する場所で使うと分かりやすくなります。
図3：水平線で内容の切り替わりを示す
この図から分かること
<hr> を使うと、ページ内の内容が大きく切り替わる場所を視覚的に示せます。文章だけでは区切りが分かりにくい場合でも、水平線を入れることで「ここから別の内容に変わる」と伝えやすくなります。
ただし、<hr> は線を増やして飾るためだけのタグではありません。内容の区切りとして意味のある場所に使うことで、ページ全体の流れが分かりやすくなります。
見出し、段落、水平線の使い分け
<h1> から <h6>、<p>、<hr> は、それぞれ役割が異なります。どれも文章を読みやすくするために使いますが、目的を混同しないことが大切です。
| タグ | 目的 | 主な使い方 |
|---|---|---|
| <h1> から <h6> | 見出しを作る | ページや項目のタイトルを示す |
| <p> | 段落を作る | 本文のまとまりを示す |
| <hr> | 内容を区切る | 話題やセクションの切り替わりを示す |
見出しは、内容のテーマを示します。段落は、そのテーマについての本文をまとめます。水平線は、内容が大きく切り替わる場所を視覚的に示します。
この3つを組み合わせると、Webページの文章はぐっと読みやすくなります。読者がページを開いたときに、まず見出しで内容をつかみ、段落で詳しい説明を読み、水平線で区切りを理解できるようになります。
HTML構造として考えることが大切
HTMLでは、見た目だけを整えるのではなく、文章の意味や構造を考えてタグを選ぶことが大切です。
たとえば、文字を大きくしたいだけなら <h1> を使う、余白を作りたいから <p> を空で入れる、線を飾りとしてたくさん入れる、といった使い方はおすすめできません。
HTMLタグは、それぞれ意味を持っています。
| 考え方 | 内容 |
|---|---|
| 見出し | ここから何について説明するのかを示す |
| 段落 | 文章のまとまりを示す |
| 水平線 | 内容の切り替わりを示す |
HTMLを学ぶときは、まず「この文章はどんな役割なのか」を考えてからタグを選ぶと、自然で分かりやすいページになります。
見た目の細かい調整は、CSSで行います。CSSについては、CSSに関する記事以降で解説します。ここでは、HTMLだけで文書の構造を正しく作ることを意識しましょう。
使用したタグ一覧
| タグ | 説明 |
|---|---|
| <!DOCTYPE html> | HTML5文書であることを宣言する |
| <html lang="ja"> | HTML文書全体を囲み、ページの主な言語が日本語であることを示す |
| <head> | 文字コードやタイトルなど、ページの設定情報を記述する領域 |
| <meta charset="UTF-8"> | 文字コードをUTF-8に指定し、文字化けを防ぐ |
| <title> | ブラウザのタブやタイトルバーに表示される文書タイトルを指定する |
| <body> | ブラウザに表示する本文コンテンツを記述する |
| <h1> から <h6> | 見出しレベル1から6を指定する。数字が小さいほど重要度が高い |
| <p> | 文章のまとまりである段落を定義する |
| <hr> | 水平線を挿入し、内容の区切りを示す |