HTMLはWebページの意味づけをするマークアップ言語で、必要なのはテキストエディタとブラウザの2つだけです。index.html作成から表示までの手順、最初に覚えるタグ10選と学習ロードマップを整理します。
この記事でわかること
- HTMLとは何か、3行でわかる本質（マークアップ言語＝意味づけの言語）
- 学習に必要なものはテキストエディタとブラウザの2つだけ
- 最初のHTMLファイル（
index.html）を作って表示するまでの手順 - タグの書き方ルールと、最初に覚えるHTMLタグ10選
- 初心者がつまずくよくある間違いと、最短の学習ロードマップ
公的情報源: 総務省「国民のためのサイバーセキュリティサイト」（参照）／ W3C「HTML Standard」
結論を先に書きます
HTMLは、Webページの構造と内容を定義するマークアップ言語です。プログラミング言語ではなく、「これは見出し」「これはリンク」と意味づけするための言語と考えると、最初の理解がぐっと楽になります。
学習に身構える必要はありません。必要なのはテキストエディタ（VS Code）とブラウザの2つだけ。特別な環境構築もインストール作業もなく、今日この瞬間から書き始められます。
- HTMLはマークアップ言語。タグでページの構造に意味を与える
- 準備するのはVS Codeとブラウザだけ。費用も環境構築も不要
- タグは開始タグ・終了タグのセットが基本。入れ子は内側から閉じる
- まず10個のタグを覚えれば、シンプルなWebページが作れる
この記事は、はじめてHTMLに触れる方へ向けて、用語の意味から最初のファイル作成、学習の順序までを順を追って整理します。読むだけで終わらせず、手元で実際に書きながら進めるのがおすすめです。
HTMLとは何か（3行でわかる）
まず結論から。HTMLはWebページの構造を定義する言語で、プログラミング言語ではありません。要点を3行に絞ると次のとおりです。
- HyperText Markup Language の略
- Webページの構造と内容を定義する言語
- プログラミング言語ではなくマークアップ言語（意味づけの言語）
ブラウザはHTMLを読み取り、「これは見出し」「これはリンク」「これは画像」と解釈して画面に表示します。つまりHTMLの役割は、コンテンツに意味のラベルを貼ることです。
「言語」と聞くと身構えますが、計算やロジックを書くわけではありません。意味の構造を組み立てる作業なので、初心者でも一歩ずつ着実に進められます。HTMLの全体像をもう少し知りたい方は、HTMLとは何か（初心者向け解説）もあわせてご覧ください。
HTMLを書くのに必要なもの
HTMLを書くために特別なソフトは必要ありません。用意するのは次の2つだけです。
| 必要なもの | 役割 | おすすめ |
|---|---|---|
| テキストエディタ | コードを書くためのソフト | VS Code（無料） |
| Webブラウザ | 書いたHTMLの表示を確認 | Chrome／Edge／Safari |
1. テキストエディタ
コードを書くためのソフトです。初心者にはVS Code（無料）がおすすめになります。
- Visual Studio Code（無料・Windows／Mac／Linux対応）
メモ帳でも書けますが、VS Codeはコードをカラフルにハイライトしてくれます。ミスに気づきやすく、補完機能で入力も速くなるため、最初の1本から導入しておくと学習がスムーズです。
2. Webブラウザ
作成したHTMLを確認するためのブラウザです。Chrome・Edge・Safariなど、普段使っているもので問題ありません。書いたファイルをブラウザで開いて、表示を確認しながら進めます。
はじめてのHTMLファイルを作ろう
準備ができたら、さっそく最初のHTMLファイルを作ります。手順は次の3ステップです。
- ファイルを作成する（
index.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> この DOCTYPE・html・head・body の組み合わせがHTMLの土台です。それぞれの役割はHTMLの基本構造の解説で詳しく整理しています。
STEP3：ブラウザで確認する
保存した index.html をダブルクリックするとブラウザで開きます。「こんにちは！」という見出しと2つの段落が表示されれば成功です。
画面に文字が出た瞬間が、HTML学習のいちばん楽しいポイント。ここまで来れば、あとはタグを少しずつ増やしていくだけです。
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選
タグは数百種類ありますが、最初から全部覚える必要はありません。まずは下の10個を押さえれば、シンプルなWebページが組めます。
| タグ | 読み方 | 役割 |
|---|---|---|
<h1>〜<h6> | エイチワン〜 | 見出し（数字が大きいほど小さい見出し） |
<p> | ピー | 段落（テキストのまとまり） |
<a href="URL"> | エー | リンク |
<img src="URL" alt="説明"> | イメージ | 画像 |
<ul> / <li> | リスト / リストアイテム | 箇条書き |
<div> | ディブ | 汎用のブロック要素（グループ化） |
<span> | スパン | 汎用のインライン要素（テキストの一部に適用） |
<strong> | ストロング | 重要な強調（太字） |
<br> | ビーアール | 改行 |
<header> <main> <footer> | — | ページの構造（セマンティック） |
リンクの細かい書き方はaタグの使い方、画像はimgタグの使い方、改行の使い分けはHTMLの改行方法で深掘りできます。さらに全タグを一覧で見たい場合はHTMLタグ一覧が便利です。
HTMLを書くときのよくある間違い
初心者がつまずきやすいポイントは、ほぼ3つに集約されます。先に知っておくと、レイアウト崩れの原因を早く特定できます。
① 終了タグ忘れ
終了タグを忘れると、以降のレイアウトが崩れる原因になります。開始タグを書いたら終了タグも必ずセットで書く習慣をつけましょう。
<!-- × 終了タグを忘れると以降のレイアウトが崩れる --> <p>段落1 <p>段落2</p>
<!-- ○ --> <p>段落1</p> <p>段落2</p>
② alt属性の省略
画像の alt 属性は、SEO・アクセシビリティ上どちらでも重要です。画像が表示できないときの代替テキストにもなるため、必ず記述します。
<!-- × SEO・アクセシビリティ上NG --> <img src="photo.jpg">
<!-- ○ alt属性は必ず記述 --> <img src="photo.jpg" alt="東京タワーの夜景">
③ h1を複数使う
<h1> は1ページに1つが基本です。複数並べると見出しの階層が崩れ、検索エンジンにも構造が伝わりにくくなります。
<!-- × 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と組み合わせてスタイルをつける
各ステップで実際に手を動かしながら進めることが大切です。読むだけでは身につきません。ステップ④のテーブルはtableタグの書き方で、ステップ⑦のスタイル付けはCSSとは何かで、それぞれ次の一歩に進めます。
なお、書いたHTMLがどうやってブラウザに表示されるのかという裏側の仕組みは、HTMLが表示される仕組みで解説しています。
よくある質問
HTMLをはじめて学ぶ方から、よく寄せられる質問をまとめました。
Q1：HTMLはプログラミング言語ですか？
いいえ、マークアップ言語です。計算や条件分岐などの処理を書くプログラミング言語とは異なり、HTMLはコンテンツに「これは見出し」「これはリンク」と意味づけする言語です。
そのため、プログラミング未経験の方でも比較的とっつきやすいのが特徴になります。
Q2：学習にお金はかかりますか？
基本的にかかりません。テキストエディタのVS Codeもブラウザも無料で使えます。
有料の教材やスクールもありますが、まずは無料の環境で手を動かし、HTMLの感覚をつかむところから始めるのがおすすめです。
Q3：最初にどのタグから覚えればいいですか？
見出し（h1〜h6）と段落（p）から始めると無理がありません。本記事の「最初に覚えるHTMLタグ10選」の順に触れていけば、シンプルなページが作れます。
一度に全部覚えようとせず、使いながら少しずつ増やしていくのが定着の近道です。
Q4：HTMLだけでWebサイトは作れますか？
作れますが、見た目の装飾はCSSが必要です。HTMLは構造を担当し、色やレイアウトなどの見た目はCSSが担当します。
まずHTMLで骨格を作れるようになり、その後CSSを学ぶと、デザインを自由に整えられるようになります。
Q5：どれくらいで基本を習得できますか？
個人差はありますが、基本のタグだけなら数日〜数週間が目安です。重要なのは学習時間の長さより、実際に手を動かした回数になります。
小さなページを何度も作って、タグの使い方を体に覚えさせるのが効率的です。
まとめ
最後に、この記事の要点を整理します。
- HTMLはWebページの構造を定義するマークアップ言語
- 学習に必要なのはテキストエディタ（VS Code）とブラウザだけ
- タグの基本ルールは開始タグ・終了タグのセットと、入れ子の正しい書き方
- まず10個のタグを覚えれば、シンプルなWebページが作れる
- 学習は読むだけでなく手を動かすことが定着の近道
HTMLの書き方に慣れてきたら、より詳しいタグの使い方をHTMLタグ一覧で確認してみましょう。次のステップとしてCSSとは何かに進むと、見た目を自由に整えられるようになります。
学習の全体像を確認したい方へ。HTMLの基本構造から順にたどると、最短で理解が進みます。
免責事項
※本記事はHTML学習の入門情報を整理したものです。各ソフトウェアの仕様・最新版の挙動は変更される場合があるため、利用時は公式サイトの最新情報をご確認ください。
