基本的な HTML の構文
HTMLの構文をゼロから理解する
HTMLの例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>私のテストページ</title>
</head>
<body>
<p>これは私のページです。</p>
</body>
</html>
HTML要素の構成 (1)
HTMLの文章は、<p> のように < と > で囲まれた文章がたくさん登場します。
これをHTMLの「要素」と呼び、要素は 開始タグ、内容、終了タグの3つで構成されます。
- 開始タグ: 要素の始まり（例:
<p>）
- 内容: 実際に表示されるテキストなど
- 終了タグ: 要素の終わり。スラッシュ
/ が付きます（例: </p>）
<p>
私の猫はめっちゃかわいい！
</p>
構造: <タグ名> 内容 </タグ名>
HTML要素の構成 (2)
開始タグ、終了タグはブラウザでページを見た時に表示されませんが、ブラウザに対して「この内容は xxx のために使うよ」ということを伝えます。
例えば、 <h1> は「この内容は "見出し" のために使うよ」ということを表し、<p> は「この内容は "段落" のために使うよ」という意味になります。
<h1>猫の紹介</h1>
<p>私の猫はめっちゃかわいい！</p>
HTML要素の属性 (1)
要素に追加の情報を与えるものを「属性」と呼びます。
開始タグの中に記述します。
書き方のルール:
- 属性名と値の間は
= でつなぐ
- 値は引用符（
" または '）で囲む
- タグ名と属性の間はスペースを空ける
例: class 属性が note, id 属性が editor-note となる場合:
<p class="note" id="editor-note">
編集者のメモです。
</p>
HTML要素の属性 (2)
値が省略できる属性もあり、論理属性と言います。
例:
<button disabled>
このボタンは無効
</button>
HTML要素と属性について調べるには
HTML要素によって、利用できる属性が異なります。
また、属性にどういった値が使えるのかなども異なり、すべて覚えるのは現実的ではありません。そのため、こうした情報は必要に応じて都度調べましょう。
- MDNのwebサイト は、Webの技術に関する情報源として最も信頼できるWebサイトの一つです。
- 検索時に
mdn {要素名} や mdn {属性名} のようにすると、その要素・タグや属性について解説するMDNのページがヒットするので、ぜひMDNのwebサイトから情報を調べる癖をつけましょう。
HTMLのコメント
ブラウザには表示されないメモをコード内に残すことができます。
<!-- で始まり --> で終わります。
<p>ここは表示されます。</p>
<!-- ここはコメントなのでブラウザには表示されません。
コードの説明や、一時的にコードを無効化する際にて使います。 -->
<p>ここも表示されます。</p>
タグの入れ子構造
要素の中には別の要素を入れられます。
- 要素を含んでいる要素を親要素、要素に含まれる要素を子要素、というふうに呼ぶことがあります
- 子要素の開始タグから終了タグまで、すべて親要素の中に入るように記述します
正しい例 ✅
<!-- strong要素がp要素の中に入っている -->
<p>My cat is <strong>very</strong> grumpy.</p>
間違った例 ❌
<!-- p要素が閉じる前にstrong要素が閉じていない -->
<p>My cat is <strong>very grumpy.</p></strong>
空要素
内容（コンテンツ）を持たない要素を「空要素」と呼びます。
これらは終了タグを記述しません。
代表的な例: 画像を表示する <img> タグ
<!-- imgタグは終了タグが不要 -->
<img src="https://example.com/image.jpg" alt="画像の説明">
※ <img ... /> と書くこともできます。
HTML全体で必要な要素
<!DOCTYPE html>, <html>, <head>, <body> はすべてのHTMLページに必要となる要素です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>私のテストページ</title>
</head>
<body>
<p>これは私のページです。</p>
</body>
</html>
<!DOCTYPE html> - 文書型宣言
HTML文章の最初の行に記述する、ということだけ最低限覚えていれば良いです。
「なぜこれが必要なのか？」をざっくり記載すると:
- HTMLの仕様はこれまで何度も変わってきているため、古い仕様で書かれたHTMLのページもまだたくさん残っている
- そのため、ブラウザは古い仕様で書かれたHTMLも読めるようにしないといけない
- ブラウザが「そのページが古い仕様で書かれたものか、最新の仕様で書かれたものか」判断するために
<!DOCTYPE html> の有無を見ている
<!DOCTYPE html>
<html> - HTML文書のルート要素
HTMLページ全体を囲むルート要素（最上位の要素）です。
<!DOCTYPE html> の後に記述します- すべてのHTML要素は
<html> 要素の中に配置されます
lang 属性で文書の言語をブラウザに伝えられます
<html lang="ja"> で「このページは日本語で書かれています」という意味になります- ブラウザの自動翻訳機能など、ブラウザがその言語を理解する必要がある際に使われます
<html lang="ja">
<!-- ここにすべてのHTML要素が入ります -->
</html>
<head> - ページのメタデータを格納する要素
ページに関するメタデータ（ページに関する情報）を格納する要素です。
- ページのコンテンツとして表示されるデータではないですが、ページの重要な情報を含む要素を格納します。
<head> の中のHTML要素の例:
- 文字エンコーディングの指定 (例:
<meta charset="utf-8">)
- ブラウザのタブに表示されるページタイトル (
<title>)
- CSSやJavaScriptのリンク
<head>
<meta charset="utf-8">
<title>私のテストページ</title>
</head>
<body> - ページコンテンツのコンテナ
ブラウザに実際に表示される内容を格納する要素です。
- ユーザーが見るすべてのコンテンツ（テキスト、画像、リンクなど）は
<body> 要素の中に記述します
<head> 要素の後に記述します
<body>
<h1>見出し</h1>
<p>段落のテキスト</p>
<img src="画像.jpg" alt="説明">
</body>
HTMLのホワイトスペース
HTMLでは、連続する半角スペースや改行は、ブラウザでの表示時に1つのスペースにまとめられます（無視されます）。
コードを見やすく整形（インデント）するために使われます。
<!-- コード上では改行やスペースがたくさんあるが... -->
<p>
Dogs are
silly.
</p>
ブラウザでの表示結果:
Dogs are silly.
特殊な文字の表示（文字参照）
「じゃあ、たくさんスペースを表示させたい場合はどうする？」
「< や > を文字として表示したい場合は？」
→ 文字参照（実体参照） という特殊なコードを使います。
例えば、 "< >" と表示したい場合は以下のように書きます。
<p>
<!-- スペースは で、< は <、> は > で表す -->
< >
</p>
※ こういう方法がある、ということを覚えていれば、書き方を覚えている必要はありません！
まとめ
- HTML要素は開始タグ、内容、終了タグの3つで構成される
- 属性は要素に追加情報を与えるもので、開始タグ内に記述する
- HTML要素や属性の詳細はMDNで正確な情報が調べられる
- HTMLコメントは
<!-- --> で記述し、ブラウザには表示されない
- タグは入れ子構造を持つことができる
- 空要素は内容を持たず、終了タグを記述しない
- HTML文書には
<!DOCTYPE html>、<html>、<head>、<body> の基本構造が必要
- HTMLでは連続する半角スペースや改行は1つのスペースにまとめられる