前回までは、テキストや画像のように見える部分のコードを書きました。
今回は、head要素を使ってページの情報を記述していきます。
ページ全体のHTMLを書く
index.htmlのコードを一旦全て削除し、以下のように記述してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページのタイトル</title>
</head>
<body>
<p>テキスト</p>
</body>
</html><!DOCTYPE html>は、この文書がHTMLであるという宣言文です。
HTMLはhtmlタグの中に書くきまりになっていますので、（宣言を除く）全体をHTMLタグで囲みます。
lang属性にはページの言語を入れます。ここでは日本語を指定しています。
head要素には、ページの情報を記述します。これはこの後解説します。
pタグやimgタグのようなコンテンツは、bodyタグの中に記述していきます。
head要素
head要素には、ページの情報を記述します。head要素の中身を一つ一つ見ていきましょう。
metaでページの情報を指定できます。
charset属性はこのファイルの文字コードです。
index.htmlを開いた上でVisual Studio Codeの右下に、「UTF-8」と書かれているはずです。Visual Studio Codeでは、デフォルトでUTF-8の文字コードでファイルが保存されるようになっています。
charset属性に「Shift_JIS」のように、ファイルの文字コードと異なる文字コードを指定してしまうと、文字化けが発生してしまいます。
現在ではUTF-8が主流ですので、ファイルの保存もcharset属性もUTF-8にしておきましょう。
<meta name="viewport" content="width=device-width, initial-scale=1.0">この記述は、コンテンツの幅をデバイスの幅に合わせる設定です。PCやスマホ、タブレットでサイトを閲覧する時代ですので、ほぼ必須です。
このコードは覚える必要はなく、コピペで使ってください。
<title>ページのタイトル</title>titleタグには、ページのタイトルが入ります。
ブラウザのタブや、Google検索の検索結果一覧などに表示されます。
他にも、以下のような情報をhead内に入れることができます。
<meta name="description" content="ここにページの説明が入ります。">この記述は、一般的にメタディスクリプションと呼ばれており、ページの説明をするコードです。
主にGoogle検索の検索結果一覧に表示させるために使います。
Google検索でクリック率を左右するので、ページの内容が分かる具体的な説明を入れるようにしましょう。
<meta name="robots" content="noindex">name属性にrobots、content属性にnoindexを指定すると、検索エンジンにインデックスされなくなります。
Googleで検索しても、基本的にnoindexを指定したサイトはヒットしません。