【6日でできるHTML入門】見出しと段落

　ここでは、Webページを構造化し、読みやすくするための基本要素である「見出し」「段落」、そして内容を区切る「水平線（ヘアライン）」の使い方を学びます。HTMLには文章の役割を明確にするための専用タグが用意されており、適切に使うことで閲覧者にとって分かりやすいページを作成できます。以下の順序で解説します。

  1. 見出しの指定
  2. 段落の指定
  3. 水平線（ヘアライン）の挿入

最後に、ここで登場した主要なタグについてまとめます。

１．見出しの指定

1.1. 見出しタグ（<h1>～<h6>）の役割

  • <h1>～<h6>は見出しレベルを示し、数字が小さいほど重要度が高く、フォントサイズも大きく表示されます。
  • タグを使うことで、自動的に前後に改行が入り、SEO上も構造を認識しやすくなります。

1.2. コード例と出力

以下では、レベル1とレベル2の見出しを使った例を示します。

ファイル名： lesson03-1.html

<!-- ファイル名: lesson03-1.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>プログラミング入門🚀</title>
</head>
<body>
  <h1>プログラミング学習の始め方</h1>   <!-- レベル1の見出し -->
  <h2>HTMLを理解しよう</h2>            <!-- レベル2の見出し -->
</body>
</html>

ブラウザ表示例

２．段落の指定

2.1. 段落タグ（<p>）の役割

  • <p>で囲んだ範囲が1つの段落として扱われ、前後に適切な余白が挿入されます。
  • 改行も含まれるため、終了タグのあとに改行用タグ（<br>など）は不要です。
2.2. コード例と出力

見出しに続く本文を段落で分ける例です。

ファイル名： lesson03-2.html

<!-- ファイル名: lesson03-2.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>プログラミング入門🚀</title>
</head>
<body>
  <h1>プログラミング学習の始め方</h1>
  <h2>HTMLを理解しよう</h2>
  <p>HTMLはWebページの骨組みを作るマークアップ言語です。要素をタグで囲み、ブラウザに構造を伝えます。</p>
  <p>段落を適切に分けることで、長い文章でも読みやすく整理できます。</p>
</body>
</html>

ブラウザ表示例

HTMLはWebページの骨組みを作るマークアップ言語です。要素をタグで囲み、ブラウザに構造を伝えます。

段落を適切に分けることで、長い文章でも読みやすく整理できます。

３．水平線（ヘアライン）の挿入

3.1. 水平線タグ（<hr>）の役割

  • <hr>はセクションの区切りとして水平線を挿入します。
  • 空要素（終了タグなし）で、前後に改行も含みます。

3.2. コード例と出力

ページ内で大きな区切りを付けたいときに使います。

ファイル名： lesson03-3.html

<!-- ファイル名:  lesson03-3.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>学習の区切り✂️</title>
</head>
<body>
  <h1>準備フェーズ</h1>
  <p>開発環境を整え、必要なツールをインストールします。</p>
  <hr>
  <h1>実装フェーズ</h1>
  <p>実際にコードを書き、動作を確認します。</p>
</body>
</html>

ブラウザ表示例

まとめ

  • 見出しタグ（<h1>～<h6>）で文章の階層構造を示す
  • 段落タグ（<p>）で本文を適切に区切り、読みやすい余白を確保
  • 水平線タグ（<hr>）でセクション間を視覚的に分離

以下に、ここで登場したHTMLタグをまとめます。

タグ説明
<!DOCTYPE html>HTML5文書であることを宣言
<html>文書全体を囲むルート要素
<head>メタ情報（文字コードやタイトルなど）を記述する領域
<meta charset="UTF-8">文字エンコーディングをUTF-8に指定
<title>ブラウザのタブに表示される文書タイトル
<body>ページの本文コンテンツを記述
<h1>～<h6>見出しレベル1～6を指定（数字が小さいほど重要度高）
<p>段落を定義し、前後に余白と改行を含む。
<hr>水平線を挿入し、セクションを区切る。