Is it correct to omit the html start tag in HTML5?

Asked

Viewed 434 times

6

Should we or should we not omit the start tag html in an HTML5 document? Several developers ignore its use. Thank you!

<!DOCTYPE html>
   <head>
      <title>...</title>
   </head>
   <body>
      <p>Tag html foi omitida!</p>
   </body>
 </html>
html5

  • What do you mean "correct"? If it’s by default? If it gives problems in any known browser?

  • @Pabloalmeida Yes, I would also like to know about these two questions. Thank you!

  • 5

    I’ll be honest, I’ve never seen anyone omit, which seems more like a mistake. HTML in browsers usually if you don’t find tags like HTML and BODY it generates them automatically. But it does not mean that it is correct, I recommend that you stick to the preferred basics and avoid following codes that looked for ae. Many developers make mistakes, mix and confuse things (I’ve seen every nonsense), if you think it was really purposeful to omit HTML then provide an example =)

  • Html5 did not remove the html tag, just some parameters, like the DOCTYPE declaration. Dtds...

  • @Guilhermebirth as an example, you can see the example itself that is in the question: in it the <html> tag does not appear, only the <!DOCTYPE html>. Is that the example you asked for? Thank you!

  • 2

    @Ingridfarabulini when I asked for an example, I was referring to a real example, I mean, to detect if it was a fault or if it was really deliberate. But all right I’ll try to see something about that later and I’ll come back here, I’m answering your other question.

  • 1

    Even if it were "possible" to omit this "start" tag from html, head, or even body, I believe that by convention, organization and even the play of the markup language, it is actually starting, and closing the tag..

Show 2 more comments

3 answers

5

Interestingly it is valid yes, as you can see on own specification of w3c the opening of the tag can be omitted provided that the first thing within the scope of the html tag is not a comment, so the example you used in the question can be considered correct, however the following would not be:

<!DOCTYPE html>
   <!-- Este HTML é inválido segundo a especificação oficial para HTML5 -->
   <head>
      <title>...</title>
   </head>
   <body>
      <p>Tag html foi omitida!</p>
   </body>
 </html>

The fact that it is valid does not mean that you should do, theoretically it is ok however you cannot assume that all browsers implement the specification defined by w3c to scratch (and in fact none of them implements, all have inconsistencies here and there)So in doing so you are running the risk that your HTML will not render correctly on any of them. In the end also unless you are making the google front page the gain is void, you will save something like 20~ bytes of user band, this optimization is not worth even the time you spent writing the question ;)

  • 3

    The problem with the commentary is that when setting up the DOM, the html implicit ends up staying after the comment, disrupting the page. Same thing in the closing tag, if the document contains a body

4


The example you quoted seems more like a flaw, can even be the case of a dynamic page with some BUG and all sites you found use the same technology and have the same BUG (despite going through the validators).

Apparently as said the Brunobr you can omit yes to tag <html>, I took a test and it is also possible to omit html, head and body, I did the following test I put this in the Validate by Direct Input in http://validator.w3.org:

<!DOCTYPE html>
<title>Test</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="...">

<img src="..." alt="...">

And validated normally, ie to validate apparently is allowed yes "omit" various tags.

But it doesn’t mean that because it validates that it is correct or that browsers will process well, tags omitted as <HTML></HTML>, <BODY></BODY> and <HEAD></HEAD> browsers when loading an HTML structure they try to reprocess them and so end up generating the omitted tags, for example, write this:

<!DOCTYPE html>
<title>Test</title>
<meta charset="utf-8">
<link type="text/css" rel="..." href="...">
<img src="" alt="">

And Chrome failed thus:

Chrome

Internet Explorer 11:

IE11

Firefox:

Firefox

In all tests the engines of the browsers have reprocessed the HTML, but I mean you can even omit and trust that all browsers will work (after testing), but the default is created to avoid headaches like HTML obstruction, sometimes omitting a tag can trigger a problem elsewhere in HTML (for example if the page is dynamic), each engine like Webkit, Blink, Gecko, Trident, Edgehtml, etc can interpret in a variant way according to the content of the page and the order of the elements, the best is to try to stick to the basic/intermediate and "standardized", maintain HTML without omitting tags and preferably validate as much as possible your HTML.

In no way omitting tags will bring you any benefit, not even in consumption or code reduction.

There are tags that omit (actually do not have) the closing tag and omit the /> exchanging > (in HTML only), such as the tag <link>, <meta> and <img> do not need to be closed (in HTML):

<!DOCTYPE html>
<html lang="pt">
    <head>
        <title>Test</title>
        <meta charset="utf-8">
        <link type="text/css" rel="..." href="...">
    </head>
    <body>
        <img src="" alt="">
    </body>
</html>

But when we use XHTML (or XML + HTML, usually mimetype application/xhtml+xml) we should use it like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt" xml:lang="pt">
    <head>
        <title>Test</title>
        <meta charset="utf-8" />
        <link type="text/css" rel="..." href="..." />
    </head>
    <body>
        <img src="" alt="" />
    </body>
</html>

Older browsers usually require application/xml as mimetype and the use of <?xml ... ?>

These types of elements do not require end tag, because they are tags like void (empty element), ie they do not have "Child" (child content with text or other tags): https://www.w3.org/TR/html-markup/syntax.html#void-element

List of tags void of HTML:

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track and wbr

  • 1

    I edited the answer, I don’t know if that was the problem, I would like you to justify the problem, or comment if it is another problem in the answer. Thank you

  • 1

    Our didn’t know that end tags can also be omitted. This I hadn’t seen anywhere either..

  • 1

    It’s a good answer, I just think the part about xhtml and closing void tags is unnecessary (starting with the paragraph "There are tags that omit ..."), it has gone beyond the scope of the question. And it wasn’t me who downvoted, your answer is correct yet as I said I just think you extended it too much (just my opinion).

  • 1

    @Brunorb is not that escaped the scope of the question, is that tied a subject in the other, if you notice several answers here on the site we usually put "extras", this is optional and totally personal to do. I do it a lot myself, it’s like tips.

  • 1

    @Ingridfarabulini yes, it was a test that I noticed a little, all could be omitted <html>, </html>, <head>, </head>, <body> and </body>. But it’s important to be careful, since eventually HTML obstruction failures may occur, I think it’s best to stay in the pattern =)

  • 1

    Just to add: Chrome did its part and added the tags keeping the default, but IE didn’t. That, of course, by watching the code with CTRL+U. It might even internally make IE also do what Chrome did... thanks for the reply!

  • 1

    @Ingridfarabulini I believe that in Ctrl+U I really can not observe this, but in Inspector elements will notice that it works, I edited the answer and added some details. Even "working" with the omission of tags I recommend you avoid this because each engine like Webkit, Blink, Gecko, Trident, etc can interpret in variant way according to the content of the page and the order of the elements.

Show 2 more comments

2

Not that it is correct or incorrect, but it is valid and even recommended for the purpose of reducing the amount of codes.

You can omit even the tag <body>.

But this is a controversial and confusing subject.

Until just before the advent of HTML5, for example, it was recommended to specify certain parameters:

<link rel="stylesheet" href="style.css"
  type="text/css">

Today, the recommendation is that we can omit the attribute type:

<link rel="stylesheet" href="style.css">

For this special example of CSS, it is understandable and makes sense, because the attribute rel="stylesheet" already defines what the document is, making the attribute type"text/css" redundant.

The confusion and controversy is due to the fact that until then the recommended was always specify the attribute type because in older versions of browsers could cause conflict and misinterpretation.

A more specific example that caused conflict:

Loading a Javascript file

<script src="script.js"></script>

Loading Vbscript file

 <script src="script.vbs"></script>

This is a classic example that forced the recommendation of defining the attribute type. Beyond the attribute type, we also had to specify the attribute language:

<script language="VBScript" type="text/vbscript" src="script.vbs"></script>

<script language="JavaScript" type="text/javascript" src="script.js"></script>

Around 2004, the recommendations began that it was no longer necessary to specify the attribute language, and use the attribute type. So since that time, gradually this attribute in the tag <script> has been forgotten. Today it is very rare to find. Usually lies in old systems.

Periodic changes in standards and recommendations

Patterns and recommendations change periodically. Just in case keep the classical semantics.

For further reference on the subject, see this Google guide, referencing the current HTML5 recommendations. https://google.github.io/styleguide/htmlcssguide.xml#Optional_Tags

Just don’t confuse it as this is for HTML5 only. Avoid such practice for an environment where the user can access using older browsers.

Tolerance for semantic errors

The "comical" side of this is that although it is invalid in older browser versions, it is tolerable.

Even in older browsers, you can omit tags like <html> and <head> because at one time such browsers started to "tolerate" some errors in semantics since many sites had errors considered tolerable, this was then implemented in browsers and persists until today.

Document type Definition

Note that this all also depends on the definition of W3C//DTD page: https://www.w3.org/TR/html4/sgml/dtd.html, which not only influences HTML but also CSS and Javascript.

  • 4

    I was confused. For me, omitting this element, or the body, or the head, is invalid - even if tolerated by browsers. I believe the validators agree with me :)

  • 1

    Exact. It is invalid but tolerable. Particularly I still prefer to keep the classic use <html><head></head><body></body></html>. I can even omit the tag <head> because in practice it is useless. But the tag <body>, I find it unsafe to omit as many HTML parsers search for the tag <body>.

  • 3

    It’s just that you seem to say it’s okay to omit. It’s not because browsers tolerate that we should also tolerate.

  • I didn’t give the downvote. I also took a -1 :/ --- It would be interesting if they justified the downvotes. Patience.

  • 1

    @bfavaretto: The Html5 standard was basically created to put on paper the way browsers behaved in practice. All that "invalid" html that was tolerated by all browsers in practice became an official part of html from now on.

  • 2

    @Danielomine: In your answer you mention Dtds but in practice browsers completely ignore the DTD that appears in Doctypes. The only thing they do is to see if there is a doctype in the document or not (the absence of doctype triggers the quirks mode, for compatibility with webpages of the 90’s). So much so that the recommendation nowadays (according to Html5) is only to write <!doctype html>. This simplified pro doctype syntax has been chosen because it is enough to make the antigon browsers avoid using quirks mode.

Show 1 more comment

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.