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

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

タイトルを書いてみよう

[1] で保存したファイルをブラウザで見ると、
ファイルの左上にはブラウザ名、ダブにはファイル名が表示されています。
本来ならここに、このページのタイトルが入ります。
ブラウザでプレビュー

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

<html>
<head>
</head>
本日は晴天なり〜!
</html>
<head> </head>は「head要素」。このHTML文書に関する固有情報を入れるところです。
タイトルや文字コード、外部ファイルのパス、キーワード、紹介文などの情報が入ります。


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

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

<title> </title>は「title要素」。このHTML文書のタイトルを表示します。
ここまでを保存してブラウザでプレビューします
こんなふうに、先程の部分に、今書いたタイトルが表示されますね。
ブラウザでプレビュー

title要素の重要性

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

例えば「yuki★hata商店」というサイトが偶然この世に2つあったとします。
一方はh1要素で商店名を書き、title要素には別の文言(いらっしゃいませ、とか)を入れていたとします。
もう一方のお店は、h1要素にもtitle要素にも商店名を書いていたとします。
ここで、検索エンジンで「yuki★hata商店」で検索すると、後者のtitle要素に商店名を書いたサイトのほうが、キーワードに対する適合率が高いと判断されて、上位に表示されます。

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

body要素を書こう

「head要素」はHTML文書に関する固有情報を入れるところと説明しました。
「head要素」に書いた情報は「title要素」以外はブラウザでプレビューされません。
プレビューされる実際の内容は「body要素」のなかに書きます。

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

それでは、<head> </head>の下の、[1]で書いた内容を<body> </body>で囲みましょう。

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

これでだいぶHTML文書の体裁が整ってきました。
次回は <!DOCTYPE> を書きます。
これは「文書型宣言」といって、HTMLのバージョンを表すもので、HTML要素ではないけど重要。
<!DOCTYPE> まで書けば、最低限必要なHTMLの要素(と文書型宣言)が揃ったことになります。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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.