HTML5のDoctype宣言をしたら、色々とサイトが崩れた話

以前納品した案件なのですが、
「HTML5のDoctype宣言をしたいのだが可能か?」
という、ちょっとトリッキーな依頼がありました。
どうやらSEO業者さんに指摘を受けたらしいのですが、
当時の製作を請け負った業者と連絡が取れなくなってしまったため、
弊社のところまで依頼が落ちてきた感じです(あるある)。

DOCTYPE宣言とは

DOCTYPE宣言とは、HTMLやXHTMLなどを書くときに、
一番最初に書かれている宣言文のことで、
要は「これからこの仕様で書き始めるよ」という宣言になります。

先方の依頼は
「HTML5のDoctype宣言をしたいのだが可能か?」
なので、それを実現させてあげたいのですが、
これがなかなか簡単には行きません。。

とりあえず、Doctype宣言をしてみたのですが、
レイアウト崩れや画像が表示されないなどのエラーが出てしまいました。。

ただDOCTYPE宣言を入れるだけじゃダメ

HTML5のDoctype宣言をするということは、その意味の通り
「HTML5でコードを書くよ」ということなので、
当然ながらHTML5でコードが書かれている必要があるのですが(なんのこっちゃ)、
実際のコードは、HTML5とXHTMLのコードがバラバラに含まれています。

具体的には
・タグの後のスラッシュがあるかないか(<br>か<br />など)
・クラス名、IDに、大文字小文字を使うかどうか(XHTMLはダメ。これによってCSSに影響出るときも)
・HTML5から廃止されたタグ(<big>とか<marquee>とか笑)

とか、そんな感じでしょうか。
ページ数も少ないサイトでしたので、
まずはテスト環境でとりあえずDOCTYPE宣言をしておいて、
そのあと上記の違いの部分を意識しながら
チマチマと修正をしていき、無事対応できました。

SEO業者さんは、指摘はするけど作業はしないという
ツンデレな感じの会社が多いですよね笑。
その分、弊社のようなところに仕事が来るので、うれしいことではあるのですが。

それでは。

この記事を書いた人

mako110

原宿でWEBディレクターをやっています。
WEB業界に携わって約15年。独立して7年目です。
自分らしく、働きやすく、周りの人の役に立つ。
そんな仕事をゆるゆるとやっています。