音声スライド （クリックで展開／閉じる）
はじめに
- HTML ファイル作成の復習
- タグと属性の書き方を学ぶ
- HTML 文書の基本構造を書けるようになる
前回の単元では、HTML ファイルを作成してブラウザで表示を確認する体験をしました。この単元では、タグと属性の具体的な書き方を学び、さらに HTML 文書に欠かせない基本構造を自分の手で書けるようになることを目指します。
要素とタグの基本
- HTML は「タグ」で内容を囲んで意味を持たせる
- 開始タグと終了タグのペアで1つの「要素」になる
- 終了タグは開始タグに「/」を付けた形になる
HTML では、タグと呼ばれる目印で内容を囲むことで、その内容に意味を持たせます。多くの場合、開始タグと終了タグのペアで1つのまとまりを作り、これを要素と呼びます。終了タグは、開始タグの見た目にスラッシュを1つ加えた形で書きます。
タグの書き方の例
実際にタグを使うと、このように書きます。段落を表す p 要素は、開始タグの後に文字列を書き、最後に終了タグを置くことで、ひとまとまりの要素になります。
属性とは何か
- タグには追加情報となる「属性」を指定できる
- 属性は名前と値の組み合わせで書く
- 1つのタグに複数の属性をつけることもできる
タグには、その要素についての追加情報を持たせることができます。この追加情報を属性と呼びます。属性は、属性名とその値の組み合わせで書き、開始タグの中に指定します。1つのタグには、複数の属性を同時に指定することもできます。
属性を使ったリンクの例
属性の具体例として、リンクを作る a 要素を見てみましょう。href 属性に、リンク先の URL を指定すると、そのアドレスへ移動するリンクになります。属性の値は、必ず引用符で囲んで書きます。
HTML 文書の全体構造
HTML 文書全体は、木のような入れ子構造になっています。文書の一番外側を html 要素が囲み、その中に head 要素と body 要素が並んで入ります。head 要素には画面に表示されないメタ情報を書き、body 要素には画面に表示される内容を書きます。
DOCTYPE 宣言の役割
- 文書の一番先頭に書く宣言
- この文書が HTML5 で書かれていることをブラウザに伝える
- 決まり文句として、そのまま書けば良い
DOCTYPE 宣言は、HTML 文書の一番先頭に書く宣言です。この文書がどのバージョンの HTML で書かれているかをブラウザに伝える役割があります。今回学ぶ書き方では、決まり文句としてそのまま書けば十分です。
文書を構成する主要な要素
| 要素 | 役割 |
|---|---|
| html | 文書全体を囲む要素 |
| head | 画面に表示されないメタ情報を書く場所 |
| body | 画面に表示される内容を書く場所 |
html 要素は文書全体を囲む最も外側の要素です。head 要素には、文字コードやタイトルなど、画面には表示されないメタ情報を書きます。body 要素には、実際に画面に表示される内容を書きます。
文書の骨組みを書く
ここまで学んだ内容をまとめると、HTML 文書の骨組みはこのようになります。DOCTYPE 宣言から始まり、html 要素の中に head 要素と body 要素が並びます。次回以降、body の中に実際のコンテンツを追加していきます。
まとめ
- タグは開始タグと終了タグのペアで要素を作る
- 属性はタグに追加情報を持たせる仕組み
- HTML 文書は DOCTYPE 宣言と html 要素（head と body を含む）でできている
この単元では、タグと属性の書き方を学びました。開始タグと終了タグのペアが1つの要素になり、属性はタグに追加情報を持たせる仕組みでした。さらに、HTML 文書は DOCTYPE 宣言から始まり、html 要素の中に head 要素と body 要素が並ぶという骨組みを持つことを確認しました。次回は、この骨組みに具体的な内容を加えていきます。
