<!DOCTYPE html>の役割

あるボックスを現在の画面中央に表示する処理を作成途中に

<!DOCTYPE html>

の有無で処理が変わりました
今まで気にしないで付けていましたが、どういう役割をするのでしょうか?

jQuery v3.4.0

jQuery
1<script>
2
3var left = Math.floor(($(window).width() - $("#box").width()) / 2);
4var top  = Math.floor(($(window).height() - $("#box").height()) / 2);
5$("#boz").css({
6"top":top,
7"left":left,
8})
9<script>

html
1<div id="box">
2</div>

<!DOCTYPE html>

が無い場合はページの中央に表示
ある場合は表示画面の中央に表示

m.ts10806

2019/05/17 03:14

どう、変わりましたか？

m.ts10806

2019/05/17 03:15

役割だけであれば「DOCTYPE」で調べればリファレンスが出てきますが、それでは理解に足りなかったということでしょうか。タグは「HTML」つけられたほうが良いと思います。

行動規範の内容に同意します

回答2件

ベストアンサー

歴史的にHTMLには多くのバージョンがあり、バージョンによって微妙な差異があります。そのため、ブラウザはどのHTMLのバージョンで作られたHTMLなのかを判断してから、バージョンによって動作が異なるようにしてきました。最新のHTML Standard(かつてHTML5とも呼ばれていましたが、すでに5というバージョンは付いていません)では<!DOCTYPE html>(大文字小文字は区別しない)であれば、このHTML Standardに準拠すべきであるとしています。つまり、HTML Standardに準拠していることを表明しているブラウザ(モダンなブラウザのほぼ全て)では、<!DOCTYPE html>が書いてあれば、HTML Standardと解釈し、エラー処理も含めた準拠したレンダリングになるはずである(もし、そうで無ければ、ブラウザのバグである)と言うことです。

つまりは、<!DOCTYPE html>がないと、たとえHTML Standardに準拠したブラウザであっても、このHTMLは古いバージョンのHTMLに違いないと勝手に解釈して、HTML Standardに添っていない勝手なレンダリングしてしまう場合があると言うことです。そこで、<!DOCTYPE html>をつけると、HTML Standard以外に解釈することはできない(もし、してしまうこと自体がブラウザのバグ)ので、HTML Standardに添ったレンダリングを行われるはずであるとなります。

投稿2019/05/17 09:47