<head> HTMLタグの書き方

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

HEADタグの構文

HTMLの場合、タグ名は大文字と小文字のどちらでもよい。XHTMLの場合、タグ名は小文字で記述する。

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

属性

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
言語を指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定することもできる。
title
要素のタイトルを指定する。
xml:lang
XHTMLの場合に言語を指定する。

親要素

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

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

内容

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

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

サンプル

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>

JavaScript

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

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

HTMLHeadElementインタフェースのプロパティ
プロパティ 説明
accessKey DOMString head要素のaccessKey属性
contentEditable DOMString head要素のcontentEditable属性
dataset DOMStringMap head要素のカスタムデータ属性(data-*)
dir DOMString head要素のdir属性
draggable Boolean head要素のdraggable属性
innerText DOMString ノードに描画されるテキスト
lang DOMString head要素のlang属性
style CSSStyleDeclaration head要素のstyle属性
title DOMString head要素のtitle属性

HTMLタグ

参考文献

WHATWG. (2021). "The head element" HTML Living Standard