title 要素文書のタイトルを表す
title 要素は文書のタイトルを表します。一部の条件に当てはまる場合を除いて、title 要素の記述を省略することはできません。head 要素内に、1つだけ記述する必要があります。
文書のタイトルは、検索エンジン、閲覧者のブックマークや履歴一覧などにおいて表示された場合にわかりやすいものをつけるようにしましょう。例えばウェブサイト内のすべてのページで、title 要素にサイト名しか入っていないなどというタイトルのつけかたは好ましくありません。
title 要素の仕様
- カテゴリ
- コンテンツモデル
- この要素を使用できる文脈
head 要素の子要素として。ただし、他に title 要素を入れてはいけません。
- この要素で使用できる属性
詳細説明
title 要素の省略が認められる場合
title 要素は、iframe 要素の srcdoc 属性値に入れられる文書内、もしくは別の手段でタイトル情報が提供される場合は省略可能です。
別の手段でタイトルが提供されるというのは、例えば HTML メールなどで、メールの見出しによってタイトルが提供されている時などが該当します。
meta 要素による文字コードの指定と title 要素の記述順
文書が UTF-8、UTF-16 以外の文字コードで提供されている場合、HTTP ヘッダ、または meta 要素による文字コードの指定が必要です。この時、文字コードの指定を meta 要素で行う場合は、title 要素よりも前に記述しましょう。文字コードの判別が行われる前にユニコード以外の日本語などが現れると、文字化けや、文書が正しくレンダリングされないなどの問題が起こる場合があります。
title 要素のサンプルソース
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>title 要素 | HTML5 リファレンス</title> <meta name="description" content="ページ概要" /> <meta name="keywords" content="キーワード" /> <link rel="stylesheet" href="/css/style.css" /> <link rel="icon" type="image/png" href="/img/favicon.png" /> <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="/js/script.js"></script> </head>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |