Why do we need to add the <html>
tag if we have already defined that this document is html using <!DOCTYPE html>
tag?
Is there any other tag that can be added instead of ?
If not, why do we need it?
Why do we need to add the <html>
tag if we have already defined that this document is html using <!DOCTYPE html>
tag?
Is there any other tag that can be added instead of ?
If not, why do we need it?
<!DOCTYPE html>
and <html>
, despite both containing < angle brackets >
, are fundamentally different things:
<!DOCTYPE html>
declares the document type and is not parsed to any DOM elements. To quote MDN's Doctype article, "Its sole purpose is to prevent a browser from switching into so-called "quirks mode" when rendering a document".<html>
, however, does parse to a DOM element. You can attach attributes to it or manipulate it with JavaScript. For example, try pasting this in your browser console: document.querySelector('html').style.opacity = '0.5'
. You can do that with <html>
, but not with DOCTYPE
. Why have any standards at all? Standards are necessary so that implementers (e.g. browser vendors) know what they need to build, and developers know what they're developing against. Without common standards, it'd be impossible to ever build interoperable software.
You can certainly question the logic of why standards were set the way they were set, and the answer almost ends up at "because history" (and sometimes "because politics"). If those historical decisions were changed now, it'd break the Web.
It's best practice to always set a lang
attribute on the HTML element, for accessibility and SEO reasons, and you need to include it in order to do that:
Always use a language attribute on the html tag to declare the default language of the text in the page.
It's also a general best practice when writing code or markup to be explicit with what you intend, to help others reading your work. For that reason alone, it's clearer to add a surrounding HTML tag.
If you don't include any attributes on the HTML element, it doesn't actually matter what you write in terms of how it's parsed, because HTML is quite forgiving) (credit @Run_Script for the link). It'll get parsed out to the relevant DOM nodes anyway, so document.body.parentElement instanceof HTMLHtmlElement
will always be true
.
Still, for the reasons laid out above, I'd recommend always including it.
!DOCTYPE html tag make sure that HTML or XHTML document will be parsed in the same way in different browsers. This declaration is an instruction to the web browser about what version of HTML the page is written in. The presence of this tag assures that document author has followed the html standard. Historically,the Doctype declaration was used in HTML when it was defined as a language based on SGML, and later, on XML.
html tag indicates that everything between and is code that conforms to the standards of the type of HTML dictated by the doctype declaration. In simple words, it is the root of an html document.
Actually, you don't need html
tags at all in a valid HTML document. The following is a minimal HTML document:
<!DOCTYPE html SYSTEM "html5.dtd">
<title>The title</title>
<p>Some text</p>
That's because HTML is based on SGML, and SGML can infer omitted tags. In the example, SGML
infers the document element (the root element), knowing that it must be html
since the DOCTYPE declaration says so
infers a head
element, because the content model of html
requires it at the start
infers the </head>
end-element tag, because the p
element can't occur within head
's content model
infers the <body>
start-tag element, since it is required to follow the head
element
accepts the paragraph element and text content, and
closes the body
and html
elements at the end of the document.
So this is the fully-tagged document that SGML arrives at:
<html>
<head>
<title>The title</title>
</head>
<body>
<p>Some text</p>
</body>
</html>
SGML knows this because it has been given a html5.dtd
file containing these and other grammar rules for HTML. Now HTML5 doesn't anymore use DTDs but has these rules hard-coded (actually, browsers had these rules always hard-coded), but the SGML rules for tag omission, as well as other rules such as for empty elements and attribute short-form syntax still apply. If you want to see a complete DTD for (the various versions of) HTML5, you can take a look at my site sgmljs.net W3C HTML 5.2, along with a comprehensive explanation.
So, to answer your question, the idea of SGML is that you can use many different types of documents, each with their own element vocabulary, and not just HTML. However, HTML became the dominant application for SGML. Also, browsers in the past misused DOCTYPE declarations for switching their parsing and rendering behaviour.