HTMLのヘッダ（30代サラリーマンのためのMovableTypeで簡単！ホームページ管理）

HTMLのヘッダ

ここではHTML文書のヘッダー部分（head要素プラスアルファ）について紹介します。

ヘッダ部分は一見非常に難しく感じますが大部分は固定的な内容になります。これからヘッダ部分の例を紹介しますので最初はこれをコピーして使うところからはじめればＯＫです。

ヘッダ部分の一例は下記のようになります。これを見ながら解説します。

01:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02:<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
03:<head>
04:<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
05:<title>30代サラリーマンのためのMovableTypeで簡単！ホームページ管理</title>
06:<link rel="stylesheet" type="text/css" href="http://cms-mt.com/styles-index.css" media="all" />
07:<link rel="alternate" type="application/atom+xml" title="Atom" href="http://feeds.feedburner.jp/cms-mt" />
08:<link rel="alternate" type="application/rss+xml" title="RSS 1.0" href="http://feeds.feedburner.jp/cms-mt" />
09:<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.jp/cms-mt" />
10:<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://feeds.feedburner.jp/cms-mt" />
11:<link rel="Contents Start" href="http://cms-mt.com/" title="30代サラリーマンのためのMovableTypeで簡単！ホームページ管理-トップページ" />
12:</head>

DOCTYPE 宣言

MovableTypeはXHTML#1で書かれています。まず文書の先頭にXHTMLで書いていることを宣言します。

01:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

これを「DOCTYPE 宣言」といいます。『このHTMLはXHTML 1.0 Transitional#2に従って書いています』という宣言をしている文です。これをHTML文書の先頭に記述します。注意事項としては、この「DOCTYPE 宣言」には文字やスペースをいれない#3ことです。「DOCTYPE 宣言」の前に文字やスペースをいれるとInternetExplorer6では古いブラウザとの互換モードになってしまい、ホームページの表示が崩れる可能性があります。なので必ず「DOCTYPE 宣言」はHTML文書の先頭に書きましょう。

<html>タグ

次に<html>タグを書きます。ここでもxmlns属性にて下記のようにXHTMLのタグセットに従っていることを明記します。また、使用する言語も明示しておきます。（「lang="ja" xml:lang="ja"」の部分）

02:<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

文字コード

コンピュータで日本語の文字をあつかう場合には文字コードというしくみを利用します。簡単に説明すると英数字からなるコードに文字を対応させて日本語を表現するしくみです。日本語の文字コードは、JIS、シフトJIS、EUC、Unicode(UTF-8等）などがあります。MovableTypeの最初の設定はUTF-8になっています。

そこで4行目でHTMLの文字コードを記述しています。ここでは”utf-8”に設定しています。文字コード、UTF-8についての詳細は下記のページを参照してください。

文字コードとは【character code】：IT用語辞典 e-Words

UTF-8とは【8-bit UCS Transformation Format】：IT用語辞典 e-Words

04:<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>タグ

5行目は<title>タグでタイトルを表します。このタグは非常に重要で、検索エンジンがこのタグに書かれているキーワードを非常に重要視します。なのでタイトルのつけ方はすごく大切です！あなたが伝えたいことのキーワード、あなたが発信する情報を探している人がGoogleで検索するときに使うキーワードを入れるようにしましょう。

05:<title><30代サラリーマンのためのMovableTypeで簡単！ホームページ管理></title>

スタイルシートの読み込み

6行目ではスタイルシートの設定を書いた外部ファイルを読み込む設定をします。スタイルシートとはホームページの見栄えに関する部分を表現する方法です。（くわしくは別途説明します。）

06:<link rel="stylesheet" type="text/css" href="http://cms-mt.com/styles-index.css" media="all" />

RSSフィード等のリンク

7行目から11行目まではRSSフィード等のリンクを設定しています。7行目から10行目までが各種RSSフィードのリンクを設定しています。私の場合はFeedBurnerを利用していますので下記のようにFeedBurnerで登録したフィードのアドレスを記入しています。

07:<link rel="alternate" type="application/atom+xml" title="Atom" href="http://feeds.feedburner.jp/cms-mt" />
08:<link rel="alternate" type="application/rss+xml" title="RSS 1.0" href="http://feeds.feedburner.jp/cms-mt" />
09:<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.jp/cms-mt" />
10:<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://feeds.feedburner.jp/cms-mt" />
11:<link rel="Contents Start" href="http://cms-mt.com/" title="30代サラリーマンのためのMovableTypeで簡単！ホームページ管理-トップページ" />

以上でヘッダ部分の説明は終わりです。MovableTypeの場合にはこれにMovableType独自タグを加えてよりメンテナンスフリーな形にしていくことになります。それについては別途紹介します。

#1：XHTMLはHTMLにXMLの持つ柔軟性、拡張性を取り入れたもの。タグの省略が不可であったり、タグを小文字で記述したりとルールが厳密になっています。＜戻る＞

#2：Strict（厳密），Transitional（Strictよりゆるい），Frameset（フレームあり）があります。私は”Transitional”を使っています。＜戻る＞

#3：XHTMLでは通常先頭にXML宣言文（）を入れますがIE6で表示がくずれてしまうためXML宣言文は省略することをお勧めします。このページ（娘娘飯店しるきぃうぇぶ）に分かりやすく書かれています。DOCTYPE 宣言による「解釈モード」の切り替え＜戻る＞

≪ HTMLのタグ | このページのトップへ