「自分だけのホームページを作ってみたい！」そんなお子さんの夢を叶える第一歩がHTML（エイチティーエムエル）の学習です。HTMLは世界中のWebサイトを構成している「言語」で、メモ帳（テキストエディタ）とブラウザさえあれば、今すぐ学び始められます。
難しそうに聞こえるかもしれませんが、HTMLの基本はとてもシンプル。「タグ」と呼ばれる記号で文章を囲むだけで、見出し・画像・リンクなど、Webページの要素を作ることができます。
この記事では、HTMLの基本的な仕組みから、お子さんが自分のWebページを作るまでのステップを丁寧に解説します。
HTMLとは？Webサイトの仕組みを知ろう
HTML（HyperText Markup Language）は、Webページの「構造」を定義するための言語です。普段見ているすべてのWebサイトは、HTMLで「見出しはここ」「画像はここ」「リンクはここ」と指定することで成り立っています。
| 用語 | 意味 |
|---|---|
| HTML | Webページの構造（骨組み）を作る言語 |
| CSS | Webページの見た目（色・配置・フォント）を決める言語 |
| JavaScript | Webページに動き（アニメーション・操作への反応）を加える言語 |
| タグ | HTMLの命令記号。<h1>や<p>など |
| ブラウザ | HTMLを読み込んでWebページとして表示するソフト（Chrome、Edgeなど） |
HTMLだけでもWebページは作れますが、CSSを組み合わせることで見た目が一気に華やかになります。最初はHTMLだけで構造を作り、慣れてきたらCSSで装飾、さらにJavaScriptで動きを付ける、という順番がおすすめです。
必要なもの：特別なソフトは不要
HTML学習を始めるのに必要なものはたった2つです。
- テキストエディタ：メモ帳（Windows標準）でもOK。おすすめはVisual Studio Code（無料）
- Webブラウザ：Chrome、Edge、Firefoxなど（既にパソコンに入っているもので十分）
高価なソフトウェアを購入する必要はありません。メモ帳にHTMLを書いて、そのファイルをブラウザで開けば、すぐにWebページとして表示されます。
つまり、実質的に必要なのはパソコン1台だけです。ブラウザとメモ帳が動けば十分なので、高性能なモデルを選ぶ必要はありません。
Visual Studio Code（VSCode）を使うと、タグの色分け表示や入力補完が使えるため、打ち間違いが減って学習効率がアップします。無料で使えるので、本格的に始めるならインストールしておきましょう。
HTMLの基本：タグの仕組みを理解する
HTMLは「タグ」で文章の意味を指定します。タグには「開始タグ」と「終了タグ」があり、囲まれた部分にその意味が適用されます。
よく使う基本タグ
- <h1>～<h6>：見出し（h1が最も大きく、h6が最も小さい）
- <p>：段落（本文テキスト）
- <a>：リンク（他のページへのリンクを作る）
- <img>：画像（写真やイラストを表示する）
- <ul><li>：箇条書きリスト
- <ol><li>：番号付きリスト
- <div>：ブロック要素のグループ化
- <span>：インライン要素のグループ化
タグは基本的に英語の略称です。h1はheading（見出し）の1、pはparagraph（段落）、aはanchor（アンカー＝つなぎ止めるもの）、imgはimage（画像）の略です。
タグの数は全部で100種類以上あります。すべてを覚える必要はありませんが、「あのタグ、何だったっけ」というときのためにタグ辞典を1冊置いておくと、検索より早く目当てのものにたどり着けます。
実践：最初のWebページを作ってみよう
ステップ1：HTMLファイルを作成する
- テキストエディタ（メモ帳またはVSCode）を開く
- HTMLの基本構造を入力する
- ファイル名を「index.html」として保存する（拡張子を .html にするのがポイント）
HTMLファイルの基本構造は「html」「head」「body」の3つのブロックから成り立っています。headにはページのタイトルや設定、bodyには実際に画面に表示される内容を書きます。
ステップ2：見出しと本文を追加する
bodyの中にh1タグで見出し、pタグで本文を追加してみましょう。保存してからブラウザでファイルを開くと、自分が書いた内容がWebページとして表示されます。
ステップ3：画像を表示する
imgタグを使えば、画像をページに表示できます。表示したい画像をHTMLファイルと同じフォルダに置き、imgタグのsrc属性にファイル名を指定します。
ステップ4：リンクを追加する
aタグを使えば、他のWebサイトや自分の別ページへのリンクが作れます。href属性にリンク先のURLを指定するだけです。
ステップ5：CSSで見た目を変えてみる
HTMLだけだと白黒で味気ないページになりがちです。CSSを使うと、文字の色・背景色・フォントサイズ・余白などを自由に設定できます。最初はstyleタグをhead内に書く「内部CSS」方式で試してみましょう。
HTMLファイルを保存するとき、文字コードを「UTF-8」にしてください。別の文字コードだと日本語が文字化けすることがあります。VSCodeなら自動的にUTF-8で保存されるので安心です。
おすすめの学習リソース
- Progate（プロゲート）：スライド＋演習形式でHTML/CSSを学べる。無料で基礎レッスンを受講可能
- 書籍「12歳からはじめるHTML5とCSS3」：子供向けに書かれた入門書。実際にWebページを作りながら学べる構成
- CBC（シービーシー）：無料で読めるHTML/CSS/JavaScript入門サイト。小学生でもわかるように解説
- YouTube：「HTML 入門 子供」「HTML 初心者 チュートリアル」で検索すると動画付き解説が多数
Progateは実際にコードを書きながら学べるスタイルで、手を動かしながら理解を深められます。無料の範囲だけでもHTML/CSSの基本は十分に学べます。
リストの2番目に挙げた書籍は、子供が1人でも読み進められるように作られています。オンライン教材と併用すると、手が止まったときの逃げ道になります。
HTML学習は何歳から？対象年齢の目安
- 小学4年生～：ローマ字入力ができればチャレンジ可能。保護者のサポートがあるとスムーズ
- 小学5～6年生：自分でテキストを入力して、保存・ブラウザ表示の操作が自力でできる年齢
- 中学生以上：CSS・JavaScriptまで含めて自走できる。独学でもWebサイトが完成する
HTMLの学習に必要な前提スキルは「キーボードでのローマ字入力」です。タイピングがスムーズにできるなら、HTMLの基本は十分に理解できます。
逆に、入力に時間がかかるうちはタグを打つだけで疲れてしまいます。先にタイピング練習ソフトで指を慣らしておくと、HTMLに入ってからの進み方が変わります。
Webサイト制作で身につくスキル
- 論理的思考力：タグの入れ子構造を正しく組み立てる力
- デザイン力：色・配置・フォントで「見やすい」「わかりやすい」を考える力
- 情報整理力：伝えたい情報を見出し・段落・リストで構造化する力
- 英語力：タグやプロパティ名を通じて英単語に触れる
- 自己表現力：自分の趣味や好きなことを世界に向けて発信する力
HTML/CSSのスキルは、将来Webデザイナー・フロントエンドエンジニア・Webマーケターなど、IT関連のさまざまな職種で活かせます。
よくある質問（Q&A）
Q. 作ったWebページをインターネットに公開できますか？
できます。GitHub Pages（ギットハブページズ）やNetlify（ネトリファイ）などの無料ホスティングサービスを使えば、作ったHTMLファイルを世界中に公開できます。ただし、個人情報を載せないよう注意が必要です。
Q. HTMLとプログラミングは違うものですか？
厳密には、HTMLは「マークアップ言語」であり「プログラミング言語」ではありません。条件分岐やループなどの計算処理はできないからです。ただし、Web制作全体（HTML + CSS + JavaScript）を学ぶ過程で、自然とプログラミング的な考え方も身につきます。
Q. スマホでもHTML学習はできますか？
技術的には可能ですが、キーボード入力が快適でないため、パソコンの使用を強くおすすめします。画面が広いほうがコードの全体像を把握しやすく、学習効率が上がります。
ノートパソコンの画面が狭いと感じるようなら、外部モニターをつないで「左にコード、右にブラウザ」と並べる方法もあります。修正した結果がすぐ横で確認できるので、作業のテンポが上がります。
まとめ
HTML学習は、特別なソフトも費用も不要で、今日からすぐに始められるのが大きなメリットです。テキストエディタでタグを書き、ブラウザで表示するだけ。この「書いたものが画面に反映される」というダイレクトな体験は、お子さんのプログラミング学習への意欲を引き出すきっかけになります。
まずはシンプルな自己紹介ページから始めて、少しずつCSSで装飾を加え、リンクや画像を追加していきましょう。「自分だけのWebサイトが完成した！」という達成感は、きっとお子さんの大きな自信になるはずです。
