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

最終更新日:2017年09月12日  (初回投稿日: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の要素(と文書型宣言)が揃ったことになります。

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.