2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

head要素とは? 分かりやすく解説します!

head要素の評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.head要素とは?

 head要素はHTML文書に関するメタデータを集めたものです。

具体的にはtitle要素やmeta要素などを指定するための場所となっています。

HTML 文書の head 要素内の情報は、基本的にページが読み込まれてもWebブラウザには表示されません。

※タイトルはWebブラウザに表示されます。

head要素内によく記述するタグは以下の通りです。

  • <meta>:エンコードの種類を指定することができる
  • <title>:ページのタイトルを指定することができる
  • <link>:href属性でファイルを指定することができる




2.head要素の使い方

DOCTYPE宣言後に「<html>~</html>」を追加してHTMLの設定を記述していくことを示します。

そして、「<html>~</html>」内にWebページに関する設定の記述場所として「<head>~</head>」を用意します。

以下がhead要素のソースコード例です。

<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>head要素とは?</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
・・・・
</body>
</html>

↓↓↓↓ html要素について詳しく知りたい方は以下の記事をご覧になって下さい。

html要素とは? 分かりやすく解説します!

エンコードの種類を指定する

Webページのエンコードの種類を指定して文字化けが発生するのを防ぎます。

上記では「<meta charset=”UTF-8″>」としています。

代表的なエンコードの種類と属性値は以下の通りです。

エンコードの種類 属性値
シフトJIS Shift_JIS
EUC EUC-JP
UTF-8 UTF-8
注意点!

エンコードの種類とmetaで指定するエンコードの種類が異なるとWebブラウザで表示した時に文字化けが発生するので注意が必要です。

タイトルを指定する

head要素内に「<title>head要素とは?</title>」を追加して、Webページのタイトルを指定します。

ここではタイトルを「head要素とは?」としています。

Webブラウザで確認すると「head要素とは?」というタイトルがWebブラウザのタブに表示されます。

スタイルシートを指定する

head要素内に「<link rel=”stylesheet” href=”style.css”>」を追加することで見た目のデザインをカスタマイズできるようにします。

スタイルシートはhref属性で指定します。

スタイルシートファイルの保存場所

スタイルシートファイル「style.css」を読み込むためにはhtmlファイルと同じ階層に保存しておく必要があります。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です