HTMLヘッダーの書き方
こんにちは。
アイ・カンパニーの井出です。
かなり昔にHPを初めて作った際、HTMLやCSS等のタグ情報は
色んなサイトで詳細に説明がされているけれど、
HTMLヘッダーの正しい書き方の情報は見つけられなくて、苦労した記憶が…。
なので、今回は最低限のHTMLの書き方や
オプション（というか、あってもなくても良いヘッダータグ）を書く場合の順序などを
ご説明します。
まず最初に、どのタイプのHTML言語で記述をするのか決めます。
HTMLなのか、XHTMLなのか。
また、バージョンはいくつか。
そしてどのレベルにするのか。
例えばHTMLの4.01と決めた場合、レベルはStrict、Transitional、Framesetの3種類があります。
現在、最新のHTML言語はXHTMLの1.1です。
ですがブラウザの互換性や、なるべく広範囲のPCユーザーに見てもらうを考えると
HTML4.01のTransitional、もしくはXHTML1.0のTransitionalを使用するのが無難でしょう。
ここで決めたタイプやレベルのHTML言語により、これから記述していくHTMLタグの
基本形やルールが異なりますので、注意して下さい。
記述言語を決めたら、最初に「このタイプの言語で記述を始めます」という
宣言を、一番最初に記述します。
HTMLを選択した場合は、「文書型宣言」を一番初めに。
XHTMLを選択した場合は、「XML宣言」を記述してから、「文書型宣言」を記述します。
こうした宣言を記述してから、＜html＞を記述します。
＜html＞では、記述言語（日本語=ja）を記述します。
そしていよいよ＜head＞です。
＜head＞～＜/head＞までの間に、
・どういったファイルを含むかという＜meta http-equiv＞タグ
・どのURLをベース（TOPページ）にして展開するのかという＜base href＞タグ
・携帯へのアクセスやCSS、javascript、iconへのアクセスを教える＜link rel＞タグ
・そして＜title＞、meta情報の一種の「keywords」「description」「robots」タグ
を記述していきます。
この中で省略可能なのは、base・meta情報のrobotsタグです。
もちろんkeywordsやdescriptionを省略しても表示には問題ありません。
ですが、検索結果に表示されるサイトの説明文はこうしたヘッダー情報から
抜粋して表示される事が多いので、
記述した方が良いでしょう。
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
弊社のHPのHTMLヘッダーは、現在こんな感じです。
＜?xml version=”1.0″ encoding=”shift_jis” ?＞
＜!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”＞
＜html xmlns=”http://www.w3.org/1999/xhtml” lang=”ja” xml:lang=”ja”＞
＜head＞
＜meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis” /＞
＜meta http-equiv=”Content-Style-type” content=”text/css” /＞
＜meta http-equiv=”Content-Script-Type” content=”text/javascript” /＞
＜base href=”http://i-comp.biz/” /＞
＜link rel=”stylesheet” href=”css/main.css” type=”text/css” /＞
＜link rel=”shortcut icon” href=”/img/favicon.ico” /＞
＜link rel=”canonical” href=”http://i-comp.biz/” /＞
＜title＞WEBマーケティングによるホームページ改善はアイ・カンパニーへ＜/title＞
＜meta name=”keywords” content=”WEBマーケティング,ホームページ,利益,売上” /＞
＜meta name=”description” content=”WEBマーケティングによるホームページ改善、経営支援なら、アイ・カンパニーにご相談下さい。TEL：03-6452-6089″ /＞
＜meta name=”robots” content=”index,follow” /＞
＜/head＞
弊社のHPはXHTMLの1.0 Transitional、記述言語はshift_jisです。
先ほど、HTMLとXHTMLでタグ記述のルールが異なる・と説明しましたが、
タグの最後が /＞で終了しているのは、XHTMLでの最も特徴的なルールです。
HTMLで記述した場合は、タグの最後は＞のみです。
1つ気をつけておきたいのは、baseタグを挟む場合
baseタグよりも前に、リンク先を示すタグを記述してしまうと
HTMLの文法上は誤りです。
また、記述言語宣言の前に日本語を記述してしまうと（titleなど）
エラーで文字化けしたりしますので、注意して下さい。
————————————————————————–
ざっくりとした説明でしたが、HTMLヘッダー情報は重要ですので
しっかりポイントを押さえて下さい。
また、あまりヘッダーを重くしすぎると、ページ読み込みが遅くなり
ユーザビリティが悪くなりますので、併せて注意して下さいね。
※全てのタグ説明には全角のカッコを使用していますので、コピーして使用する場合は
必ず半角に直して下さい。