【HTML入門】4.ページの情報を記述する(head要素)

前回までは、テキストや画像のように見える部分のコードを書きました。

今回は、head要素を使ってページの情報を記述していきます。

ページ全体のHTMLを書く

index.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内に入れることができます。

<link rel="icon" type="image/png" href="/favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon_180x180.png">

これは、ブラウザに表示されるアイコンを指定するコードです。

<meta name="robots" content="noindex">

name属性にrobots、content属性にnoindexを指定すると、検索エンジンにインデックスされなくなります。

Googleで検索しても、基本的にnoindexを指定したサイトはヒットしません。