<head> - メタデータの設定 | HTML5

head 要素のポイント！

<html>要素内の最初の要素として記述します。
要素内にページのタイトルやメタデータ(基本情報や概要)を記述します。
要素内に記述する内容は機械処理されるための物であり人が読むための物ではないため描画画面に表示されません。

`head`要素の概要

SUMMARY OF ELEMENT

<head>は、<html></html>内の最初の子要素として配置し、ページタイトルはじめ、ページに関する基本情報や概要、検索エンジン向けの指示やCSS、Javascriptの指定などを記述します。

このように<head>要素内の記述はブラウザや検索エンジンへの情報提供が主な役割であり、人へ向けた記述ではないため、ブラウザの描画面に表示されることはありません。（デフォルトスタイルシートにてdisplay:noneが適用されている）

<head>要素内に記述する主なメタデータとして、タイトル、ディスクリプション（概要）、外部CSS/Jsファイルの指定、検索エンジンクローラーへの指示、外部SNSへの概要提供などがあります。

`head`要素の利用例

USAGE EXAMPLE FOR ELEMENT

要素の利用例を実際のコードを見ながら覚えていきましょう。
簡単なCSSでデザインをしているものもありますが、CSSの詳細はCSSリファレンスをご覧ください。

`head`要素の基本的な利用例

ここでは、<head>の具体的な利用例を見ていきましょう。

html要素の最初の子要素としてheadが配置されます。今回の例では<title>(タイトル)<meta>（文字コードの指定とデスクリプション）<link>(外部CSSファイル指定)を配置してみました。


<!DOCTYPE html>
<html lang="ja">
  <head> <!--html内最初の子要素として配置-->
    <meta charset="utf-8">
    <title>ページタイトル</title>
    <meta name="description" content="ページの概要">
    <link href="styles.css" rel="stylesheet" type="text/css">
  </head>
  <body> <!--headに続けてbodyが配置される-->
    
  </body>
</html>

`head`要素の定義

DEFINITIONS OF ELEMENT

コンテンツ・カテゴリ

なし

要素を記述出来る場所

<html>内の最初の要素として

内包できるコンテンツ

メタデータコンテンツ
<title>は必須

開始/終了タグの省略

要素内が空である場合と、<head>内の最初の分が要素である場合開始タグ省略可能
<head>要素の直後にスペースやコメントが続かない場合は終了タグ省略可能

ボックスのタイプ

none

付与できる属性

グローバル属性

head 要素のポイント！

head要素の基本的な利用例

`head`要素の基本的な利用例