<title>

文書のタイトルを表す

HTML 1.0 ~ 利用可能

最終更新日: 2022.07.06

どんなタグ?
文書のタイトルや名前を表す時に使う、
名札のようなタグ。

コードサンプル
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>
      title要素のサンプルページ| HTMLリファレンス | CodeHero
    </title>
  </head>
  <body>
    <h1>ここにコンテンツが表示されます!</h1>
    <p>title要素の内容はここには表示されません!</p>
  </body>
</html>

title 要素は<title> ~ </title>で挟まれた範囲が、そのサイトやページのタイトルであることを表すタグです。
このタグはページ内に複数あってはいけません。

どのカテゴリに属しているの?
<title>タグは メタデータ・コンテンツ というコンテンツ・カテゴリに属しているタグです。
梱包できるタグは?
<title>タグに梱包できるものは、テキスト(ただし、空白のみはNG)です。

まるしサイトやページに名前をつけるタグです!

どうやって使うの?
タイトルのテキストを、
<title> タグで挟む。

<title>タグは<head>タグ内に記述して、タイトルにしたいテキストを<title></title> で挟みます。

使い方
<title>タイトルにしたいテキスト</title>
コードサンプル
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>
      title要素のサンプルページ| HTMLリファレンス | CodeHero
    </title>
  </head>
  <body>
    <h1>ここにコンテンツが表示されます!</h1>
    <p>title要素の内容はここには表示されません!</p>
  </body>
</html>
ブラウザでの表示例
https://codehero.shibajuku.net/html/title/title01/
どこでも使えるの?
<title>タグは 他にタグを含まない、head要素の子要素として 配置できるところで使えます。
気をつけることは?
  • 検索エンジンの結果ページ
  • 閲覧者のブックマーク
  • ブラウザのタブ
  • など様々なところで表示されるため、ページの内容が分かりやすいタイトルにしましょう。

まるしページの内容が分かりやすいタイトルをつけましょう!

使える属性は?
グローバル属性のみ使えます。

<title> タグには、どの要素にでも使えるグローバル属性が使えます。

まるしグローバル属性が使えますが、通常<title>タグに属性はつけません。

サンプルが見たい
<title>タグを使ったサンプルを
いくつか紹介。

<title> タグを使ったサンプルを紹介します。

基本的な<title>タグのサンプル

コードサンプル
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>
      このページのタイトル| HTMLリファレンス | CodeHero
    </title>
  </head>
  <body>
    <h1>ここに本文が入ります</h1>
  </body>
</html>
ブラウザでの表示例
https://codehero.shibajuku.net/html/title/title02/

ページ内容が分かりやすい<title>タグのサンプル

コードサンプル
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>
      title要素のサンプルページ| HTMLリファレンス | CodeHero
    </title>
  </head>
  <body>
    <h1>ここにコンテンツが表示されます!</h1>
    <p>title要素の内容はここには表示されません!</p>
  </body>
</html>
ブラウザでの表示例
https://codehero.shibajuku.net/html/title/title01/

まるしページの内容が分かりやすいように、各ページに固有のタイトルをつけるようにしましょう!

デフォルトスタイルは?
特に表示に影響する
スタイルはついていません。

Chromeで html要素を表示した場合、下記のCSSと同等のスタイルが適用されています。
その他のブラウザでは、特に指定はありません。

title要素のデフォルトスタイル
title {
  display: none;
}

まるし特に表示に影響するスタイルはありません。

対応ブラウザは?
どのブラウザでも使えます!

<title>タグは HTML1以降で利用可能で、主に以下のブラウザが対応しています。

Internet Explorar
Internet Explorar あり
Edge
Edge あり
Google Chrome
Google Chrome あり
Firefox
Firefox あり
Safari
Safari あり
Opera
Opera あり

まるしモダンブラウザは問題ありません。

このリファレンスを書いた人

まるし

まるし

アパレル勤務から、ワクワクを創造するクリエイターになるべく日々奮闘中です!! 2021年7月よりWeb制作を学び始め、 2022年1月よりShibajukuに所属しております。

About サロンメンバーで作った
リファレンスサイト

Shibajuku

Webのスキルを
ワイワイ学んで、
ガンガン活用
するサロン。

このサイトはWebクリエーター養成所
「Shibajuku」のメンバーが作った、
初心者でもわかりやすいHTML + CSSのリファレンスサイトです。

このサイトについて