「HTMLってよく聞くけど、何から始めればいいの？」――そんな疑問を抱えている初心者の方に向けた入門ガイドです！
HTMLはWebページを作るための基本的な言語ですが、タグがたくさんあって難しそうに感じるかもしれません。
そこで本記事では、初心者でも30分で理解できる「基本タグ10選」を厳選し、ひとつひとつ丁寧に解説します。
読み進めるだけで、HTMLの基礎が自然と身につき、簡単なWebページが自分の手で作れるようになりますよ。
これからWeb制作を始めたい方は、ぜひ最後まで読んでみてください。
HTMLとは？基本をざっくり理解しよう
HTMLの役割と重要性
HTML（HyperText Markup Language）は、Webページの「構造」を作る言語です。
たとえば「ここは見出し」「ここは画像」といった指示をブラウザに伝える役割を担っています。
HTMLがなければ、Webページはただのテキストの羅列になってしまいます。
CSSやJavaScriptとの違い
- HTML：構造（文章や画像の配置など）
- CSS：デザイン（色やレイアウト）
- JavaScript：動作（動きや機能）
HTMLは家の「骨組み」、CSSは「内装」、JavaScriptは「電気や配線」に例えるとわかりやすいです。
Webページはどうやって表示されるの？
- ブラウザがHTMLファイルを読み込む
- タグに基づいて構造を解釈し、画面に表示する
- 必要に応じてCSSやJavaScriptも読み込まれる
HTMLタグの基本構造
HTMLタグの書き方（開始タグと終了タグ）
HTMLタグは、<タグ名> と </タグ名> で囲むのが基本です。
<p>これは段落です。</p>一部のタグは閉じタグが不要です（例：<br>, <img>）。
属性（attribute）とは？
タグには追加情報を設定できます。これが属性（attribute）です。
<a href="https://example.com">リンク</a>よく出てくるタグ構造のパターン
基本的なHTMLの構成は以下の通りです。
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>本文</p>
</body>
</html>初心者が最初に覚えるべきHTMLタグ10選
1. 見出しタグ（<h1>〜<h6>）
役割：
Webページの構造を示す見出しを設定します。<h1>は最も重要な見出しで、数字が増えるにつれて階層が下がります（見た目は小さくなります）。
書き方：
<h1>トップの見出し</h1>
<h2>セクションの見出し</h2>
<h3>小見出し</h3>表示イメージ：
<h1>：大きく目立つタイトル<h2>：中見出し<h3>以下：章の中の小見出し
2. 段落タグ（<p>）
役割：
文章のまとまり（段落）を示すのに使います。
書き方：
<p>これは段落の文章です。</p>表示イメージ：
- テキストが1行分の空白で区切られて表示されます。
- 複数の
<p>があれば段落ごとに間が空きます。
3. 改行タグ（<br>）
役割：
1つの段落の中で、途中で改行したいときに使います。終了タグは不要です。
書き方：
こんにちは。<br>今日はいい天気ですね。表示イメージ：
こんにちは。
今日はいい天気ですね。4. 強調タグ（<strong> と <em>）
役割：
文章の中の強調したい部分に使います。<strong>は太字、<em>は斜体（または視覚的な強調）になります。
書き方：
<p><strong>重要</strong>なポイントはここです。</p>
<p><em>特に注目</em>してください。</p>表示イメージ：
- 重要なポイントはここです。
- 特に注目してください。
5. リンクタグ（<a>）
役割：
別のWebページやファイルへのリンクを作ります。
書き方：
<a href="https://example.com">こちらをクリック</a>表示イメージ：
6. 画像タグ（<img>）
役割：
Webページに画像を表示させます。閉じタグは不要です。
書き方：
<img src="photo.jpg" alt="風景写真">src属性：画像のファイル名やURLを指定alt属性：画像が表示できないときの代替テキスト
7. リストタグ（<ul>, <ol>, <li>）
役割：
箇条書き（順序なし）や番号付きリスト（順序あり）を作成します。
書き方：
<ul>
<li>りんご</li>
<li>バナナ</li>
</ul>
<ol>
<li>手順1</li>
<li>手順2</li>
</ol>
表示イメージ：
- りんご
- バナナ
- 手順1
- 手順2
8. 表（テーブル）タグ（<table>, <tr>, <td>）
役割：
行と列で構成される表（テーブル）を作成します。
書き方：
<table>
<tr>
<td>名前</td>
<td>年齢</td>
</tr>
<tr>
<td>太郎</td>
<td>25</td>
</tr>
</table>表示イメージ：
| 名前 | 年齢 |
|---|---|
| 太郎 | 25 |
9. 入力フォーム関連タグ（<form>, <input>）
役割：
ユーザーが情報を入力できるフォームを作成します。
書き方：
<form>
名前：<input type="text" name="name">
<br>
<input type="submit" value="送信">
</form>表示イメージ：
- 名前：[＿＿＿＿＿＿]
- [送信]ボタン
10. 区切り・装飾用タグ（<div>, <span>）
役割：
CSSでスタイルを適用するための「囲い」を作る汎用タグです。<div>はブロック要素、<span>はインライン要素。
書き方：
<div style="background-color: #f0f0f0;">
<p>このエリアは背景色付き</p>
</div>
<p><span style="color: red;">赤い文字</span>の一部だけ装飾</p>表示イメージ：
- 背景色がついたボックス
- テキストの一部だけ赤色に強調
HTMLタグの使い方【実践例あり】
サンプルコードで理解する基本レイアウト
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<h1>ようこそ！</h1>
<p>これはサンプルページです。</p>
<a href="#">リンクはこちら</a>
</body>
</html>HTMLで簡単なWebページを作ってみよう（実践編）
ステップ1：HTMLファイルを作成する
メモ帳やVSCodeを開いて、新しいファイルを作成し、次の内容を貼り付けます。
<!DOCTYPE html>
<html>
<head>
<title>はじめてのWebページ</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは自分で作ったHTMLページです。</p>
<img src="image.jpg" alt="画像の例">
<a href="https://example.com">リンク先</a>
</body>
</html>ステップ2：ファイルを保存する
index.html という名前で保存してください。
ステップ3：ブラウザで開く
保存したファイルをダブルクリックすれば、ブラウザでページが表示されます。
よくある初心者のつまずきポイント
タグの閉じ忘れ・入れ子のミス
間違った例：
<p><strong>太字</p></strong> <!-- NG -->正しい例：
<p><strong>太字</strong></p> <!-- OK -->ブラウザでうまく表示されない原因
- スペルミス
- タグの開閉ミス
- 入れ子の順番ミス
HTMLだけでは見た目が整わない理由
HTMLはあくまで「構造」を定義するだけ。見た目の装飾はCSSが担当します。
まとめ：30分でHTMLの基礎をマスターしよう
今回覚えた10個の基本タグのおさらい
<h1>〜<h6>（見出し）<p>（段落）<br>（改行）<strong>,<em>（強調）<a>（リンク）<img>（画像）<ul>,<ol>,<li>（リスト）<table>,<tr>,<td>（表）<input>,<form>（フォーム）<div>,<span>（区切り）
次に学ぶべきステップ（CSSやJavaScript）
- CSSでWebページをおしゃれに
- JavaScriptで動きやインタラクションを加える
- サンプルページを模写してスキルアップ！
コメント