基本知識 2026年7月2日

【HTML基礎講座第1回】HTMLとは？基本構造と最初のウェブページ作成

HTML基礎講座全10回（第1回）

HTMLとは？Webの基本構造と最初のウェブページ作成

ウェブデベロッパーへの第一歩へようこそ！この講座では、ウェブサイトの基本である「HTML」について、未経験からでも完全に理解できるようにわかりやすく解説します。

📌 講座ロードマップ一覧（クリックで移動）

1. HTMLの役割を知ろう

私たちが普段見ているインターネット上のウェブページは、すべて複数のコードで構築されています。その中で最も根本的かつ重要な骨組みを作る役割を担っているのが HTML（HyperText Markup Language）です。

家づくりに例えるなら、HTMLは「柱や壁（骨組み）」に相当します。この上に「壁紙やインテリア（見た目）」を設定する CSS が加わり、さらに「自動ドアや照明スイッチ（動的な機能）」を動かす JavaScript が組み合わさることで、モダンなウェブページが出来上がります。

2. 「タグ」と「要素」の仕組み

HTMLは、テキストを特定の記号で囲むことによって「ここは見出し」「ここは段落」といった文書の構造を定義していきます。この囲む記号を「タグ (Tag)」と呼びます。

💡 タグの基本的な形

基本的には、テキストの開始を示す「開始タグ」と、終了を示す「終了タグ（スラッシュ `/` が入る）」でテキストを挟みます。

<p>これは段落（パラグラフ）のテキストです。</p>

この開始タグから終了タグまでの一塊を「要素 (Element)」と呼びます。HTMLはこの要素を幾重にも重ね合わせたり、入れ子にしたりしてページを作っていきます。

3. HTMLファイルの基本テンプレート

すべてのHTMLファイルには、共通する「決まった骨組み（テンプレート）」が存在します。ブラウザに「これはHTMLファイルですよ」と正しく認識させるための最小限の構造がこちらです。

図：HTML要素の入れ子関係（ツリー構造）

HTMLファイルは大きく分けて、ページ全体の基本設定を記述する head（ヘッド）要素と、実際にユーザーの画面に表示されるメインコンテンツを記述する body（ボディ）要素の2つに分かれています。

📌 各タグの役割

<!DOCTYPE html>: HTML5という最新の規格で書かれていることを宣言します。
<html>: すべての要素の親となる、HTMLの全体を囲むタグです。
<head>: ページのタイトルや文字エンコーディング設定など、ブラウザ向けの「設定情報」が入ります。画面上には直接表示されません。
<body>: テキストや画像、ボタンなど、実際に「画面上に表示されるコンテンツ」をすべてこの中に書きます。

4. 最初のコードを体験してみよう

それでは、実際にウェブブラウザに表示できる最もシンプルなHTMLコードの全体像を見てみましょう。以下のコードをコピーして、テキストエディタに貼り付け、`index.html` という名前で保存してブラウザで開くと、あなただけの最初のホームページが表示されます！

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>私の最初のホームページ</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>初めて自分で作成したウェブページです。HTMLの基本をマスターするぞ！</p>
</body>
</html>