0

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?

3
  • 1
    Does this answer your question? Is it necessary to write HEAD, BODY and HTML tags?
    – Run_Script
    May 14, 2020 at 13:07
  • a simple google search answers this question - the doctype is a declaration and not an an element tag. It simply informs the browser about the page and how to render it - specifically that is a html5 configured document. - "Even though it's wrapped in angle brackets, it is not a tag but a statement.".
    – gavgrif
    May 14, 2020 at 13:25
  • @gavgrif thanks, but my question is if we declared thy document type already, why do we need an HTML tag? If I declare that this is an HTML document, then why can't I just add head and body tags?
    – Rumata
    May 14, 2020 at 13:34

3 Answers 3

8

On the semantic level...

<!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.

On the spec level...

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.

On the markup level...

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.

On the DOM level...

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.

2
  • Thank you for such a detailed answer! so shortly the answer is, "because history" then, but why creators won't change it in the html syntax rules? I seem to me that DOCTYPE and HTML are doing the same thing in general, declaring/marking the document content as html. So why to have 2 tags/declarations instead of one? Maybe it would be more logical to specify the required attributes in the Doctype declaration, so no need to add html tag?
    – Rumata
    May 14, 2020 at 13:54
  • @Rumata I've amended my answer to answer those questions. You can see the diff here: stackoverflow.com/posts/61798724/revisions May 14, 2020 at 14:06
0

!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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.