1. HTMLでできることと基本ルール
HTMLの基本を学び、初めてのWebページを作成しましょう。
学習目標
- HTMLが何をするための言語かを理解する
- 基本的なHTMLの構造を理解する
- HTMLのコメントの用途について理解する
- HTMLのインデントの用途について理解する
目次
1. HTMLとは何か？
HTML（HyperText Markup Language）は、Webページを構成するためのマークアップ言語です。マークアップとは意味づけという意味です。
HTMLの役割
HTMLの役割は文章に意味づけをすることです。見出しや文章、画像、リンクなどを「この部分は見出しです」「ここはリンクです」と意味づけ（= マークアップ）します。
HTMLで意味づけをすることによってWebブラウザは画像を表示したりリンクを作成することができます。
2. HTMLの基本構造
HTMLは必ず <!DOCTYPE>, <html>, <head>, <body>
を持つ必要があります。以下が基本的なHTMLの構造です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>はじめてのHTML</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは最初のHTMLページです。</p>
</body>
</html>上から１つ１つ確認していきましょう。
| タグ | 意味 |
|---|---|
<!DOCTYPE html> |
HTML5で書かれていることをブラウザに伝える |
<html> |
HTML文書のルート（全体）を囲む |
<head> |
メタ情報（文字コード、タイトルなど）。ブラウザには表示されない |
<meta charset="UTF-8"> |
文字コードをUTF-8に指定（日本語対応） |
<title> |
ブラウザのタブに表示されるタイトル |
<body> |
実際にブラウザに表示される本文 |
<h1> |
見出し |
<p> |
段落 |
3. HTMLの要素について
要素とはHTMLの最小の単位です。
要素の基本構造
要素は開始タグ、属性、コンテンツ、終了タグで構成されています。
<開始タグ 属性="値">コンテンツ</終了タグ>次のHTMLはリンクの要素です。
<a href="index.html">これはリンクです。</a>| 意味 | コード |
|---|---|
| 開始タグ | <a> |
| 属性と値 | href="index.html" |
| コンテンツ | これはリンクです。 |
| 終了タグ | </a> |
4. インデントについて
インデントとは、コードを見やすくするために、コードを字下げすることです。半角スペース、タブ、改行などを使ってコードを字下げします。 インデントは画面には表示されませんが、コードを読みやすくするために使います。
✅インデントがあるコード
以下がインデントがあるコードです。インデントがあることで、コードの構造がわかりやすくなります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>はじめてのHTML</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは最初のHTMLページです。</p>
</body>
</html>❌インデントがないコード
以下がインデントがないコードです。インデントがないため、コードの構造がわかりにくいです。わかりやすいコードにするために、適切にインデントをつけるようにしましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>はじめてのHTML</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは最初のHTMLページです。</p>
</body>
</html>5. コメントについて
HTMLでは、コードの中にコメントを記述することができます。コメントはブラウザに表示されず、コードの説明や備忘録として使用されます。
コメントの書き方
コメントは次の形式で記述します。コメントで囲まれた部分はブラウザに表示されません。
<!-- これはHTMLのコメントです -->コメントの使い方の例
次のコードは、コメントを使ってコードの説明を記述しています。
<!-- ヘッダーセクション -->
<header>
<h1>サイトタイトル</h1>
</header>
<!-- メインコンテンツ -->
<main>
<p>ここに本文を書きます。</p>
</main>
<!-- TODO: フッターにSNSリンクを追加する -->
<footer>
<p>© 2025 私のウェブサイト</p>
</footer>コメントの役割
コメントはコードの中にコメントを記述するために使いますが、次の用途でも使われます。
- コード説明：他の開発者（または将来の自分）のために、コードの目的や動作を説明する
- デバッグ：一時的にコードの一部を無効にして、問題を特定する
- TODOメモ：後で実装予定の機能や修正箇所を記録する
コメントはブラウザで表示されませんが、ページのソースコードを表示すると誰でも読むことができます。そのため、機密情報（パスワードなど）をコメントに書かないようにしましょう。
演習問題
ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。
1. HTML構造を書いてみよう
以下のHTMLの構造をエディターに入力してみましょう！少し長いですが、自分の手で打つほうがコードは覚えやすくなります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>はじめてのHTML</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは最初のHTMLページです。</p>
</body>
</html>理解度チェック
より詳細なクイズに挑戦したい場合はこちらからクイズ問題に挑戦できます。
HTMLクイズまとめ
- HTMLはWebページの構造を定義する言語
- HTML文書は必ず
<!DOCTYPE>,<html>,<head>,<body>の構造を持つ - HTML要素は
<タグ名>内容</タグ名>の形式で書く - インデントはコードの読みやすさを向上させるために使う
- コメントはコードの説明や備忘録として使う