Search code examples
htmltags

Is it necessary to write HEAD, BODY and HTML tags?


Is it necessary to write <html>, <head> and <body> tags?

For example, I can make such a page:

<!DOCTYPE html>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

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

And Firebug correctly separates head and body:

Enter image description here

The W3C validator says it's valid.

But I rarely see this practice on the web.

Is there a reason to write these tags?


Solution

  • Omitting the html, head, and body tags is certainly allowed by the HTML specifications. The underlying reason is that browsers have always sought to be consistent with existing web pages, and the very early versions of HTML didn't define those elements. When HTML first did, it was done in a way that the tags would be inferred when missing.

    I often find it convenient to omit the tags when prototyping and especially when writing test cases as it helps keep the markup focused on the test in question. The inference process should create the elements in exactly the manner that you see in Firebug, and browsers are pretty consistent in doing that.

    But...

    Internet Explorer has at least one known bug in this area. Even Internet Explorer 9 exhibits this. Suppose the markup is this:

    <!DOCTYPE html>
    <title>Test case</title>
    <form action='#'>
       <input name="var1">
    </form>
    

    You should (and do in other browsers) get a DOM that looks like this:

    HTML
        HEAD
            TITLE
        BODY
            FORM action="#"
                INPUT name="var1"
    

    But in Internet Explorer you get this:

    HTML
        HEAD
           TITLE
           FORM action="#"
               BODY
                   INPUT name="var1"
        BODY
    

    See it for yourself.

    This bug seems limited to the form start tag preceding any text content and any body start tag.