<head> HTMLタグの書き方

HTML文書のヘッダであることを表します。ヘッダではHTML文書の定義を行います。

構文

HTMLの場合、html要素のタグ名及び属性名は大文字と小文字のどちらでもよい。

<HTML>
  <HEAD>
    <!-- metadata content -->
  </HEAD>
</HTML>

XHTMLの場合、html要素のタグ名及び属性名は小文字で記述する。

<html>
  <head>
    <!-- metadata content -->
  </head>
</html>

サンプル

head要素のサンプルを次に示す。

<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>タイトル</title>
  </head>
  <body>
    <!-- content -->
  </body>
</html>

属性

headタグには次の属性を指定できる。なお、HEADタグの属性は、すべて省略可能である。

accesskey
要素に対するショートカット・キーを指定する。空白で区切って複数のキーを指定することもできる。
autocapitalize
ユーザーが入力または編集したときに、入力文字列の大文字化を自動的に行うかどうかを指定する。
autocapitalize属性
説明
off 自動的な大文字化は行わない。
on 最初の文字を大文字にする。
words 各単語の最初の文字を大文字にする。
characters すべての文字を大文字にする。
class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定することもできる。
contenteditable
ユーザーによる要素の編集が可能かどうかを指定する。
contenteditable属性
説明
true 要素を編集できる。
false 要素は編集できない。
data-*
カスタムデータ属性を指定する。「data-」の接頭辞に続く属性名は、任意の文字列を指定できる。
dir
dir属性には、文章の流れる方向を指定する。
dir属性
ltr 左から右へ記述する (日本語や英語など)
rtl 右から左へ記述する (アラビア語など)
auto ユーザーエージェントに決定させる
draggable
要素をドラッグすることができるかを指定する。
id
HTML文書内で一意な識別子を指定する。ただし、HTML文書内にhead要素はひとつしか存在しないので、識別子が無くても特定できる。
lang
言語を指定する。
onblur
要素がフォーカスを失ったときに実行する JavaScript を指定する。
onchange
テキストが変更選択されたときに実行する JavaScript を指定する。
onclick
要素をクリックしたときに実行する JavaScript を指定する。
oncontextmenu
要素でコンテキストメニューを開いたときに実行する JavaScript を指定する。
ondblclick
要素をダブルクリックしたときに実行する JavaScript を指定する。
onfocus
要素がフォーカスを得たときに実行する JavaScript を指定する。
onkeydown
要素でキーを押下したときに実行する JavaScript を指定する。
onkeypress
キーを押したときに実行するスクリプト JavaScript を指定する。
onkeyup
要素でキーを離したときに実行する JavaScript を指定する。
onmousedown
要素をマウスのボタンを押下したときに実行する JavaScript を指定する。
onmousemove
マウスポインタを要素内で動かしたときに実行する JavaScript を指定する。
onmouseout
マウスポインタを要素内から要素外に動かしたときに実行する JavaScript を指定する。
onmouseover
マウスカーソルが乗ったときに実行する JavaScript を指定する。
onmouseup
マウスのボタンを押下した後で離すときに実行する JavaScript を指定する。
onselect
テキストが(部分的にでも)選択されたときに実行する JavaScript を指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定することもできる。
title
ツールチップに適した要素のアドバイザリ情報を指定する。
xml:lang
XHTMLの場合に言語を指定する。

親要素

head要素の親要素はhtml要素である。

<html>
  <head>
    <!-- metadata content -->
  </head>
</html>

内容

head要素の内容には、必ずtitle要素を含める必要がある。

title要素の他にもメタデータコンテンツを内容に含めることができる。具体的には次の要素である。

カテゴリ

head要素はどのカテゴリにも属さない。

JavaScript

JavaScriptからはHTMLHeadElementインタフェースでhead要素にアクセスできる。

HTMLHeadElementインタフェースは次に示すプロパティを持つ。

accessKey
head要素のaccessKey属性
contentEditable
head要素のcontentEditable属性
dataset
head要素のカスタムデータ属性(data-*)
dir
head要素のdir属性
draggable
head要素のdraggable属性
innerText
ノードに描画されるテキスト
lang
head要素のlang属性
style
head要素のstyle属性
title
head要素のtitle属性

HTMLタグ

参考文献

Web Hypertext Application Technology Working Group (2022) "The elements of HTML" HTML Living Standard