HTMLを学ぶ前に知っておくこと
「HTMLを学びたいけど、何から手をつければいいかわからない」——Web制作初心者の多くが最初にぶつかる壁です。
このページでは、HTMLをゼロから始める方に向けて、基本の書き方から最初のHTMLファイルの作り方まで丁寧に解説します。
HTMLとは何か？（3行でわかる）
- HyperText Markup Language の略
- Webページの構造と内容を定義する言語
- プログラミング言語ではなくマークアップ言語（意味づけの言語）
ブラウザはHTMLを読み取り、「これは見出し」「これはリンク」「これは画像」と解釈して画面に表示します。
HTMLを書くのに必要なもの
HTMLを書くために特別なソフトは必要ありません。2つだけ用意すればOKです。
1. テキストエディタ
コードを書くためのソフトです。初心者にはVS Code（無料）がおすすめです。
- Visual Studio Code（無料・Windows/Mac/Linux対応）
メモ帳でも書けますが、VS Codeはコードをカラフルにハイライトしてくれるのでミスに気づきやすく、補完機能で入力が速くなります。
2. Webブラウザ
作成したHTMLを確認するためのブラウザです。Chrome・Edge・Safariなど、普段使っているものでOKです。
はじめてのHTMLファイルを作ろう
STEP1：ファイルを作成する
デスクトップに index.html という名前で新しいファイルを作ります。
注意: Windowsの場合、拡張子が非表示になっていることがあります。「フォルダーオプション」から「拡張子を表示する」に設定してください。
STEP2：コードを書く
VS Codeで index.html を開き、以下を入力します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>はじめてのHTML</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは私のはじめてのHTMLページです。</p>
<p>HTMLはWebページの骨格を作る言語です。</p>
</body>
</html>
STEP3：ブラウザで確認する
保存した index.html をダブルクリックするとブラウザで開きます。
「こんにちは！」という見出しと2つの段落が表示されれば成功です。
HTMLの基本：タグの書き方ルール
HTMLはすべて「タグ」で構成されています。
開始タグと終了タグ
ほとんどのタグは開始タグと終了タグがセットです。
<p>これは段落です。</p>
<p>：開始タグ</p>：終了タグ（/がつく）- 開始〜終了タグの間が「内容」
自己終了タグ
終了タグが不要なタグもあります。
<br> <!-- 改行 -->
<img src="photo.jpg" alt="写真"> <!-- 画像 -->
<hr> <!-- 水平線 -->
<input type="text"> <!-- 入力欄 -->
タグの入れ子（ネスト）
タグの中にタグを入れることができます。
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
ルール: 内側のタグを先に閉じること。
<!-- ○ 正しい -->
<p><strong>重要なテキスト</strong></p>
<!-- × 間違い（交差している） -->
<p><strong>重要なテキスト</p></strong>
コメント
<!-- コメント --> で書いたものはブラウザに表示されません。メモ書きに使います。
<!-- ここはナビゲーション -->
<nav>
...
</nav>
最初に覚えるHTMLタグ10選
| タグ | 読み方 | 役割 |
|---|---|---|
<h1>〜<h6> |
エイチワン〜 | 見出し（数字が大きいほど小さい見出し） |
<p> |
ピー | 段落（テキストのまとまり） |
<a href="URL"> |
エー | リンク |
<img src="URL" alt="説明"> |
イメージ | 画像 |
<ul> / <li> |
アンオーダードリスト / リストアイテム | 箇条書き |
<div> |
ディブ | 汎用のブロック要素（グループ化） |
<span> |
スパン | 汎用のインライン要素（テキストの一部に適用） |
<strong> |
ストロング | 重要な強調（太字） |
<br> |
ビーアール | 改行 |
<header> <main> <footer> |
— | ページの構造（セマンティック） |
HTMLを書くときのよくある間違い
① 終了タグ忘れ
<!-- × 終了タグを忘れると以降のレイアウトが崩れる -->
<p>段落1
<p>段落2</p>
<!-- ○ -->
<p>段落1</p>
<p>段落2</p>
② alt属性の省略
<!-- × SEO・アクセシビリティ上NG -->
<img src="photo.jpg">
<!-- ○ alt属性は必ず記述 -->
<img src="photo.jpg" alt="東京タワーの夜景">
③ h1を複数使う
<!-- × h1は1ページに1つだけ -->
<h1>タイトル</h1>
<h1>サブタイトル</h1>
<!-- ○ -->
<h1>タイトル</h1>
<h2>サブタイトル</h2>
HTML学習のロードマップ
HTML初心者が最短でWebページを作れるようになる学習順序です。
① 基本構造を理解する
（DOCTYPE・html・head・body）
↓
② テキスト系タグを覚える
（h1〜h6・p・strong・em・br）
↓
③ リンク・画像を使えるようにする
（a・img）
↓
④ リスト・テーブルを作る
（ul・ol・li・table・tr・th・td）
↓
⑤ フォームを作る
（form・input・textarea・button）
↓
⑥ セマンティックHTMLを理解する
（header・nav・main・article・footer）
↓
⑦ CSSと組み合わせてスタイルをつける
各ステップで実際に手を動かしながら進めることが大切です。読むだけでは身につきません。
まとめ
- HTMLはWebページの構造を定義するマークアップ言語
- 学習に必要なのはテキストエディタ（VS Code）とブラウザだけ
- タグの基本ルール：開始タグ・終了タグのセット、入れ子の正しい書き方
- まず10個のタグを覚えれば、シンプルなWebページが作れる
HTMLの書き方に慣れてきたら、HTMLタグ一覧ページでより詳しいタグの使い方を確認してみましょう。
