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

SEOならSEOパック
2016年04月19日 2020年12月24日

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

只今タイムセールを実施中です。

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

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

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

DOCTYPE宣言の項目

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種類で、シンプルな記述となります。
これは、無くても表示されますが、その場合、互換モードで表示されてしまうため、必ず設置しておきます。

DOCTYPE宣言についてまとめ

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

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

Googleの「オーサーランク」をご存知ですか?オーサーランクとは、著者(Author)を何らかのランク付けによってコンテンツの評価要素として取り入れようとしたものです。まず、検索エンジンはコンテンツの内容を100%理解することができません。そのため、検索ランキングを評価するためにはコンテンツ以外の評価項目が必要となり、コンテンツ側としても、構造化データのようなタグ付けなどによって“それ”が何を指すのかをクローラーに伝える必要があります。さらに、そのコンテンツの質を評価するための要素が必要でした。その評価のひと...

SEOパーソナル診断
SEO内部対策 トップに戻る

SEOツール無料トライアル

プロも個人も、高機能なSEOツールを体験ください。

コンテンツ分析や内部SEO対策、競合分析ができるSEOツールが7日間体験可能!

seodoor by SEO Pack

登録申し込み後自動でログインされます。アカウント情報はご登録のメールアドレスへ自動送信されておりますのでご確認ください。

SEO Packキャンペーン
内部修正サービス

公式SNS

Twitter

facebook