HTMLの基本タグまとめ｜初心者向けにやさしく解説！

こんにちは！
前回の記事では、HTMLとCSSの違いについてやさしく解説しました。
今回はその続きとして、HTMLでよく使う基本タグをまとめて紹介します！

これからHTMLを学ぶ人にとって、「どのタグがよく使われるのか」を知っておくことはとても大切です。
この記事では、最低限覚えておくと便利なタグを中心に、意味・使い方・サンプルコード付きで解説します。

HTMLタグとは？まずは簡単におさらい

HTMLタグは、Webページの構造を表現するための目印です。

たとえば：

<p>こんにちは！</p>

このように、「<p>」で始まり、「</p>」で終わる“かっこ”がHTMLタグです。
これで「ここは段落ですよ」とブラウザに伝えているのです。

よく使うHTML基本タグまとめ

それでは、初心者がまず覚えておきたいタグを、ジャンル別に紹介していきます！

1. ページ全体の基本構造タグ

タグ	役割
`<html>`	HTML文書のスタートと終わりを示す
`<head>`	ページの設定や外部ファイルの読み込みなどを行う
`<body>`	実際に画面に表示される内容を記述する

🔍サンプル

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <p>こんにちは！</p>
  </body>
</html>

2. 見出し・段落タグ

タグ	役割
`<h1>`〜`<h6>`	見出し（数字が小さいほど大きく・重要）
`<p>`	段落（パラグラフ）

🔍サンプル

<h1>メインタイトル</h1>
<h2>サブタイトル</h2>
<p>これは段落です。</p>

3. リスト・箇条書き

タグ	役割
`<ul>`	順序なしリスト（●で表示）
`<ol>`	順序ありリスト（1. 2. 3. で表示）
`<li>`	リストの項目

🔍サンプル

<ul>
  <li>りんご</li>
  <li>バナナ</li>
</ul>

4. リンクと画像

タグ	役割
`<a>`	ハイパーリンク（他のページに飛ばす）
`<img>`	画像を表示する（閉じタグなし）

🔍サンプル

<a href="https://example.com">サンプルページへ</a>

<img src="sample.jpg" alt="サンプル画像">

※altは、画像が表示されないときに代わりに表示されるテキストです。

5. 強調・インライン要素

タグ	役割
`<strong>`	強調（太字）
`<em>`	強調（斜体、感情を込めた強調）
`<span>`	汎用のインライン要素（スタイル用）

🔍サンプル

<p><strong>重要</strong>なポイントです。</p>
<p><em>注意</em>してください。</p>

6. 改行と区切り線

タグ	役割
`<br>`	改行（閉じタグなし）
`<hr>`	区切り線を引く（閉じタグなし）

🔍サンプル

<p>1行目<br>2行目</p>
<hr>
<p>この下は別の話題です。</p>

7. テーブル（表）

タグ	役割
`<table>`	表全体
`<tr>`	行（row）
`<td>`	セル（データ）
`<th>`	見出しセル（太字・中央寄せ）

🔍サンプル

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>太郎</td>
    <td>20</td>
  </tr>
</table>

これだけは覚えておきたい！最小HTMLテンプレート

初心者のうちは、テンプレートを毎回コピペして使うのがおすすめです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>はじめてのページ</h1>
    <p>こんにちは、世界！</p>
  </body>
</html>

これが「一番シンプルなHTMLの基本形」です。
これをベースに、いろいろなタグを追加していきましょう！