HTML Living Standard/title
title 要素
[編集]<title> 要素は、文書または文書の一部のタイトルを定義します。これは、通常ブラウザのタイトルバーやタブ、ブックマーク、検索エンジンの結果などに表示されます。
概要
[編集]- カテゴリ: メタデータコンテンツ
- 使用できる文脈:
<head>要素内で必須 - 内容モデル: テキストのみ
- タグの省略: 開始タグと終了タグのどちらも省略できません
- 属性: グローバル属性をサポート
- DOMインターフェイス:
HTMLTitleElement
意味と用途
[編集]<title> 要素は、文書の主題や内容を簡潔に表現するために使用されます。このタイトルは以下の目的で使用されます：
- ブラウザのウィンドウやタブに表示
- ブックマークやお気に入りのリストに表示
- 検索エンジンの結果ページでのリンクテキストとして表示
注意: 文書には必ず1つの <title> 要素が含まれている必要があります。
使用例
[編集]- 基本的な使用例
<!DOCTYPE html> <html lang="en"> <head> <title>Example Document</title> </head> <body> <h1>Welcome to the Example Document</h1> </body> </html>
この例では、文書タイトルが「Example Document」と定義されています。このタイトルはブラウザのタブに表示されます。
- 動的タイトル変更
JavaScriptを使用して、<title> 要素の内容を動的に変更することが可能です：
<!DOCTYPE html> <html lang="en"> <head> <title>Initial Title</title> </head> <body> <button onclick="document.title = 'Updated Title';">Change Title</button> </body> </html>
この例では、ボタンをクリックすると、文書のタイトルが「Updated Title」に変更されます。
アクセシビリティの考慮事項
[編集]- タイトルは文書の内容を簡潔かつ正確に要約する必要があります。
- 長すぎるタイトルは切り捨てられることがあるため、50～60文字以内に収めることを推奨します。
- タイトルが適切でない場合、ユーザーは文書の内容を誤解する可能性があります。
ベストプラクティス
[編集]- 簡潔にする: タイトルは短く、内容を正確に反映するものにしましょう。
- キーワードの活用: 検索エンジン最適化（SEO）のため、適切なキーワードを含めましょう。
- ユニークにする: 同じサイト内でページごとに異なるタイトルを設定することで、混乱を避けることができます。
注意事項
[編集]<title>要素の内容はテキストのみです。HTML要素は使用できません。<head>内で1つだけ使用する必要があります。複数の<title>要素が存在すると、最初の要素のみが使用されます。