ほんっとにはじめてのHTML5とCSS3：[2] タイトル（title要素）を設定しよう

[2] タイトル（title要素）を設定しよう

最終更新日：2017年10月30日　（初回投稿日：2010年09月13日）

今回はページの「タイトル」を設定してみましょう。

使用する要素	`<head> 〜 </head>` `<title> 〜 </title>` `<body> 〜 </body>`

タイトルを書いてみよう

前回の [1] テキストエディタで書いてみようで保存したファイルをブラウザで見ると、ブラウザのタブには「ファイル名」が表示されています。
本来ならここに、このページの「タイトル」が入ります。

ではまず、<html>のすぐ下に、下記のように<head> </head>と書いてみましょう。

<html>
<head>
</head>
本日は晴天なり〜！
</html>

<head>〜</head> は「head要素」。このHTML文書の情報を入れるところです。
「head」はヘッド。頭ですね。
この部分に「ページのタイトル」「文字コード」「外部ファイルのパス」「キーワード」「紹介文」など、いろいろな情報を入れることができます。

それでは、<head>〜</head>の間に、<title> </title>と書き、
さらにその中に好きなタイトルを書いてみましょう。

<html>
<head>
<title>タイトルをつけてみた！</title>
</head>
本日は晴天なり〜！
</html>

<title>〜</title> は「title要素」。
「title」はタイトル。そのまんまですね。このHTML文書のタイトルを表示させます。

ここまでを保存してブラウザでプレビューしましょう。
こんなふうに、いま書いたタイトルが表示されます。

title要素の重要性

title要素は、後日説明する h1要素（<h1>〜</h1>）よりも、検索ロボットが重要視する、第一位の要素だそうです。

例えば「ほんっとに商店」というサイトが偶然この世に2つあったとします。
一方は h1要素で商店名を書き、title要素には別の文言（「いらっしゃいませ♪」とか）を入れていたとします。
もう一方のお店は、h1要素にもtitle要素にも商店名を書いていたとします。

ここで、検索エンジンで「ほんっとに商店」と検索すると、後者の title要素に商店名を書いたサイトのほうが、キーワードの適合率が高いと判断され、上位に表示されます。

ですから title要素は重要。空欄不可。しかもキチンと考えた言葉を書こう。

body要素を書こう

「head要素」はHTML文書に関する情報を入れるところと説明しました。
「head要素」に書いた情報は「title要素」以外はブラウザで表示されません。

ウェブページとして表示される実際の内容は「body要素」の中に書きます。
「body」はボディ。体ですね。
（このように HTMLの要素は、意味がわかりやすいコトバになっています。だから覚えやすい）

body要素は、レイアウトする内容の言わば「舞台」です。
body要素に色や画像を指定する事で、画面全体の背景が変わります。
また、文字のサイズや色、行間、センター合わせか左寄せかなど、基本のレイアウト情報を指定すれば、body要素の中に書いた全部の要素に反映されます。

というわけで、<head>〜</head>の下の、[1]で書いた内容を <body> </body> で囲んでおきましょう。

<html>
<head>
<title>タイトルをつけてみた！</title>
</head>
<body>
本日は晴天なり〜！
</body>
</html>

これでだいぶ HTML文書の体裁が整ってきました。

そう言えば、HTML とは何の略？

今回「ヘッド」「タイトル」「ボディ」を使ってきましたが、そう言えば、肝心のHTML って何の略だか話していませんでした。

HTML は「 HyperText Markup Language（ハイパーテキスト　マークアップ　ランゲージ）」の略。
マークアップ言語の1つです。CSS もマークアップ言語です。あんまり使う機会はないけど XML もマークアップ言語。

じゃあ「HyperText（ハイパーテキスト）」って何だろう？
ハイパーだから「ものすごいテキスト」「超テキスト」ってかんじ？...なんて思ったら、どうもその通りみたいですw

1945年ごろ、ただのテキスト（文書）でなく、文書の中で参照されている他の文書をそのまま直接表示できる「全く新しい形の百科事典」があるといいな、という構想から生まれたらしい。もうこの時点で「紙」の文書の話じゃないですね、あきらかにコンピュータ上での話です。

で、時は流れて現在、ハイパーテキストを実装したもので最も有名なのは「World Wide Web」なんだそうです。ウェブですね。

べつに、HTML はウェブサイト専用ってわけじゃないです。例えばサーバに揚げずにローカルでブラウザで閲覧もできます（製品に付いてくるマニュアルとか）。
ただ、HTML文書はウェブ上に揚げたほうがラク（わざわざCDやDVDなどのメディアに入れて配布すると手間も金もかかる）ので、ウェブ上に揚げるのが今じゃ当たり前です。

次回予告

さて次回は <!DOCTYPE> を書きます。
これは「文書型宣言」といって、HTMLのバージョンを表します。
<!DOCTYPE> まで書けば、最低限必要なHTMLの要素（と文書型宣言）が揃ったことになります。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。