これはソースの一番上にある表記です。
文書型定義と呼ばれます。
まぁあまり難しく考える必要はありません。
また、記述する場合、1文字でも間違えてしまうとNGなので、コピーペーストしましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> </head> <body> </body> </html> |
DOCTYPE宣言の主なもの
HTML4.01 Transitional | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
HTML4.01 Frameset | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Frameset//EN"> |
HTML4.01 Strict | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
XHTML1.0 Transitional | <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
XHTML1.0 Frameset | <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
XHTML1.0 Strict | <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
XHTML1.1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
ただ実際に使うのは、背景青で記した2つがほとんどです。
でOKです。
このサイトはXHTMLで書いているので、XHTML1.0 Transitionalの宣言をしています。
よくわからないからしなくてもいいんじゃない?
確かに宣言を書かなくても表示は問題なくされます。
が、スタイルシートの解釈などに影響するので、できるだけしましょう。
というか、別にそれほど手間ではないと思いますし^^;
・幅に対するpaddingの解釈
・margin:autoによるページのセンタリングが効かない
まぁ大きなものとしてはこのぐらいですが、これが重要だったりします。
とにかく宣言は書く癖をつけるべきです。
また、DOCTYPE宣言の上に空白や文字が入るとIE6では宣言しないのと同じ解釈になるので、
絶対に余計なものが入らないように注意しましょう。
※コラム
XHTMLでの文書宣言の場合、DOCTYPE宣言の上にXML宣言というのを記述することが強く推奨されていますが、上記のIE6の致命的バグのため、記述しないほうが無難です。
私も仕事で制作する場合は付けますが、個人のサイトなどではまず使いません。
SEO的にもおそらく付けようが付けまいが経験上まったく関係ないと思われます。
どうしてもXML宣言したい場合は、IE6用のスタイルシートを別に用意するということで対応可能です。ただし面倒です・・・。
参考URL:http://www.muay-thai-pck.com/
ソースのhead部分を見ると分かるのですが、特殊な記述でIE6のみがスタイルシートを読み込む指定をしています。
<!--[if IE 6 ]>
<link rel="stylesheet" type="text/css" href="css/ie.css">
<![endif]-->
の部分。これでIE6のみがie.cssを読み込みますので、このスタイルシートにIE6に対する記述をします。
margin:autoが効かないので、bodyに対して、text-align:centerを指定し、幅とpaddingを同時指定している部分は、paddingの値を足した幅を記述します。
このあたりは自己満足的な部分でもあるので^^;
参考までに。
フレームを使用する場合はこれを使いましょう。
まぁ今の時代フレームをあえて使おうなんて方はいないと思いますが・・・。
フレームはデザイン的、SEO的に最悪です・・・。
よっぽどの事情がない限り、使用は控えましょう。
※インラインフレームは使ってもOKですよ!
インラインフレームを使う場合は、このHTML4.01 Framesetではなく、普通の宣言でOKです。
HTML 文書内で使用される文字コード、スタイルシート言語、スクリプト言語などを指定します。また、文書の著者、内容、キーワードなどの文書情報を記述するためのタグです。必ず、<head>タグ と </head>タグの間に記述します。
このHTML 文書で使用される文字コードです。このタグは必ずしも入れなくても、ブラウザが自動で判別してくれるみたいですが、文字化け等が起きないとも限らないので、指定しといた方がいいみたいです。 まぁあまり難しく考えずに入れておきましょう^_^;
サイト内に関連したキーワードを記述します。
キーワードを,(カンマ)で区切って記述します。
多ければいいというわけではなく、適度な数を入れましょう。
SEO的には考慮されているかは微妙ですが、
入れておきましょう。
そのサイトの概要(要約)などを入れます。
これもあまり長いものは避けましょう。
Googleではあまり有効性が不明ですが、yahooではサイトの検索結果のページに出る文章に反映されることが多いため、重要なタグと言えます。
SEOを意識して、(しすぎてはダメ)文章を考えましょう。
キーワードを連続で記述したり、文章的におかしなものはやめましょう。
スパムとして扱われる可能性があります。
すべてのページで同じmeta Descriptionを使いまわすのではなく、それぞれのページに合った内容で記述します。
サイトのページ数が膨大で、そこまでできないという場合は、大切なページだけでも固有にします。
タイトルは文字通り、ページのタイトルを記述します。
SEO的にも特に重要なタグです。
ページごとにそのページに合わせたタイトルを付けましょう。適度にキーワードも含めます。
いろいろと詰め込みたいところですが、あまり長いものは避けましょう。
このHTML文書で使用されるスタイルシート言語の記述です。
難しく考えずスタイルシートを使う場合は記述しておきましょう。
記述しなくてもほぼ問題ありません。ブラウザが自動で処理してくれます。
media=の部分は、基本的に指定しなくても問題ありません。
ただ、プリント時には違うスタイルシートなどを適用したい場合には
<link href="css/style.css" rel="stylesheet" type="text/css" media="print" />
とすると、印刷時のみ適用されます。
印刷時には無駄な背景色や、メニューなどは必要ありませんよね。
なので、印刷のことを考慮したこの指定を行うのは親切なサイトと言えます。
ためしにこのページでブラウザの「ファイル」ボタンより、「印刷プレビュー」をしてみてください。
メニュー部分が非表示になり、文章部分がページ全体になるのが確認できると思います。
メニュー部の幅を0px、display:none;で非表示にし、右側の幅をページいっぱいに設定すればOKです。