文書に関する情報を設定しよう

目次

headタグ内で文書情報に関する設定を行っていきます。

head

文字コード

前回は文章全体のタグを見てきました。

前回の記事は『文字全体につけるタグをいていこう』を読んでみてください。

今回はheadタグの中身についてみていきます。前回、説明したとおりここにはHPの情報を入れて行きます。

いろいろな情報を書いていくことができますが今回は文字化けしないためのコードとタイトル、アイコン、HPの説明などの書き方をみていきます

まずは文字化けしないようにするための文字コードについてです。

meta タグを使えば良くて charset=”utf-8″ としてあげてください.

文字コードは、コンピュータがどの種類の文字セットを使うかという指定になります。昔はいろいろ種類があったのですが、最近だと UTF-8 に統一されつつあるので

title

次にタイトルの設定です。ブラウザの上部に常に表示されている部分で店名やサイト名などをここに入れていきます。

タイトルタブを使えばいいです。<title>Teatree Web</title>というように書いて行けばおkです。

タイトル

favicon

faviconはタイトル横に表示されるアイコンです。

実は Chrome では favicon.ico というファイルがあれば自動的にこちらのタブのアイコンにしてくれたりもするのですが、明示的にアイコンを表示させるためのタグを書いておいたほうが良いでしょう。

link タグを使ってあげます。rel 属性を icon としつつ、 favicon のファイル名は href 属性に指定してあげてください。

ファイル構成を確認して favicon.icoを探します。今回の場合はindex.html と同じ階層にあるのでhref 属性にはそのまま favicon.ico と書いてあげれば OK です。

.ico の形式のファイルの作り方は少し特殊なので、興味がある人は「favicon 作り方」などで検索して調べてみると良いかと思います。

description

HPサイトの説明をするためには meta タグを使ってあげます。説明は、将来的にこちらのページをインターネットに公開したときに検索エンジンが説明用の文章として使うこともあります。

name 属性を description 、そして説明自体は content 属性に書いてあげれば OK です。

<meta name=”description” content=”Teatree Web 公式サイトです。”>というように書いていけばいいでしょう。

以上



head

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次