「HTMLとは何か、調べても専門用語ばかりでピンとこない…」
その気持ち、痛いほど分かります。私も独学を始めた頃、同じ場所で何度も手が止まりました。
でも安心してください。HTMLとは、正しい順番で触れば1日で「自分の書いた文字がブラウザに出る」感動を味わえる技術です。現役エンジニアの私が、最短ルートで案内します。
Section 01HTMLとは？初心者向けに1分でわかる基礎知識
まずは難しい話を抜きにして、HTMLとは何かを一気に掴みましょう。ここを読めば「HTMLって結局これね」と人に説明できるようになります。
HTMLとは
HTMLとは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略です。日本語にすると「文章に意味付けをする言語」です。Webページの文章の構造を作るのがHTMLの役割です。
仕組みはシンプルです。文字を「タグ」で囲み、「これは見出し」「これは段落」と意味を付けていきます。実際に最小のコードを見てみましょう。
HTML
<h1>はじめてのHTML</h1>
<p>これは段落です。</p>表示結果は、1行目が大きな見出し、2行目が普通の文章になります。タグで囲むだけで、ブラウザが「ここは見出しだ」と理解してくれます。まずはこの「囲む」感覚を覚えれば十分です。
HTMLはプログラミング言語ではない
つまずきやすいポイントを先に潰します。HTMLはプログラミング言語ではありません。これは「マークアップ言語」という別の種類です。
プログラミング言語は計算や条件分岐をします。たとえば「在庫が0なら売り切れと出す」といった処理です。一方でHTMLは処理をしません。ただ「ここは見出し、ここは画像」と部品を並べるだけです。
だから「プログラミングは難しそう」と身構えなくて大丈夫です。HTMLは暗記より「慣れ」で進めます。まずは1つタグを書いて、ブラウザに表示してみましょう。
プログラミングとは？未経験からWebエンジニアを目指す始め方HTMLでできること
HTMLでできることは、思ったより幅広いです。代表的なものを挙げます。
- 見出しや段落で文章を整える
- 別のページへ飛ぶリンクを置く
- 画像や動画を表示する
- 箇条書きや番号付きリストを作る
- 表（テーブル）でデータを並べる
逆に、色を付けたり動かしたりはHTML単体ではしません。そこはCSSやJavaScriptの担当です。役割分担は次の章で図解します。まずは「HTMLは中身を作る係」と覚えてください。
HTML5とは
HTML5とは、現在広く使われているHTMLの規格です。2014年に標準として勧告されました。今のWeb制作は、ほぼこのHTML5がベースです。
HTML5になって、動画や音声を簡単に埋め込めるようになりました。また<header>や<footer>のように、意味の分かるタグが増えました。これを「セマンティック（意味のある）要素」と呼びます。
難しく考える必要はありません。今からあなたが学ぶHTMLは、自然とHTML5です。古い書き方を心配せず、最新の形でそのまま進めましょう。
Section 02HTML・CSS・JavaScriptの違いを図解で理解しよう
「HTMLとCSSの違いが分からない」という声はとても多いです。ここを整理すると、Web制作の全体像が一気にクリアになります。家づくりに例えて説明します。
HTMLは「骨組み」
HTMLは家でいう骨組みや間取りです。柱を立て、壁の位置を決め、部屋を作ります。Webページなら「ここに見出し、ここに画像、ここに文章」という土台です。
骨組みだけの家は、まだ殺風景です。でも骨組みがないと家は建ちません。だからWeb制作は、必ずHTMLから始まります。土台を作る感覚で書いていきましょう。
CSSは「デザイン」
CSSは家の内装や塗装にあたります。壁紙の色、文字の大きさ、余白の取り方を決めます。同じHTMLでも、CSS次第で見た目はガラリと変わります。
最小の例です。文字を赤くするCSSは次のように書きます。
CSS
p { color: red; }これだけで段落の文字が赤くなります。HTMLが中身、CSSが見た目、と覚えると混乱しません。色やレイアウトで悩んだら、それはCSSの出番です。
CSSとは？書き方とHTMLへの適用を初心者向けに解説JavaScriptは「動き」
JavaScriptは家の電気やスイッチです。ボタンを押すと反応する、メニューが開く、といった「動き」を担当します。これは正真正銘のプログラミング言語です。
たとえば「ボタンを押したら警告を出す」処理はこう書きます。
HTML
<button onclick="alert('クリックしました')">押す</button>ボタンをクリックすると、メッセージが画面に出ます。動きが欲しくなったらJavaScript、と頭の隅に置いておきましょう。
JavaScriptとは？できること・違いを初心者に解説家づくりで例える3つの役割
3つの違いを表にまとめます。役割を一目で比べてください。
| 言語 | 役割 | 家での例え | 種類 |
|---|---|---|---|
| HTML | 文章や構造を作る | 骨組み・間取り | マークアップ言語 |
| CSS | 見た目を整える | 内装・塗装 | スタイルシート言語 |
| JavaScript | 動きを付ける | 電気・スイッチ | プログラミング言語 |
3つはケンカせず、協力してWebページをつくります。HTMLがなければ始まらない、という関係です。
どれから学ぶべき？
結論はシンプルです。必ずHTMLから始めてください。骨組みがないと、デザインも動きも載せる場所がないからです。
順番はHTML→CSS→JavaScriptが王道です。私自身もこの順で学び、無理なく進みました。逆にJavaScriptから始めて挫折する人を何人も見てきました。まずはHTMLを1つ書く、ここからスタートしましょう。
Section 03HTMLを書いてみよう！5分でできるHTMLファイルの作り方
読むだけでは身につきません。ここで実際に手を動かします。特別なソフトは不要で、今あるパソコンだけで完結します。一緒に作ってみましょう。
STEP1 メモ帳またはVS Codeを開く
まずは文字を書くエディタを開きます。Windowsなら「メモ帳」、Macなら「テキストエディット」で十分です。本格的に学ぶなら、無料のVS Codeがおすすめです。
最初はメモ帳で構いません。道具より「書いて表示する体験」が先です。エディタを開いたら、次のステップへ進みましょう。
STEP2 HTMLコードを書いてみる
下のコードをそのままコピーして貼り付けてください。これがHTMLファイルの基本の形です。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのページ</title>
</head>
<body>
<h1>こんにちは</h1>
<p>はじめてのHTMLです。</p>
</body>
</html>1行目の<!DOCTYPE html>は「これはHTML5ですよ」という宣言です。<meta charset="UTF-8">は文字化けを防ぐおまじないです。今は意味を丸暗記しなくて大丈夫です。
STEP3 .htmlで保存する
ここが最大の注意点です。保存するときファイル名を「index.html」にします。拡張子を「.txt」ではなく「.html」にするのがコツです。
メモ帳の場合、「ファイルの種類」を「すべてのファイル」にしてから保存します。これを忘れると「index.html.txt」になり、表示できません。私も最初はこれで30分悩みました。
STEP4 ブラウザで表示する
保存したファイルをダブルクリックしてください。ChromeやEdgeなどのブラウザが開き、あなたの書いた文字が表示されます。「こんにちは」と大きく出れば成功です。
この瞬間が、Web制作のスタートラインです。自分のコードが画面に出る感覚を、ぜひ味わってください。1つできたら、文字を変えてもう一度表示してみましょう。
表示できないときのチェックポイント
うまくいかない時も、原因はだいたい決まっています。次を順に確認してください。
- ファイル名が「index.html」になっているか
- 拡張子が「.txt」のまま隠れていないか
- タグの
<と>を半角で書いているか - 保存し忘れていないか
9割はこのどれかです。慌てず1つずつ見直せば必ず直ります。直ったら、次は基本のタグを覚えていきましょう。
Section 04HTMLでまず覚えたい必須タグ10選
HTMLのタグは100種類以上ありますが、最初に全部覚える必要はありません。現場でも使うのは、実は一握りです。まずはこの10個に絞りましょう。
htmlタグ／headタグ／bodyタグ
この3つはページの大枠です。<html>が全体を囲み、<head>に設定情報、<body>に実際に表示する中身を書きます。
役割を一言でいうと、headは「裏方の設定」、bodyは「画面に出る部分」です。文字や画像はすべてbodyの中に書きます。この親子関係を押さえれば構造で迷いません。
h1〜h6タグ／pタグ
<h1>から<h6>は見出しです。h1が一番大きく、h6まで段階があります。<p>は段落（paragraph）で、普通の文章に使います。
HTML
<h1>大見出し</h1>
<h2>中見出し</h2>
<p>本文の文章です。</p>表示結果は、上から順に文字サイズが小さくなり、最後が普通の段落になります。見出しは文章の地図です。正しく使うとSEOにも効きます。
aタグ／imgタグ
<a>はリンク、<img>は画像です。Web制作で出番がとても多い2つです。
HTML
<a href="https://example.com">リンク先へ</a>
<img src="cat.jpg" alt="猫の写真">hrefはリンク先のURL、srcは画像の場所を指定します。altは画像が出ない時の代わりの文章です。altは目の不自由な人やSEOにも大切なので、必ず書く習慣をつけましょう。
ul・ol・liタグ
リストを作るタグです。<ul>は黒丸の箇条書き、<ol>は番号付きリスト、<li>はその中の項目です。
HTML
<ul>
<li>りんご</li>
<li>みかん</li>
</ul>表示結果は「・りんご」「・みかん」という箇条書きです。<ul>を<ol>に変えると「1. りんご」と番号になります。手順を見せたい時はol、ただの列挙はulと使い分けます。
divタグ／brタグ
<div>は「箱」です。複数の要素をまとめて、後でCSSでまとめて装飾するときに使います。意味は持たず、グループ化が目的です。
<br>は改行ですが、多用は避けます。レイアウト目的の改行はCSSで行うのが今の主流だからです。主要タグを表でも整理しておきます。
| タグ | 用途 | 書き方の例 |
|---|---|---|
| html | ページ全体を囲む | <html>〜</html> |
| head | 設定情報を書く | <head>〜</head> |
| body | 表示する中身 | <body>〜</body> |
| h1〜h6 | 見出し | <h1>見出し</h1> |
| p | 段落（本文） | <p>文章</p> |
| a | リンク | <a href="URL">文字</a> |
| img | 画像 | <img src="画像" alt="説明"> |
| ul/ol/li | リスト | <ul><li>項目</li></ul> |
| div | 要素のグループ化 | <div>〜</div> |
| br | 改行 | <br> |
この10個を使えれば、簡単なページはもう作れます。表を見ながら、実際に1つずつ書いて試してみましょう。
SEOに強いHTMLの書き方HTML初心者がよくある失敗と対処法
独学でつまずく場所は、ほぼ共通しています。私が実際にやらかした失敗も含めて、対処法とセットで紹介します。先に知っておけば、無駄に悩まずに済みます。
タグを閉じ忘れた
一番多いのがこれです。<p>で始めたら、必ず</p>で閉じます。閉じ忘れると、その後の文章まで巻き込まれて表示が崩れます。
HTML
<!-- ✕ 悪い例：閉じていない -->
<p>こんにちは
<!-- ◯ 良い例：閉じている -->
<p>こんにちは</p>対策は「開いたらすぐ閉じる」癖です。VS Codeなら閉じタグが自動で出ます。崩れたらまず閉じ忘れを疑いましょう。
全角スペースが混ざった
これは見つけにくい失敗です。タグの中に全角スペースが紛れると、正しく動きません。見た目はほぼ同じなので厄介です。
私も<img src=…>の間に全角スペースが入り、画像が出ず1時間悩みました。対策は、タグ内は必ず半角で書くこと。日本語入力をオフにして書くと防げます。
画像が表示されない
画像が出ない原因の多くは、srcのパス（場所）の間違いです。HTMLファイルと画像が別フォルダにあると、見つけられません。
まずはHTMLと画像を同じフォルダに置きましょう。そしてsrc="cat.jpg"のように、ファイル名を正確に書きます。大文字・小文字の違いも区別されるので注意です。
リンクが開かない
リンクが動かない時は、hrefの中身を確認します。URLのスペルミスや、https://の付け忘れがよくある原因です。
HTML
<!-- ◯ 正しい -->
<a href="https://example.com">サイトへ</a>ダブルクォートの閉じ忘れも崩れる原因です。引用符は必ずペアにします。落ち着いて1文字ずつ見れば、必ず原因は見つかります。
ファイル名・拡張子が違う
最初の関門がこれです。拡張子が「.html」でないと、ブラウザはただの文字として開きます。Windowsは初期設定で拡張子が隠れているので要注意です。
フォルダの設定で「拡張子を表示」をオンにしておきましょう。これだけで多くのトラブルが消えます。失敗は誰もが通る道です。1つ直すたびに確実に上達しています。
Section 06HTMLを効率よく学ぶおすすめの勉強法
基礎が分かったら、次は伸ばし方です。遠回りせず力をつける方法を、実体験を交えて紹介します。大事なのは「手を動かす量」です。
独学なら何から始める？
独学の正解は「小さく作って表示する」の繰り返しです。完璧な知識を先に詰め込もうとすると、必ず飽きます。まず1ページ作る、を目標にしましょう。
おすすめは、自己紹介ページを作ることです。見出し、文章、画像、リンクを入れれば、自然と基本タグを使います。作る目的があると、学習は驚くほど続きます。
無料学習サイトおすすめ
無料で始められる定番サービスがあります。代表的なのが「Progate（プロゲート）」と「ドットインストール」です。どちらも初心者向けで、私も入口として使いました。
Progateはスライド形式で手を動かしながら学べます。ドットインストールは短い動画で学べます。タイプが違うので、両方触って合う方を選ぶといいです。まずは無料部分から試してみましょう。
VS Codeを導入しよう
少し慣れたら、エディタをVS Codeに変えるのを強くおすすめします。無料なのに、入力補助やエラー表示が優秀です。閉じタグの自動入力だけでも作業が速くなります。
メモ帳で限界を感じたら導入のサインです。道具を整えると、学習のストレスが一段減ります。環境が整ったら、また1ページ作ってみましょう。
独学で挫折したらスクールも選択肢
独学はお金がかからない反面、つまずくと一人で抱え込みがちです。エラーが解決できず、数日止まることもあります。これが挫折の大きな原因です。
もし行き詰まったら、プログラミングスクールも選択肢です。質問できる環境とカリキュラムで、最短ルートを進めます。費用はかかりますが、時間を買う価値はあります。独学とスクール、両方のメリットを天秤にかけて選びましょう。
HTMLを書けるようになったら、次はCSSを学ぶとWebページが一気に見栄え良くなります。
また、独学で限界を感じた場合は、無料カウンセリングを受けられるスクールもあります。独学との違いはプログラミングは独学とスクールどっち？費用と挫折率で比較で比較してみてください。気になった今が、行動のタイミングです。
Section 07HTMLに関するよくある質問（FAQ）
最後に、初心者からよく聞かれる質問にまとめて答えます。気になる項目だけ拾い読みでも大丈夫です。
HTMLはプログラミング言語ですか？
いいえ、違います。HTMLは「マークアップ言語」です。計算や条件分岐をせず、文章に意味付けをするのが役割です。プログラミングと聞いて身構える必要はありません。
HTMLを書くのに特別なソフトは必要ですか？
不要です。Windowsのメモ帳でも書けます。保存して拡張子を「.html」にすれば、ブラウザで表示できます。慣れてきたら無料のVS Codeに移ると快適です。
HTMLとCSSはどちらから勉強すればいい？
必ずHTMLが先です。HTMLで土台を作ってから、CSSで見た目を整える順番が自然です。骨組みがない家を塗装できないのと同じ、と考えると分かりやすいです。
HTMLタグは全部暗記する必要がありますか？
暗記は不要です。タグは100種類以上ありますが、よく使うのは限られます。まずは本記事の10個で十分です。残りは必要になった時に調べれば問題ありません。
スマホだけでもHTMLは学べますか？
学習サイトを読むだけならスマホでも可能です。ただ、コードを書いて試すにはパソコンが圧倒的に向いています。本気で学ぶなら、パソコンの用意をおすすめします。
Section 08まとめ｜HTMLはWeb制作の第一歩
ここまでお疲れさまでした。HTMLとは、Webページの文章構造を作るマークアップ言語でした。プログラミング言語ではなく、慣れで進められる技術です。
そして大事なのは、読んで終わりにしないことです。メモ帳に数行書いてブラウザで表示する、まずこの一歩を踏み出してください。1ページ作れた人だけが、次のステージへ進めます。
HTMLの次はCSSです。デザインを学べば、あなたのページは見違えます。学習の全体像は働きながら挫折しない学習習慣ロードマップでも紹介しています。今日の一歩を、明日のスキルに変えていきましょう。
