【HTML Living Standard】title要素の使い方

title要素の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月27日

基本的な使い方

title要素は、HTML文書のタイトルを表す要素です。この要素は、ウェブページのコンテンツそのものではなく、主にブラウザのタブやウィンドウのタイトルバーに表示されるテキストを設定します。また、ユーザーが特定のページをブックマークやお気に入りに追加する際に、そのページの識別名として表示されるほか、検索エンジンの検索結果ページでは、各ウェブサイトへのリンクのタイトルとして非常に重要な役割を果たします。

このtitle要素は、HTML文書ごとに一つだけ配置することが推奨されており、必ずHTML文書のメタデータ部分である<head>要素の中に記述されます。<title>タグで囲まれたテキストがタイトルとして認識され、その内容はプレーンテキストのみを含めることができます。他のHTMLタグや要素をネストして含めることはできません。

ウェブページのタイトルは、そのページの目的や内容を簡潔かつ正確に表現するべきです。検索エンジン最適化（SEO）の観点から極めて重要であり、検索結果を見てユーザーがどのページを閲覧するかを判断する上で大きな影響を与えます。そのため、ページの主要な内容を示すキーワードを含めつつ、ユーザーにとって魅力的で分かりやすいタイトルを設定することが推奨されます。例えば、ブログ記事であれば「記事のタイトル - ブログ名」、製品ページであれば「製品名 - 会社名」のように、一貫性のあるルールでタイトルを付けることが効果的です。このtitle要素の適切な利用は、ウェブサイトのユーザビリティと検索エンジンからの視認性を大きく向上させます。

公式リファレンス: <title>: The Document Title element

構文(syntax)


1<head>
2  <title>ページのタイトル</title>
3</head>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

HTML title要素でページタイトルを設定する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <!-- <title>要素は、ブラウザのタブやウィンドウのタイトル、ブックマーク名として表示されるページタイトルを設定します。 -->
7    <title>システムエンジニア向け入門ページ</title>
8</head>
9<body>
10    <h1>ようこそ！</h1>
11    <p>このページはHTMLの基本的な構造を示すサンプルです。</p>
12</body>
13</html>

HTMLのtitle要素は、ウェブページのタイトルを設定するために使用される重要な要素です。このタイトルは、ユーザーがウェブページを識別するための情報として、ウェブブラウザのタブやウィンドウのタイトルバーに表示されます。また、ユーザーがページをブックマーク（お気に入り）に登録する際の既定の名前としても使用され、検索エンジンの検索結果ページでもページのタイトルとして表示されるため、ユーザーがコンテンツの内容を理解し、アクセスしやすいページであるかを示す役割も担います。

サンプルコードでは、<title>システムエンジニア向け入門ページ</title>と記述されています。このコードにより、ウェブページを開いた際にブラウザのタブやウィンドウには「システムエンジニア向け入門ページ」という文字列が表示されます。これは、ウェブページの全体的な内容を簡潔に表現し、ユーザーにページの概要を伝えるためのものです。

title要素には、特定の「引数」や「戻り値」は存在しません。これは、title要素が特定のデータを入力として受け取って処理を行ったり、何らかの結果をプログラムに返したりする機能を持たないことを意味します。単に内側に記述されたテキストコンテンツが、そのページのタイトルとして直接利用されるというシンプルな役割を担っています。ウェブページを作成する際には、そのページの目的や内容を的確に表すtitle要素の設定が不可欠です。

title要素は、ウェブページのタイトルとしてブラウザのタブやウィンドウに表示され、ブックマーク時の名前にもなります。また、検索エンジンの結果ページにも表示されるため、ページの概要を的確に表す簡潔で分かりやすい内容を設定することが非常に重要です。この要素は必ず<head>タグ内に一つだけ配置してください。複数記述したり、<body>内に記述したりすると、ウェブページの表示や検索エンジンの評価に悪影響を及ぼす可能性があります。HTMLには他にもtitleという名前の「属性」がありますが、ページのタイトルを設定する<title>要素とは役割が全く異なりますので、混同しないよう注意しましょう。

HTML titleタグでページタイトルを設定する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <!-- titleタグは、ブラウザのタブやウィンドウのタイトルバー、検索エンジンの結果などに表示されるページのタイトルを定義します。 -->
7    <title>基本的なHTMLページのタイトル</title>
8</head>
9<body>
10    <h1>ようこそ！</h1>
11    <p>このページはHTMLの基本構造を示すサンプルです。</p>
12</body>
13</html>

titleタグは、HTML文書のタイトルを定義するために使用される要素です。このタグで設定されたタイトルは、ウェブブラウザのタブやウィンドウのタイトルバーに表示されます。また、検索エンジンがウェブページをインデックスする際にも利用され、検索結果のページで表示されるタイトルとしても非常に重要な役割を果たします。

titleタグは、ウェブページのメタ情報（ページに関する情報）を記述する<head>要素の中に配置されます。サンプルコードでは、<title>基本的なHTMLページのタイトル</title>と記述されており、これがブラウザのタブや検索結果に表示されるページの名称となります。

このtitleタグ自体には特別な引数（属性）や戻り値は存在しません。開始タグ<title>と終了タグ</title>の間に記述されたテキストコンテンツが、そのままページのタイトルとして機能します。ウェブページの目的や内容を簡潔かつ正確に表す、分かりやすいタイトルを設定することが推奨されます。

titleタグは、ウェブページのタイトルを定義する非常に重要な要素です。このタグは必ず<head>要素内に記述してください。誤って<body>内に記述しても、ブラウザによっては表示されることがありますが、これはHTMLの正しい構造ではないため、予期せぬエラーやアクセシビリティの問題を引き起こす可能性があります。

定義されたタイトルは、ブラウザのタブやウィンドウのタイトルバーに表示されるだけでなく、検索エンジンの検索結果やブックマーク登録時の名称としても利用されます。したがって、ページのコンテンツを的確に表す、分かりやすいタイトルを設定することが、ユーザー体験の向上と検索エンジン最適化（SEO）の両面で非常に重要です。簡潔かつ具体的なタイトルを心がけてください。