【6日でできるPHP入門】HTMLのその他の主要タグ

　HTMLでは、文章の構造や意味を示すためにさまざまなタグが用意されています。基本構造以外にも、ページを分かりやすく見せるための「見出し」「リスト」「表」「リンク」など多彩なタグがあります。ここでは代表的なタグの使い方を、サンプルや出力例を交えて解説します。タグごとの特徴や注意点も表で整理し、実践的に理解できる内容を目指します。

１．見出しタグ・段落タグ・改行タグ

1.1. 見出しタグ（h1〜h6）

見出しタグは、ページや文章のタイトル、セクション分けなどで使われます。
<h1>が最も大きく、数字が増えるほど小さい見出しになります。

ファイル名： lesson12_1.html

<!DOCTYPE html>
<html>
  <head>
    <title>見出しタグの使い方</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>本のタイトル</h1>
    <h2>第1章 はじめに</h2>
    <h3>1.1 背景</h3>
    <h4>1.1.1 用語の説明</h4>
    <h5>補足情報</h5>
    <h6>脚注</h6>
  </body>
</html>

表示結果

1.2. 段落タグ（pタグ）

<p>タグは、文章のまとまり（段落）ごとに使用します。自動的に前後にスペースが入ります。

ファイル名： lesson12_2.html

<!DOCTYPE html>
<html>
  <head>
    <title>段落タグの例</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <p>これは1つ目の段落です。</p>
    <p>これは2つ目の段落です。HTMLでは、pタグごとに改行と余白がつきます。</p>
  </body>
</html>

表示結果

1.3. 改行タグ（brタグ）

<br>タグは、文章の途中で改行を入れたいときに使います。終了タグは不要です。

ファイル名： lesson12_3.html

<!DOCTYPE html>
<html>
  <head>
    <title>改行タグの例</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <p>
      おはようございます。<br>
      今日は晴れですね！<br>
      よい一日をお過ごしください。
    </p>
  </body>
</html>

表示結果

２．リンク・リスト・表のタグ

2.1. リンクタグ（aタグ）

<a>タグを使うと、他のページや外部サイトへのリンクが作れます。href属性でリンク先を指定します。

ファイル名： lesson12_4.html

<!DOCTYPE html>
<html>
  <head>
    <title>リンクタグの例</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <p>公式サイトはこちら：<a href="https://www.example.com">Example サイト</a></p>
  </body>
</html>

表示結果

2.2. 箇条書きリスト（ul, ol, liタグ）

リストを作るには、順序なしリスト<ul>や順序付きリスト<ol>を使います。
リストの各項目には<li>タグを使います。

ファイル名： lesson12_5.html

<!DOCTYPE html>
<html>
  <head>
    <title>リストタグの例</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h2>買い物リスト</h2>
    <ul>
      <li>りんご</li>
      <li>バナナ</li>
      <li>牛乳</li>
    </ul>

    <h2>やることリスト</h2>
    <ol>
      <li>メールを確認する</li>
      <li>資料を作成する</li>
      <li>ミーティングに参加する</li>
    </ol>
  </body>
</html>

表示結果

2.3. 表のタグ（table, tr, th, td）

表は<table>で作り、行は<tr>, 見出しは<th>, セルは<td>で表します。

ファイル名： lesson12_6.html

<!DOCTYPE html>
<html>
  <head>
    <title>表タグの例</title>
    <meta charset="UTF-8">
    <style>
      table { border-collapse: collapse; }
      th, td { border: 1px solid #888; padding: 6px 12px; }
    </style>
  </head>
  <body>
    <h2>スケジュール表</h2>
    <table>
      <tr>
        <th>日付</th>
        <th>予定</th>
      </tr>
      <tr>
        <td>7月1日</td>
        <td>打ち合わせ</td>
      </tr>
      <tr>
        <td>7月2日</td>
        <td>資料作成</td>
      </tr>
    </table>
  </body>
</html>

表示結果

３．タグと属性一覧

タグ主な用途主な属性・説明例
<h1>〜<h6>見出しなし
<p>段落なし
<br>途中改行なし
<a>リンクhref="リンク先URL"
<ul>箇条書きリスト（順序なし）なし
<ol>番号付きリスト（順序あり）なし
<li>リストの項目なし
<table>表全体なし
<tr>表の行なし
<th>表の見出しセルなし
<td>表のデータセルなし

まとめ

　HTMLには、文章の構造を整え、情報を分かりやすく伝えるためのさまざまなタグがあります。見出し・段落・改行だけでなく、リンクやリスト、表などのタグも適切に使いこなすことで、より読みやすく使いやすいWebページを作成できます。
サンプルHTMLを実際にブラウザで表示して、タグの働きを体感しながら学習を進めていきましょう。