Menu
have been using no DOCTYPE but rather simply starting with <html> as per HTML5 standards (as I understood them). everything going ok.
began using Jade, which insists on DOCTYPE. using <!DOCTYPE html> - pages no longer render correctly(?).
as an easy and trivial example (behavior is same on firefox and chrome):
<html>
<body >
<div style='height:50%; background-color:pink;'></div>
<div style='height:50%; background-color:blue;'></div>
</body>
</html>
render just fine - have page pink, half blue
<!DOCTYPE html>
<html>
<body >
<div style='height:50%; background-color:pink;'></div>
<div style='height:50%; background-color:blue;'></div>
</body>
</html>
renders two skinny DIV's you can't see.
DOCTYPE was being deprecated for HTML5
682
Even though a doctype may look a bit strange, it is required by the HTML and XHTML specifications. If you don't include one you will get a validation error when you check the syntax of your document with the W3C Markup validator or other tools that check HTML documents for errors.
HTML5 is now compatible with all popular browsers (Chrome, Firefox, Safari, IE9, and Opera) and with the introduction of DOCTYPE, it is even possible to have a few HTML features in older versions of Internet Explorer too.
The only thing that such a doctype change will affect is validation. Other than that, the doctype declaration only affects browser mode (quirks / almost standard / standard), and XHTML 1.0 and HTML5 doctype have the same effect in this respect. If you don't use a validator, there is no reason to change.
The absence of the DOCTYPE or its incorrect usage will force the browser to switch to quirks mode. It means that the browser will do its best to layout the page that is considered to be old or created against web standards.
Whoever who told you that DOCTYPE is deprecated is either playing a prank on you or is plain ignorant.
Syntax, sub section 2.2 clearly states this.
The HTML syntax of HTML5 requires a doctype to be specified to ensure that the browser renders the page in standards mode. The doctype has no other purpose and is therefore optional for XML. Documents with an XML media type are always handled in standards mode. [DOCTYPE]
The doctype declaration is
<!DOCTYPE html>and is case-insensitive in the HTML syntax. Doctypes from earlier versions of HTML were longer because the HTML language was SGML-based and therefore required a reference to a DTD. With HTML5 this is no longer the case and the doctype is only needed to enable standards mode for documents written using the HTML syntax. Browsers already do this for<!DOCTYPE html>.
And as to, why the behavior when you set <!DOCTYPE html> in your example.
This behavior is expected. This is because body is a block level element. So it has height, by default, in a shrink-to-fit model and width, by default, in an expand-to-fit model. Setting style="height:100%;" in the body tag allows body to take up the whole of the height available and displays your two divs.
174
DOCTYPE, the page is rendered in Quirks Mode. This means dozens of oddities. The one you have encountered is #3 in my list of Quirks Mode phenomena: percentage heights for elements are applied, using the available height as reference, even when the enclosing block has height: auto (the default); by the specs, the height is determined by the requirements of the content.DOCTYPE is not deprecated according to HTML5 drafts – on the contrary, it is required, but any form other than <!DOCTYPE html> is declared obsolete.<!DOCTYPE html>). For old pages, it depends.In the given case, to make the browser’s rendering area divided in the intended way, set the height of the html and body elements, thereby making percentage heights apply to elements inside the body even in “Standards Mode”:
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
