HTMLとは何か？Webページを作る仕組みを初心者向けに完全解説
生徒
「先生、HTMLって何ですか？プログラミングなんですか？」
先生
「HTMLは、Webページを作るための言語です。プログラミング言語とは少し違って、文書の構造を作る『マークアップ言語』と呼ばれるものなんですよ。」
生徒
「マークアップ言語ですか？難しそうですね…」
先生
「いえいえ、実はとてもシンプルなんです。文章に『ここはタイトル』『ここは段落』といった印をつけていくイメージですよ。それでは基本から見ていきましょう！」
1. HTMLとは何か？基本概念を理解しよう
HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略称で、Webページを作成するための基本的な言語です。世界中のWebサイトは、このHTMLを使って作られています。
HTMLの役割は、Webページの「構造」を作ることです。例えば、新聞や雑誌を思い浮かべてください。大きな見出し、小さな見出し、本文、画像などが整理されて配置されていますよね。HTMLは、Web上でこれと同じような構造を作るための言語なのです。
プログラミング言語との違いは、HTMLは「計算」や「処理」を行わない点です。HTMLはあくまで「この部分はタイトルです」「ここは段落です」といった情報を示すだけ。そのため、プログラミング未経験の方でも比較的簡単に始められるのが特徴です。
2. Webページが表示される仕組み
普段、私たちがスマートフォンやパソコンでWebページを見るとき、裏側では様々な処理が行われています。ここでは、その仕組みを分かりやすく解説します。
まず、ブラウザ（Google ChromeやSafari、Microsoft Edgeなど）を開いてURLを入力すると、インターネットを通じてサーバーという大きなコンピュータにアクセスします。サーバーは、リクエストを受け取ると、そのWebページのHTMLファイルを送り返します。
ブラウザは受け取ったHTMLファイルを読み込み、その内容を解釈して画面に表示します。この解釈する作業を「レンダリング」と呼びます。HTMLに書かれた指示に従って、文字を表示したり、画像を配置したり、リンクを作ったりするのです。
つまり、HTMLファイルは「設計図」のようなもので、ブラウザはその設計図を見ながら実際のWebページを組み立てているというわけです。
3. HTMLタグの基本的な書き方
HTMLは「タグ」という記号を使って文書の構造を定義します。タグは山括弧「<」と「>」で囲まれた記号で、多くの場合、開始タグと終了タグのペアで使用します。
基本的な形は「<タグ名>内容</タグ名>」となります。開始タグで始まり、終了タグで終わる。この間に挟まれた部分が、そのタグの影響を受ける範囲になります。例えば、段落を表すpタグなら「<p>ここに文章</p>」という形で使います。
終了タグには、スラッシュ「/」が付いているのが特徴です。これにより、ブラウザは「ここでこのタグの範囲が終わり」と認識できるのです。
<p>これは段落を表すタグです。</p>
<h1>これは大きな見出しを表すタグです。</h1>
<a href="https://example.com">これはリンクを表すタグです。</a>
4. HTMLファイルの基本構造
すべてのHTMLファイルには、決まった基本構造があります。この構造を理解することで、正しいWebページを作ることができます。
まず、一番上に「<!DOCTYPE html>」という宣言を書きます。これは「このファイルはHTML5で書かれています」とブラウザに伝えるための宣言です。次に、「<html>」タグですべてのコンテンツを囲みます。
html要素の中には、「<head>」と「<body>」という2つの重要な部分があります。headタグには、ページのタイトルや文字コードなど、ページの設定情報を書きます。これらはブラウザの画面には直接表示されません。一方、bodyタグには、実際にブラウザの画面に表示される内容を書きます。文章、画像、リンクなど、すべてこのbodyタグの中に記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私の最初のWebページ</title>
</head>
<body>
<h1>ようこそ私のWebページへ</h1>
<p>これが最初のHTMLファイルです。</p>
</body>
</html>
5. よく使う基本的なHTMLタグ
HTMLには様々なタグがありますが、まずは基本的でよく使うタグを覚えておきましょう。これらを使いこなせれば、簡単なWebページは十分に作成できます。
見出しを表すタグは「h1」から「h6」まであります。h1が最も大きく重要な見出しで、数字が大きくなるほど小さな見出しになります。段落を表す「p」タグは、文章をまとまりごとに区切るために使います。リンクを作る「a」タグは、他のページに移動するために必須です。
画像を表示する「img」タグは、終了タグを必要としない特殊なタグです。これを「空要素」と呼びます。リストを作る「ul」（順序なしリスト）と「ol」（順序ありリスト）、それぞれの項目を表す「li」タグもよく使います。
<h1>メインタイトル</h1>
<h2>サブタイトル</h2>
<p>これは段落の文章です。文章を書くときはpタグで囲みます。</p>
<img src="/img/sample150-100.jpg" alt="サンプル画像">
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
6. 属性を使ってタグに情報を追加する
HTMLタグには「属性」という追加情報を指定できます。属性は、タグの動作や見た目をより詳しく設定するために使います。
属性は開始タグの中に「属性名="値"」という形式で書きます。例えば、aタグには「href」という属性を使ってリンク先のURLを指定します。imgタグには「src」属性で画像ファイルの場所を、「alt」属性で画像の説明文を指定します。
alt属性は特に重要です。画像が表示されなかったときの代替テキストとして使われるだけでなく、視覚障害のある方が使う音声読み上げソフトでも利用されます。また、検索エンジンも画像の内容を理解するためにalt属性を参照します。
class属性やid属性は、後でCSSでデザインを指定したり、JavaScriptで操作したりするときに使う目印のようなものです。これらの属性により、HTMLはより柔軟で高機能になります。
7. セマンティックHTMLの重要性
セマンティック（semantic）とは「意味的な」という意味です。セマンティックHTMLとは、タグの意味を正しく使ってWebページの構造を作ることを指します。
例えば、「header」タグはページのヘッダー部分、「nav」タグはナビゲーションメニュー、「article」タグは記事の本文、「footer」タグはページのフッター部分を表します。これらのタグを使うことで、どこに何があるのかが明確になります。
セマンティックHTMLを使うメリットは大きく3つあります。第一に、検索エンジンがページの内容を正確に理解できるため、SEO対策に有効です。第二に、音声読み上げソフトなどの支援技術がページの構造を理解しやすくなり、アクセシビリティが向上します。第三に、コードが読みやすくなり、後からメンテナンスしやすくなります。
<article>
<header>
<h1>記事のタイトル</h1>
<p>投稿日：2026年1月9日</p>
</header>
<section>
<h2>第1章</h2>
<p>ここに本文の内容が入ります。</p>
</section>
<footer>
<p>著者：田中太郎</p>
</footer>
</article>
8. HTMLとCSS、JavaScriptの関係
Webページは、HTMLだけでなく、CSS（スタイルシート）とJavaScript（ジャバスクリプト）という技術と組み合わせて作られることが一般的です。それぞれの役割を理解しておきましょう。
HTMLは家の「骨組み」に例えられます。部屋の配置や構造を決めるのがHTMLの役割です。CSSは家の「内装」や「外装」にあたります。壁の色、床の素材、家具の配置など、見た目を美しく整えるのがCSSの仕事です。JavaScriptは家の「電気設備」や「システム」のようなもので、ドアの自動開閉やエアコンの制御など、動的な機能を追加します。
実際のWebサイト制作では、HTMLで文書の構造を作り、CSSで色やレイアウトを整え、JavaScriptで動きやインタラクティブな機能を追加します。この3つの技術を組み合わせることで、現代の魅力的で機能的なWebサイトが完成するのです。
まずはHTMLの基礎をしっかり学ぶことが、Web制作の第一歩となります。HTMLの構造が正しく書けていれば、後からCSSやJavaScriptを追加するのも簡単になります。
9. HTMLファイルの作り方と表示方法
実際にHTMLファイルを作って、ブラウザで表示してみましょう。特別なソフトは必要ありません。パソコンに最初から入っているメモ帳やテキストエディットで作成できます。
まず、メモ帳（Windowsの場合）またはテキストエディット（Macの場合）を開きます。そこにHTMLコードを書いていきます。書き終わったら、ファイル名を「index.html」のように、最後に「.html」を付けて保存します。このとき、文字コードは「UTF-8」を選ぶようにしましょう。
保存したHTMLファイルをダブルクリックすると、自動的にブラウザが開いてWebページが表示されます。もし表示されない場合は、ファイルを右クリックして「プログラムから開く」を選び、ブラウザ（ChromeやEdgeなど）を選択してください。
本格的にWeb制作を学ぶなら、Visual Studio CodeやAtomといった無料のコードエディタを使うことをおすすめします。これらのエディタには、コードを色分けして見やすくする機能や、タグの自動補完機能などがあり、効率的にコードを書けます。
10. HTMLを学ぶ上での注意点とコツ
HTMLを学習する際、いくつか知っておくと役立つポイントがあります。これらを意識することで、より効率的に学習を進められます。
まず、タグの綴りミスや閉じ忘れに注意しましょう。「<p>」で開始したら必ず「</p>」で閉じる習慣をつけてください。閉じ忘れると、レイアウトが崩れたり、意図しない表示になったりします。インデント（字下げ）を使って、タグの階層構造を視覚的に分かりやすくすることも大切です。
HTMLは大文字でも小文字でも動作しますが、現在は小文字で書くのが標準的です。統一することで、コードが読みやすくなります。また、すべてのタグを一度に覚える必要はありません。よく使うタグから少しずつ覚えていけば十分です。
実際に手を動かして、たくさんコードを書くことが上達の近道です。本やWebサイトのサンプルコードを見るだけでなく、自分でタイプして、ブラウザで表示を確認する。この繰り返しが重要です。間違えても大丈夫。試行錯誤しながら学ぶのが、プログラミング学習の王道です。
