HTML要素 ・ 基本構造
<title>
ページのタイトル
ブラウザのタブや検索結果、ブックマークに表示されるページの名前です。head の中に必ず1つ書きます。
01
サンプルコード
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <title>margin の使い方 | HTML & CSS GUIDE</title>
6</head>
7<body>
8 <p>title の内容はブラウザのタブに表示されます。</p>
9</body>
10</html>
02
実行結果
ブラウザでの表示title の内容はブラウザのタブに表示されます
03
解説
title に書いた文字は、ページ本文ではなくブラウザのタブに表示されます。ブックマークしたときの名前や、検索結果の大きな見出しにも使われます。
複数のページがあるサイトでは「ページ名 | サイト名」のように、ページごとに内容がわかる名前を付けるのが一般的です。
title は head の中に1つだけ書き、中にタグは入れられません。& などの記号は & のように書きます。
04
応用例・注意点
書き方の目安
| 項目 | 説明 |
|---|---|
文字数 | 全角30文字前後。長すぎると検索結果で省略される |
順番 | ページ固有の名前を先に、サイト名を後に |
区切り | | や - などで区切る |
ページごとにタイトルを変える
同じサイト内でも、ページの内容がわかるタイトルを付けます。
HTML
1<!-- トップページ -->
2<title>HTML & CSS GUIDE</title>
3
4<!-- 詳細ページ -->
5<title><h1> 最上位の見出し | HTML & CSS GUIDE</title>
注意点
- 01すべてのページを同じタイトルにしないでください。タブや検索結果で区別できなくなります。
- 02title は画面上の見出し（h1）とは別物です。本文の見出しは h1 で書きます。