Webページを作るとき、まず必要になるのがHTMLです。HTMLは、文章の見出し、段落、リンク、画像、フォームなどを並べて、ページの骨組みを作るための言語です。見た目をきれいにする役目は別にあり、HTMLだけで完成するわけではありません。まずは「HTMLは何を決めるのか」を押さえると、Web制作の全体像がぐっと見えやすくなります。
この記事では、HTMLの意味を、タグや属性の考え方から、CSSやJavaScriptとの違い、実際の仕事でどう使うかまで順番に整理します。Webの勉強を始めたばかりでも、ページの土台がどうできるのかをイメージできるように解説します。
HTMLとは何か
HTMLは HyperText Markup Language の略です。日本語にすると「ハイパーテキストをマークアップする言語」となります。ここで大事なのは、HTMLはプログラムを動かすための言語ではなく、文章や部品に意味をつけるための言語だという点です。
たとえば、同じ文字でも「大見出し」「普通の段落」「リンク」「ボタンのように見える場所」では役割が違います。HTMLは、その役割をタグで伝えます。ブラウザはHTMLを読んで、ページの部品を理解し、画面に表示します。このときできるのが、ブラウザの中の DOM です。DOMは、HTMLをもとに作られる「ページの部品表」のようなものだと考えるとわかりやすいです。
HTMLでよく使うのは、<h1> や <p>、<a>、<img>、<ul>、<form> などです。タグの中に書く文字は、ただの飾りではありません。見出しなら見出し、段落なら段落として意味を持ちます。この「意味づけ」が、検索しやすさや読みやすさにもつながります。
よくある疑問：HTMLって、見た目をきれいにする言語ですか？
見た目を整えるのは主にCSSです。HTMLは、ページの骨組みと意味を決めます。どこが見出しで、どこが段落で、どこがリンクかを伝えるのが役割です。
HTMLは「骨組み」を作る
家づくりで考えると、HTMLは柱や間取りのようなものです。まず部屋の場所を決めないと、あとから家具を置いても使いにくいですよね。Webページも同じで、先に「何を置くか」「どの順番で並べるか」を決めます。これがHTMLの仕事です。
ここで、CSS と比べると違いがはっきりします。HTMLは骨組み、CSSは色や大きさ、余白などの見た目です。さらにJavaScriptは、ボタンを押したら動く、メニューを開く、画像を切り替えるといった動きを担当します。役割を分けると、あとで修正しやすくなります。
つまり、HTMLは「何があるか」を決める言語です。CSSは「どう見えるか」、JavaScriptは「どう動くか」を決めます。この3つがそろうと、ただの文章がWebページになります。逆に言うと、HTMLが弱いと、見た目を整えても中身が伝わりにくくなります。
身近なたとえで理解するHTML
HTMLを、学校の発表ポスターにたとえてみましょう。まず、タイトルがあります。次に、説明文があります。必要なら、写真があります。最後に、問い合わせ先や申し込み欄があります。これらを「どこに何を書くか」まで決めるのがHTMLです。
ポスターの文字色を赤にするか、写真を大きく見せるかは、HTMLではありません。そこはCSSの役目です。さらに、QRコードを読み込んだら別の内容を出す、ボタンを押したら説明を開く、といった変化はJavaScriptです。HTMLは土台なので、動きや装飾を全部担当するわけではありません。
もう少し実務に寄せると、企業のサイトでも同じです。会社概要ページなら、会社名、見出し、本文、地図へのリンク、問い合わせボタンをHTMLで並べます。採用ページなら、職種、仕事内容、応募フォームへの導線をHTMLで作ります。見た目が立派でも、見出しや段落の意味がぐちゃぐちゃだと、読み手には伝わりにくくなります。
このとき、フォームの入力欄はフォームとしてHTMLで作ります。送信ボタンを押したあと、サーバー側の返答がうまくいったかどうかは、HTTPステータスコードで確認できます。たとえば、ページが見つかれば200系、見つからなければ404系です。HTMLは入口ですが、Webの動き全体とつながっています。
実務ではこう使う
仕事でHTMLを書くときは、まず画面の設計図をざっくり決めます。次に、見出し、本文、画像、リンク、表、フォームを適切なタグで分けます。そのあとで、CSSを当てて見た目を整え、必要ならJavaScriptで動きをつけます。最初から完成形を目指すより、骨組みから作るほうがミスを減らせます。
たとえば、よくある自己紹介ページは次のように書けます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介ページ</title>
</head>
<body>
<h1>山田太郎のページ</h1>
<p>はじめまして。私はWebについて学んでいます。</p>
<a href="contact.html">お問い合わせ</a>
</body>
</html>このコードでは、<h1> がページの一番大事な見出し、<p> が段落、<a> がリンクです。lang="ja" のような属性は、ページの言語情報を伝えるために使います。属性は、タグに追加情報をつけるためのものです。タグが「箱」だとしたら、属性は「箱のラベル」のようなものです。
実務では、HTMLだけを書いて終わりではありません。たとえば、ブラウザで開いたときに文字化けしないか、見出しの順番が自然か、画像に代替テキストがあるか、キーボードだけで操作できるかを確認します。こうした細かい点は、使いやすさに直結します。見た目が同じでも、HTMLの書き方で品質は大きく変わります。
また、APIからデータを受け取って画面に出す場面では、JSON や REST API と組み合わせることもあります。HTMLで置いた箱に、JavaScriptがJSONの内容を入れて、DOM を通して表示を変える、という流れです。さらに、開発中は VS Code のようなエディタでHTMLを書くことが多いです。小さくても、毎日使う基本の道具になります。
図解で整理
HTMLファイルとブラウザ表示の対応
index.html
<h1>わたしのページ</h1>
<p>ITを勉強中です。</p>
<a href="/about/">詳しく見る</a>ブラウザに表示される画面
<h1>は大見出し、<p>は段落、<a>はリンクとして画面に対応します。
HTMLの役割は、次のように整理すると覚えやすいです。
- HTML：何を表示するかを決める
- CSS：どう見せるかを決める
- JavaScript：どう動かすかを決める
ブラウザはまずHTMLを読みます。すると、ページの構造がDOMとして組み立てられます。その後でCSSが当たって見た目が整い、JavaScriptが必要に応じてDOMを操作します。ページの完成は一度に起きるのではなく、順番に進むと考えると理解しやすいです。
たとえば、見出しタグで作った文字は、HTMLの時点で「これは見出しだ」とわかります。そこにCSSを当てると、色や大きさが変わります。さらにJavaScriptを使えば、クリックで開閉する見出しにもできます。つまり、HTMLが土台、CSSが見た目、JavaScriptが動きです。役割が重ならないように分けるのが、Web制作の基本です。
この考え方を知っていると、トラブル時も見分けやすくなります。文字の配置がおかしいならCSS、動作がおかしいならJavaScript、そもそも情報の並びがおかしいならHTMLを疑う、という切り分けができます。
3問クイズ
Q1. HTMLの主な役割として、いちばん近いものはどれでしょうか。
A. 見た目を整える
B. ページの骨組みや意味を決める
C. 画像を圧縮する
D. 通信を暗号化する
答えを見る
答え：HTMLはページの骨組みや意味を決める言語です。見た目はCSS、動きはJavaScriptの役割です。
Q2. ブラウザがHTMLを読み込んだあとに作る、JavaScriptが操作する対象はどれでしょうか。
A. DOM
B. JSON
C. REST API
D. ログ
答えを見る
答え：DOMです。ブラウザはHTMLからDOMを作り、JavaScriptはそのDOMを操作します。
Q3. ページやフォームの結果を確認するとき、200や404のような情報として見られるものはどれでしょうか。
A. CSS
B. HTTPステータスコード
C. DOM
D. VS Code
答えを見る
答え：HTTPステータスコードです。ページが正しく返ったか、見つからなかったかなどを表します。
まとめ
HTMLとは、Webページの骨組みと意味を作るための言語です。見た目を整えるCSS、動きをつけるJavaScriptとは役割が違います。まずHTMLで土台を作ると、ページの構造がわかりやすくなり、あとから修正もしやすくなります。
Webページの理解で迷ったら、「これは骨組みの話か、見た目の話か、動きの話か」を分けて考えると整理しやすいです。HTMLを押さえることは、Webの勉強を始める最初の一歩です。
