Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. HTML5入門編 - タイトルを表示させてみよう

タイトルを表示させてみよう

みなさまどうもこんにちわ。

今回は『タイトル』について解説をしていきたいと思います。ちょっと前の記事でもでてきましたね。これをもっと掘り下げていきたいと思います。

まずタイトルとは何か、というとそのウェブサイトの名前(表題)のようなものになります。今表示しているブラウザのタブのあたりに注目してください。そこに文字がでてきているかと思います。GoogleChromeだと以下の部分になりますね。

この部分に出力される文字がウェブサイトのタイトルになります。タイトルを変更するにはtitle要素の中を変更する必要がありますので早速やってみましょう。

前の記事と同じように基本的なHTMLソースを用意してください。以下のソースになります。ダウンロードしたい方はこちらからどうぞ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

</body>
</html>

このhead要素の中にtitle要素があるのを確認できますでしょうか。以下の部分ですね。

<title></title>

ウェブサイトのタイトルを設定するにはこちらにお好きな文字を入れるだけで完成となります。

では実際にやってみましょう。前の記事では『Hello World』と入力しました。今回は『初めてのボクのウェブサイト』と入力してみましょう。以下のような形になります。

<title>ボクの初めてのウェブサイト</title>

これを先ほどのHTMLソースに記述し保存します。こんな感じになりますね。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボクの初めてのウェブサイト</title>
</head>
<body>

</body>
</html>

そしたらブラウザでチェックしてみましょう。

しっかりタイトルに『ボクの初めてのウェブサイト』と表示されましたでしょうか。表示されればOKです。もし表示されない場合はタグの中に空白文字などが挿入していないか、全角文字になっていないかなどしっかり確認してみましょう。

このようにタイトルの設定の記述はとても簡単なのですが、いくつかの注意点があります。

まずHTMLファイルには必ず一つのtitle要素を入れなくてはいけないというルールがあります。2ついれてしまってもダメです。

もしtitle要素を入れ忘れてしまってもページが表示されないなどという大きなバグになることはないのですがHTML文法上のルールでは間違いとなってしまいます。なので忘れないようにしっかり確認していきましょう。

もうひとつはtitle要素に入ることができるのは文字だけになります。HTMLでは画像やリンクなど様々なものが存在していますが、titleタグの中にいれてしまってはいけません。これも忘れないようにしてください。

というわけでtitle要素の解説は以上となります。

次の記事では『文字の表示』について進めていきたいと思います。引き続き頑張っていきましょう。ではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類
桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。