HTML でとても大切な要素の１つ、 title 要素！どんな役割があるのか、どんなルールなのか、などなど初心に帰ってまとめてみました。
- title 要素の役割
- title 要素の使い方のルール
先に、
頭に入れておいていただきたいのは、
title 属性ではなく、
title 要素のお話です！
目次
title 要素とは
title 要素は、HTML ドキュメントの“タイトル”または“名前”を表します。
タイトルは単独で意味がわかるものに！
ページのタイトルには、文脈外で使われたとしても（履歴や検索結果で表示されたりしても）『このページが何についてのページなのか』をわかるようにします。
例えばこんな感じ。
悪い例：『ホーム』、『記事』
良い例：『HTML title 要素について – 初心者向け解説』
どちらが良いかは明白ですね！
title 要素の役割としては、上記のようにページのタイトルを決めて、ユーザーやクローラーにページの内容を伝えることです。つまりは、わかりやすい方がよいというわけです。
タイトルは h1 要素とは別物！
別物でもOK！という方が正確かもしれません。h1 要素、つまり最初の見出しは、文脈外に取り出した時に単独で意味が分からなければいけないというルールは特にありません。
例えばこんな感じ。
ページタイトル（title 要素）：『HTML title 要素について – 初心者向け解説』
最初の見出し（h1 要素）：『はじめに』
ただ、
WordPress とかのブログサービスを利用して記事を書くと自動的に記事の一番最初の見出し（h1 要素）の内容が title 要素として反映されるという設定になっている場合があるので、そこは確認が必要ですね！
それと、冒頭でも、大文字で書きましたが、
title 属性ではないので要注意！
title 要素が表示される場所
title 要素に記述した内容が見られるところはいくつかあります。
代表的な例としては、
・ブラウザのタブ
・検索結果のタイトル
・ブラウザの履歴
です。
他にもいくつかありますが、ひとまずこの辺を押さえておけば問題ないかと思います。
結構よく目に入るところに表示されるので、テキトウに“タイトル”をつけてはいけませんね！特に検索結果のタイトルは超重要です！『タイトルだけで惹きつけてやる！』という気持ちで考えましょう！！当然、ページの内容と違うタイトルはNGですが……！
title 要素のルール
title 属性は、head 要素内に記述します。そして HTML ドキュメントごと１つだけ含めるのがルールです。複数の title 要素を入れてはいけません。
０個でもいいのか？
そんなというひねくれた疑問が浮かぶかもしれませんが、基本的には title 要素を１つ入れましょう！
ただし、例外的に title 要素を入れなくてもよい場合があります。それは、その HTML ドキュメントにとって合理的に必要がないとされる場合です。具体例としては、
・「iframe」で埋め込まれたドキュメント
（親ページに依存するため、個別のタイトルが不要。）
・上位のプロトコルからタイトル情報が提供されている場合
（例えば、HTTP ヘッダーなどがタイトルを提供している場合。）
これらは少し特殊なケースなので、通常は気にせず１つ入れるようにしておけば問題ありません！初心者のうちは『１ページ１タイトル』という基本ルールを覚えておけば十分だと思います！
JavaScript を使うとき
title 要素は、JavaScript から簡単に操作できます。
紹介程度に説明を載せておきます。
JavaScript を使うとき、document.titleというプロパティを使うと、HTML ドキュメントの title 要素に簡単にアクセスできます。例えば、
例：値を取得する。title 要素の中身を取得できます。
console.log(document.title);例：値を設定する。title 要素の中身を変更できます。
document.title = "New Title";このように、
JavaScript を使って、要素のテキスト内容を取得したり、設定したりできます。
初心者のうちは『こんなこともできるんだぁ』程度に読み飛ばしてOKです！
まとめ
title 要素は、HTML ドキュメントごとに基本的に１つ記述する要素で head 要素内に記述します。記述した内容はページの“タイトル”としてユーザーやクローラーに伝わります。また、『検索結果のタイトル』や『ブラウザのタブ』などにも表示されますので、単独でも意味が分かるように内容を考えることが重要です。
参考・出典
・W3C. 「4.2.2 The title element」. https://html.spec.whatwg.org/multipage/semantics.html#the-title-element, 2024年11月26日閲覧。
・MDN. 「<title>: 文書題名要素」. https://developer.mozilla.org/ja/docs/Web/HTML/Element/title, 2024年11月26日閲覧。
