HTML5とHTML4.01 正しいDOCTYPE宣言で仕様に準拠しよう

SEOならSEOパック
ご利用実績8911件 (2017/03/25現在)
2016年04月19日 2016年09月08日

HTML5とHTML4.01 正しいDOCTYPE宣言で仕様に準拠しよう

htmlファイルの先頭に必ず記述してあるDOCTYPE宣言ですが、何となくコピペして使っていませんか?DOCTYPE宣言は、簡単に説明すると、文書の仕様をブラウザに伝えるためのものです。
一見、わかりにくいタグですが、調べてみると、使うべき宣言がわかってきます。

SEO対策を行うには、正しいタグで記述することも大切です。
少しずつでもタグの記述方法を覚えましょう。

ということで、今回はDOCTYPE宣言について、重要なポイントを絞って説明していきたいと思います。
※DOCTYPE宣言とは、Document Type Definition(DTD)のことで、文書型宣言とも呼ばれます。
DOCTYPE宣言の項目

検索1位!のサイト多数!【月額固定】7,980円(税込)の低価格SEO対策

HTML4.01の3種類のDTD

HTML 4.01厳密型DTD(strict)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

厳密型DTDで、W3Cが非推奨とする要素と属性は使えません。フレームも使えません。
cssを理解している方向けで、スタイルを全てcssで設定していれば全く問題ありません。

HTML 4.01移行型DTD(Transitional)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

移行型DTDで、W3Cが非推奨とする要素と属性が使えますが、フレームは使えません。
htmlにスタイルを突発的に追加することがあるなら、この宣言を設定しておきましょう。

非推奨とされる要素と属性

非推奨の要素と属性を下記にまとめました。strictを宣言する際の参考にしてください。
背景が赤い箇所が非推奨とされる要素と属性で、それぞれcssで代替可能なスタイルもまとめてあります。

非推奨の要素 非推奨の属性 代替できるCSS
<applet>
<basefont> size font-size
<body> bgcolor background-color
background background-image
text color
link (a:link)color
vlink (a:visited)color
alink (a:active)color
<br> clear clear
<caption> align text-align、caption-side
<center> text-align
<dir>
<div> align text-align
<dl> compact
<font> size font-size
color color
face font-family
<h1>-<h6> align text-align
<hr> size height
width width
align text-align、margin
noshade
<html> version
<iframe> align vertical-align、float
<img> align vertical-align、float
border border
hspace margin
vspace margin
<input> align vertical-align、float
<isindex>
<legend> align
<li> type list-style-type
value
<menu>
<object> align vertical-align、float
border border
hspace margin
vspace margin
<ol> type list-style-type
start
compact
<p> align text-align
<pre> width width
<s> text-decoration
<script> language
<strike> text-decoration
<table> align float、margin
bgcolor background-color
<td> width width
height height
bgcolor background-color
nowrap white-space
<th> width width
height height
bgcolor background-color
nowrap white-space
<tr> bgcolor background-color
<u> text-decoration
<ul> type list-style-type
compact

HTML 4.01 フレーム設定型DTD(Frameset)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

フレーム設定型DTDで、フレームを使用したファイルに使います。
最近では、フレーム分けされたサイトはあまり見かけないため、ほぼ使わないDTDです。

システム識別子の省略による表示モード

システム識別子は省略できますが、その有無によってDOCTYPEスイッチが変わり、各ブラウザの表示モードが変更されます。
標準モードは、W3C標準仕様に則ってレンダリングされ、互換モードは、古いブラウザに互換性を持ち、cssの解釈が変わります。

システム識別子の有無と表示モード一覧

DTD システム識別子 IE Firefox Opera
Strict 有り 標準モード 標準モード 標準モード
無し 標準モード 標準モード 標準モード
Transitional 有り 標準モード 標準モード 標準モード
無し 互換モード 互換モード 互換モード

このように、Strictを宣言する場合、システム識別子を省略してもレンダリングには問題ないでしょう。古いですが、Mac IE6だと互換モードとなります。
Transitionalの場合、標準モードでレンダリングするならシステム識別子は省略しないで、記述します。

標準モードと互換モードの具体的な表示の違いがこちらです。

  • ボーダー、パディングの解釈
  • センタリングの解釈
  • フォントサイズの解釈

HTML5のDOCTYPE宣言

<!DOCTYPE html>

HTML5では、DOCTYPE宣言は1種類で、シンプルな記述となります。
これは、無くても表示されますが、その場合、互換モードで表示されてしまうため、必ず設置しておきます。

検索順位に満足していますか?SEO Packなら今すぐSEO対策することができます!

DOCTYPE宣言についてまとめ

今回は、HTML4.01のDOCTYPE宣言を中心にまとめましたが、最近では、HTML5を良く見かけるようになりました。
以前のdivのような意味を持たないタグをセマンティックなマークアップができることから、今後もHTML5は増えていくと思います。
ただし、IE8への対応も必要となるため、必要に応じて使い分けてください。

また、セマンテックに関しては下記の記事も参考にしてみてください。

オーサーランクの試みからセマンテックWebを考える
数年前に終了したGoogleの「オーサーランク」をご存知ですか?オーサーランクとは、著者を何らかのランク付けによってコンテンツの評価要素として取り入れようとしたものです。まず、検索エンジンはコンテンツの内容を100%理解することができません。そのため、検索...

SEO内部対策 トップに戻る
SEO内部チェックツール SEO内部チェックツール

検索順位を上げる
SEO対策しませんか?

検索結果のランキングを決める重要な要素のひとつが「リンク」です。

SEO PackならSEOに重要なリンクをはじめ、SEOに関するノウハウやSEO対策をするための管理ツールが揃います。
また、内部対策の状態も確認することができ、改善方法などもご案内します。
  • 検索順位を上げたい
  • リンク対策をしたい
  • ある程度自分でSEO対策を把握したい
  • 対策中の順位推移を確認したい
  • 変動に強いSEO対策をしたい

上記にひとつでも当てはまる方は、SEO Packの導入をおすすめします。
お試しもご用意しておりますので、詳しくはサービスの内容・特長をご覧下さい。

SEOツールseodoor(せおどあ)に無料版が登場しました