2026年4月14日
HTMLとは何か？
みなさんは毎日スマホやパソコンでウェブサイトを見ていますよね。YouTubeや学校のホームページ、ゲームの攻略サイト……。あのページたちは、いったいどうやって作られているのでしょう？
実は、ウェブページはすべて HTML（エイチティーエムエル） というものでできています。HTMLは HyperText Markup Language の略で、「ウェブページの内容と構造を作るための言語」です。
プログラミング言語と聞くと難しそうに感じるかもしれませんが、HTMLは「文章にラベルを貼る」作業なので、プログラミング未経験の中学生でも今日から始められます。
HTMLは「プログラミング言語」とは少し違います。正確には「マークアップ言語」と呼ばれます。マークアップとは「印をつける」という意味です。文章に「ここは見出し」「ここは段落」と印をつけていく作業がHTMLです。
計算をしたり、条件で動きを変えたりする機能はありません。それはJavaScriptの役割です。HTMLはあくまで「ページの構造を作る」ことに特化しています。
HTMLを学ぶと、ウェブの仕組みが理解できるようになります。「このサイトはどうやって作られているんだろう？」という疑問に、自分で答えられるようになります。
HTMLでできること
HTMLを使うと、次のようなことができます。
- 自己紹介ページを作る：名前・好きなもの・写真を載せたページ
- 文章を見やすく整える：見出し・段落・箇条書きで読みやすくする
- リンクを貼る：クリックすると別のページに飛ぶリンク
- 画像を表示する：写真やイラストをページに埋め込む
YouTubeのトップページも、Xのタイムラインも、すべてHTMLが土台になっています。HTMLを覚えることは、ウェブのすべての出発点です。
🔗 あわせてHTMLレッスン1もチェックしてみましょう。
基本的なタグの書き方
HTMLは タグ（tag） という部品を使って書きます。タグは < と > で囲まれています。
タグの基本形
<タグ名>内容</タグ名>開始タグ <タグ名> と終了タグ </タグ名> で内容を挟みます。終了タグには /（スラッシュ）がつきます。
よく使うタグ一覧
| タグ | 意味・使い方 |
|---|---|
<h1>〜<h6> | 見出し（h1が一番大きい） |
<p> | 段落（文章のかたまり） |
<a> | リンク |
<img> | 画像の表示 |
<ul> / <li> | 箇条書きリスト |
<strong> | 太字（重要な言葉） |
コード例：見出しと段落
<h1>私の自己紹介</h1>
<p>はじめまして！中学2年生です。</p>
<p>好きなものはゲームと読書です。</p>▶ プレビュー
このコードをブラウザで表示すると、「私の自己紹介」が大きな見出しになり、その下に2つの文章が表示されます。
📖 詳しくはセマンティックタグとはで解説しています。
よく使うタグをもっと詳しく知ろう
タグ一覧で紹介したタグについて、もう少し詳しく説明します。
見出しタグ（h1〜h6）
見出しタグは6段階あります。h1が一番大きく重要な見出しです。h2はその次、h3はさらにその次です。1つのページにh1は1つだけ使うのが基本です。h2やh3は何回使っても大丈夫です。
見出しは「本の目次」のようなものです。大きな章がh2、その中の小さな節がh3、というイメージで使い分けましょう。
リンクタグ（aタグ）
aタグを使うと、クリックで別のページに飛ぶリンクを作れます。href属性にリンク先のURLを書きます。たとえば「href="https://example.com"」のように書きます。
リンクはウェブの最も重要な機能の一つです。ページとページをつなぐことで、情報のネットワークが生まれます。リンクの詳しい作り方は「HTMLリンクの作り方」で学べます。
画像タグ（imgタグ）
imgタグは画像を表示するためのタグです。他のタグと違い、終了タグがありません。src属性に画像ファイルのパスを書きます。alt属性には画像の説明を書きます。
alt属性は画像が表示されないときに代わりに表示されるテキストです。目が見えない人が使うスクリーンリーダーでも読み上げられます。必ず書くようにしましょう。
フォームタグ
formタグを使うと、ユーザーが情報を入力して送信できるフォームを作れます。アンケートやお問い合わせページで使います。フォームの作り方は「HTMLフォームの作り方」で詳しく解説しています。
HTMLを書いてみよう（ハンズオン）
実際に手を動かしてみましょう。以下の手順で、自分のウェブページを作れます。
手順1：HTMLファイルの骨組みを書く
HTMLファイルには必ず必要な「骨組み」があります。まずこれをコピーしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介ページ</title>
</head>
<body>
<!-- ここに内容を書く -->
</body>
</html>💡 各部分の意味：
<!DOCTYPE html>：「これはHTMLファイルです」とブラウザに伝える<head>：ページの設定情報（タイトルなど）を書く場所。画面には表示されない<body>：実際にブラウザに表示される内容を書く場所
手順2：bodyの中に自己紹介を書く
<body> と </body> の間に、自分の自己紹介を書いてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介ページ</title>
</head>
<body>
<h1>はじめまして！</h1>
<p>私の名前は【名前】です。</p>
<h2>好きなもの</h2>
<ul>
<li>ゲーム</li>
<li>音楽</li>
<li>プログラミング</li>
</ul>
</body>
</html>手順3：ファイルを保存してブラウザで開く
- メモ帳（Windows）やテキストエディット（Mac）に上のコードを貼り付ける
index.htmlという名前で保存する（拡張子.htmlが重要！）- 保存したファイルをダブルクリックするとブラウザで開ける
⚠️ よくあるミス：
- 終了タグ（
</h1>など）の書き忘れ - ファイル名を
index.txtで保存してしまう（.htmlにすること） - コードを書いたあとに保存を忘れる（Ctrl+S / Cmd+S）
👉 DOCTYPE宣言とはも参考にしてください。
HTMLファイルを作るためのエディタ
HTMLを書くには、テキストエディタ（文字を書くためのソフト）が必要です。おすすめのエディタを紹介します。
初心者に一番おすすめなのはVisual Studio Code（ビジュアル スタジオ コード）です。略してVSCodeと呼ばれます。無料で使えて、HTMLを書くための便利な機能がたくさんあります。
VSCodeの便利な機能を紹介します。
- タグを途中まで打つと候補が表示される（自動補完）
- タグの閉じ忘れを教えてくれる
- コードに色がついて見やすい（シンタックスハイライト）
- ファイルを保存するとすぐにブラウザで確認できる
Windowsのメモ帳やMacのテキストエディットでも書けます。でも、VSCodeのほうが圧倒的に効率がいいです。無料なので、ぜひインストールしてみてください。
もっと詳しい手順は「HTMLで最初のページを作ろう」で解説しています。エディタのインストールからページの公開まで、一歩ずつ進められます。
HTMLでよくあるミスと対策
HTMLを書いていると、思った通りに表示されないことがあります。初心者がやりがちなミスと、その対策を紹介します。
ミス1：終了タグの書き忘れ
開始タグを書いたのに、終了タグを忘れるミスです。たとえばh1タグを開いたのに閉じていないと、それ以降の文章がすべて見出しになってしまいます。タグを書いたら、すぐに終了タグも書く癖をつけましょう。
ミス2：タグのスペルミス
「paragraph」の略であるpタグを「pt」と書いたり、「strong」を「strng」と書いたりするミスです。ブラウザは知らないタグを無視するので、何も表示されなくなります。うまく表示されないときは、タグ名のスペルを確認しましょう。
ミス3：属性の引用符を忘れる
href属性やsrc属性の値は、引用符（ダブルクォーテーション）で囲む必要があります。引用符がないと、ブラウザが正しく読み取れないことがあります。
ミス4：全角スペースを使ってしまう
HTMLのコードは半角文字で書きます。日本語入力モードのまま書くと、全角スペースが混ざることがあります。全角スペースはブラウザに正しく認識されません。コードを書くときは必ず半角入力に切り替えましょう。
ミス5：ファイルの保存を忘れる
コードを修正したのにブラウザの表示が変わらないとき、保存を忘れている可能性があります。Windowsなら「Ctrl + S」、Macなら「Command + S」で保存してから、ブラウザを更新しましょう。
これらのミスは誰でもやります。大切なのは「うまくいかないときに原因を探す力」です。一つずつ確認していけば、必ず解決できます。
HTMLを学んだ後の次のステップ
HTMLだけでは、ページの見た目はシンプルなままです。文字の色を変えたり、背景色をつけたりするにはCSSが必要です。
CSSはHTMLで作った構造に「見た目」を加える言語です。HTMLが家の骨組みなら、CSSはインテリアや壁紙のようなものです。CSSの基本は「最初のCSS」で学べます。
さらにその先には、JavaScriptがあります。JavaScriptを使うと、ボタンを押したときに動きをつけたり、入力内容をチェックしたりできます。
学ぶ順番は「HTML → CSS → JavaScript」がおすすめです。この順番で進めれば、無理なくステップアップできます。焦らず、一つずつ確実に身につけていきましょう。
まとめ
- ✅ HTML はウェブページの内容と構造を作る言語
- ✅ タグ は
<タグ名>内容</タグ名>の形で書く - ✅ HTMLファイルには
<html>・<head>・<body>の骨組みが必要 - ✅ 画面に表示したいものはすべて
<body>の中に書く - ✅ ファイルは
.htmlという拡張子で保存する
HTMLの基本がわかったら、次はレッスンで実際に手を動かしながら学んでみましょう。見出し・段落・リンク・画像など、もっとたくさんのタグを使えるようになります。