HTML文書の構成を理解する
HTML文書は、ブラウザが正しく読み取るための決まった構造を持っています。
画面には表示されない設定情報を記述する領域と、見える部分を記述する領域が明確に分かれています。
ここでは、HTML文書の先頭に置くDOCTYPEと、文書の設定を行うhead要素について解説します。
DOCTYPE（文書の宣言）
DOCTYPEはHTML文書の最初に記述し、ページがHTMLの仕様で書かれていることをブラウザに伝える宣言です。
構文
<!DOCTYPE html>DOCTYPE 自体は画面に表示されませんが、正しいページ解釈に必要なため必ず先頭に書きます。
html要素
html要素は文書全体を囲む最上位の要素です。
文書の使用言語を指定するlang属性を記述します。
構文
<html lang="ja">...</html>lang属性は検索エンジンや支援技術にとって重要な情報で、日本語ページではjaを指定し、英語であればenを指定します。
head要素
head要素には文書の設定情報を記述します。
ここに書いた内容は画面には表示されず、ブラウザや検索エンジンに対して必要な情報を提供します。
構文
<head>...</head>head要素の中にはtitle・meta・linkを入れるのが基本です。
title要素
title要素は文書のタイトルを表示するための要素です。
構文
<title>タイトル</title>コード例
<title>
このページのタイトル
</title>
ここで書いたタイトルはブラウザの帯に表示されます。
字数制限はありませんが、タイトルが長すぎるとブラウザの幅によっては表示しきれないため、簡潔にしましょう。
meta要素
meta要素は文書の設定・情報を伝えるための空要素です。
ここではHTMLで必ず使う代表的なmetaを扱います。
構文
<meta 属性="属性値">コード例
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ページの説明文">
コード例に記述したものは代表的な属性値と属性です。
下記に用途を記しますのでそれぞれ見ていきましょう。
| 属性名 | 属性値 | 用途 |
|---|---|---|
| charset | UTF-8 | 文書の文字コードを指定する。 |
| name | description | ページの説明文を表示する。 |
| viewport | レスポンシブの表示領域を表す。 | |
| robots | 検索エンジン制御で検索に引っかからないようにする。 | |
| content | 任意の文字列 | nameとペアで使用し、指定した設定内容を記述する。 |
link要素
link要素は外部ファイルを読み込むための空要素で、主にCSSを適用する際に使われます。
構文
<link 属性名="属性値">コード例
<link rel="stylesheet" href="style.css">relにはファイルとの関係、hrefには読み込むファイルのパスを指定します。
| 属性名 | 属性値 | 意味・役割 |
|---|---|---|
| rel | stylesheet | 読み込むファイルとの関係を示す。 |
| href | パス参照 | 読み込むファイルへのパス（場所）を指定する。 |
| type | text/css | ファイルの種類を表す。 CSSでは省略されることが多い。 |
入れ子について
まず、これまでに解説したhead要素をどう書くのかコード例を見てみましょう。
コード例
<head>
<title>タイトル</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ページの説明文">
<link rel="stylesheet" href="style.css">
</head>
headタグの中にtitle・meta・linkタグを入れています。
HTMLでは、あるタグの中に別のタグを入れて使うことができます。
これを「入れ子」または「ネスト構造」と呼びます。