HTML <head>
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