<head>について
<!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> <!-- ページのコンテンツ --> </body> </html>
HTMLは<head>タグで囲まれたヘッド部と呼ばれる部分と<body>タグで囲まれた部分で分けられます。それぞれの役割や違いは次の通りです。
| タグ | 違い |
|---|---|
| <head> | ウェブブラウザ上で表示されない メタデータを記述する |
| <body> | ウェブブラウザ上に表示される ウェブ画面に表示される内容を記述する |
ヘッド部には、メタデータを記述していきます。メタデータといわれてもよくわからないので、どのようなものを記述できるのか、具体例を見ていきます。
title
<head>タグ内で<title>タグを使用することで、ブラウザのタイトルを設定できます。
実際のウェブページを使って、見てみます。下記は Google のホーム画面のHTMLの抜粋です。デベロッパーツール（F12）を開くことで確認できます。
/!-- Google のホーム画面の<head>タグ内 --> <head> <meta charset="utf-8"> <title>新しいタブ</title> <!-- 省略 --> </head>
<title>タグで指定したタイトルはブラウザのタグの部分に表示されます。
デベロッパーツールを開き、<title>タグに書かれている文字列を変更すると、当然、ブラウザに反映されます。
メタデータ
ヘッド部には、<meta>タグを使い、メタデータを記述することができます。
/!-- Google のホーム画面の<head>タグ内 --> <head> <meta charset="utf-8"> <title>新しいタブ</title> <!-- 省略 --> </head>
上記の例では、<meta charset="utf-8">で文字コードを指定しています。
<meta>タグでは、様々なメタデータの型を提供します。今回は、簡単に次の２つを紹介します。
- name属性
- charset属性
name 属性
name 属性と content 属性を一緒に使用すると、文書のメタデータを名前と値のペアで提供することができます。 name 属性はメタデータの名前、 content 属性がその値を指定します。
<!-- 例 --> <!-- 文書の著者 --> <meta name="author" content="Tohoho"> <!-- 文書の説明 --> <meta name="description" content="HTMLリファレンス"> <!-- ビューポートの設定, スマホブラウザでも適正に表示されるように指定 --> <meta name="viewport" content="width=device-width,initial-scale=1.0">
他にも、様々なタグがあります。詳細は、下記リンク先をご覧ください。
shortcut-icon
ウェブサイトで表示されるファビコン（favicon）を設定するために、HTMLでshortcut iconを設定できます。
ファビコンは次のようなアイコンのことです。
<link rel="icon" type="image/png" href="favicon.png">
外部CSS追加する
CSSはウェブページの見た目を調整する宣言型の言語です。CSSの外部ファイルを追加する場合は、
タグ内に次のように記述します。<head> <!-- CSSの追加 --> <link rel="stylesheet" href="styles.css"> </head>
補足
主要な言語の設定
<head>タグの上の タグ部分の lang 属性を使って、主要な言語の設定ができます。
<!DOCTYPE html> <html lang="ja"> <!-- ここ --> <head> <!-- ヘッド部 --> </head> <body> <!-- ページのコンテンツ --> </body> </html>
