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

html tags

132,137

Solution 1

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.

Solution 2

The Google Style Guide for HTML recommends omitting all optional tags. That includes <html>, <head>, <body>, <p> and <li>.

From 3.1.7 Optional Tags:

For file size optimization and scannability purposes, consider omitting optional tags. The HTML5 specification defines what tags can be omitted.

(This approach may require a grace period to be established as a wider guideline as it’s significantly different from what web developers are typically taught. For consistency and simplicity reasons it’s best served omitting all optional tags, not just a selection.)

<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>


<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

Solution 3

Contrary to Liza Daly's note about HTML5, that specification is actually quite specific about which tags can be omitted, and when (and the rules are a bit different from HTML 4.01, mostly to clarify where ambiguous elements like comments and whitespace belong)

The relevant reference is 8.1.2.4 Optional tags, and it says:

An html element's start tag may be omitted if the first thing inside the html element is not a comment.
An html element's end tag may be omitted if the html element is not immediately followed by a comment.
A head element's start tag may be omitted if the element is empty, or if the first thing inside the head element is an element.
A head element's end tag may be omitted if the head element is not immediately followed by a space character or a comment.
A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a script or style element.
A body element's end tag may be omitted if the body element is not immediately followed by a comment.

So your example is valid HTML5, and would be parsed like this, with the html, head and body tags in their implied positions:

<!DOCTYPE html><HTML><HEAD>
    <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></HEAD><BODY><!-- this script will be in head //-->


<div>Some HTML content</div> <!-- here body starts //-->

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

Note that the comment "this script will be in head" is actually parsed as part of the body, although the script itself is part of the head. According to the specification, if you want that to be different at all, then the </HEAD> and <BODY> tags may not be omitted. (Although the corresponding <HEAD> and </BODY> tags still can be.)

Solution 4

It's valid to omit them in HTML 4:

7.3 The HTML element
start tag: optional, End tag: optional

7.4.1 The HEAD element
start tag: optional, End tag: optional

From 7 The global structure of an HTML document.

In HTML5, there are no "required" or "optional" elements exactly, as HTML5 syntax is more loosely defined. For example, title:

The title element is a required child in most situations, but when a higher-level protocol provides title information, e.g. in the Subject line of an e-mail when HTML is used as an e-mail authoring format, the title element can be omitted.

From 4.2.2 The title element.

It's not valid to omit them in true XHTML5, though that is almost never used (versus XHTML-acting-like-HTML5).

However, from a practical standpoint you often want browsers to run in "standards mode," for predictability in rendering HTML and CSS. Providing a DOCTYPE and a more structured HTML tree will guarantee more predictable cross-browser results.

Solution 5

It's true that the HTML specifications permit certain tags to be omitted in certain cases, but generally doing so is unwise.

It has two effects - it makes the specification more complex, which in turn makes it harder for browser authors to write correct implementations (as demonstrated by Internet Explorer getting it wrong).

This makes the likelihood of browser errors in these parts of the specification high. As a website author, you can avoid the issue by including these tags - so while the specification doesn't say you have to, doing so reduces the chance of things going wrong, which is good engineering practice.

What's more, the latest HTML 5.1 WG specification currently says (bear in mind it’s a work in progress and may yet change).

A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a meta, link, script, style, or template element.

From 4.3.1 The body element.

This is a little subtle. You can omit body and head, and the browser will then infer where those elements should be inserted. This carries the risk of not being explicit, which could cause confusion.

So this

<html>
  <h1>hello</h1>
  <script ... >
  ...

results in the script element being a child of the body element, but this

<html>
  <script ... >
  <h1>hello</h1>

would result in the script tag being a child of the head element.

You could be explicit by doing this:

<html>
    <body>
      <script ... >
      <h1>hello</h1>

and then whichever you have first, the script or the h1, they will both, predictably appear in the body element. These are things which are easy to overlook while refactoring and debugging code (say for example, you have JavaScript which is looking for the 1st script element in the body - in the second snippet it would stop working).

As a general rule, being explicit about things is always better than leaving things open to interpretation. In this regard, XHTML is better, because it forces you to be completely explicit about your element structure in your code, which makes it simpler, and therefore less prone to misinterpretation.

So yes, you can omit them and be technically valid, but it is generally unwise to do so.

View more solutions

132,137

Larry Cinnabar

Deploys on Friday

Updated on March 17, 2022

Comments

Larry Cinnabar about 2 years
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>


<div>Some html</div> 

    <script src="js/body_script.js"></script>
```
And Firebug correctly separates head and body:

The W3C validator says it's valid.

But I rarely see this practice on the web.

Is there a reason to write these tags?
- bonh over 8 years
  
  The HTML5 validator at html5.validator.nu requires the title tag. This is the smallest document it considers valid: <!DOCTYPE html> <title>A</title>
- Maggyero almost 3 years
  
  @bonh And this is the smallest document it considers fully valid (without errors nor warnings): <!DOCTYPE html><html lang=""><title>x</title>
Larry Cinnabar about 13 years

So, it may be non cross-browser?
Randy about 13 years

in other words - bad practice yielding undefined results.
Larry Cinnabar about 13 years

I've just found big site with such markup. Biggest russian search-engine yandex.ru has no html, head and body tags
Demian Brecht about 13 years

@Innuendo Just because something's big doesn't mean that it's well put together.
halfdan about 13 years

Nice example of "How not to do it."
Rein Henrichs about 13 years

As an appeal to authority, I find that unconvincing. google.com is invalid HTML as well. Doesn't mean yours should be.
cHao about 13 years

The elements must exist. Nothing says the tags do. HTML without html/head/body tags is, in fact, valid as long as no element appears where it shouldn't. (<title> after a <p></p>, for example.)
Alohci about 13 years

Don't muddle elements with tags. See cHao's comments elsewhere on this page. For html, head and body, the elements are mandatory, but the tags are optional.
Liza Daly about 13 years

HTML 1.0 defined HTML, HEAD and BODY: w3.org/MarkUp/draft-ietf-iiir-html-01.txt
Alohci about 13 years

@Liza - Well it's arguable whether that document defines HTML 1.0, but I stand corrected, that the elements pre-date HTML 2.0. Thanks. However, see w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/… from 1992. The elements don't exist then.
OdraEncoded over 10 years

Actually you are wrong in the last bit. Tag omission is an SGML DTD feature, all browsers that support SGML parsing(that is all browsers) also support tag omission. The reason why you can't do it in XHTML5 is because it is XML, not SGML. XML is too dumb to infer elements.
jornane almost 10 years

This bug seems not to affect Internet Explorer 11 (I did also test IE8 which I confirm is affected)
Alohci almost 10 years

@Yørn - Correct. IE10 and later use an HTML5 compliant parser, which eliminated the issue.
Ciro Santilli OurBigBook.com almost 10 years

@Alohci for some reason the error only happens when I use: addons.mozilla.org/en-US/firefox/addon/html-validator . Thanks for checking it.
Justin over 9 years

this answer has no clue. while yes you can leave them out, but its certain conditions that apply. html start tag if first thing is not a comment, html end tag if not immediately followed by a comment... head start if element is empty or if first thing is an element. head end tag if its not immediately followed by a space or a comment... and a body start tag if its empty or is not a space or comment, and body end tag if it is not followed by a comment... So, yes you CAN leave them out, under those certain conditions. But there's no benefit to doing so in reality.
Alohci over 9 years

@Justin - Those restrictions are largely technical and won't ordinarily affect you. So yes, if it matters to your page whether a comment node or white space appears just before the head element or just inside it, (the page's JS could depend on it) then you must explicitly identify the head start tag to make that relationship correct. But if it doesn't, (and I've never yet written an HTML page where it does) then the head tag will be inferred somewhere sensible and you can safely omit it. Likewise for the other html, head and body tags.
Justin over 9 years

I can logically use ASP styles tags, or short tags with my PHP -- and safely do so... but it's not standards compliant... Just because you CAN do something, doesn't mean you should do it... One should always write these tags for multiple reasons. #1. You aren't relying on a browsers broken functionality to automatically determine where you want stuff to be. #2. it makes the markup easier to read... and #3 it's the standard - so why mess with convention?
Potherca about 9 years

@Justin This answer seems to have quite a clue as the question is "Is it necessary to write HEAD, BODY and HTML tags?" not whether or not it is a good practice. Conventions tend to change... just take a look at the google styleguide... that is a convention which states you should omit these tags... :-)
Toothbrush over 8 years

@OdraEncoded Can you provide verification for your statement, please? I do not find that to be the case (see the HTML Standard).
Offirmo about 8 years

Example of incompatibility: the live-reload tool I use for web development (puer) automatically inserts a script in head. Without at last the <head> tag, it doesn't work.
Ken Sharp about 8 years

@Offirmo What on Earth is that?
Ken Sharp about 8 years

IE gets things wrong because the authors couldn't care less about standards. It's their fault if it doesn't work properly. The standards are defined so they should make sure IE works with them.
Offirmo about 8 years

@KenSharp livereload web dev tools usually work by inserting some code in pages served, like that : <script src="http://localhost:35729/livereload.js"></script>. For exotic templates, they don't understand where they should insert their code.
kequc about 8 years

@Offirmo The documentation of livereload states you should be adding that script to your client pages yourself. Perhaps you are using a magic library that does it for you. That should be the source of the difficulty you are having.
Peter Bagnall about 8 years

@KenSharp I don't disagree, but until you can force all you customers to not use it we're kinda stuck with it. So better to write code which is completely unambiguous rather than rely on everything working as it should.
Ken Sharp about 8 years

Users have been forced to dump IE for years for not being compliant. Nobody expects users to continue to use IE6, even if people are still installing Windows XP. We can't expect to support Windows 3.1 forever either. OSI Level 8 error.
Ronnie Royston almost 8 years

So, the Google Style Guide for HTML/CSS also says to indent with 2 spaces here which means that those tags are not optional, right? Or no?
Marijn over 7 years

HTML parsing behavior is specified in the HTML5 spec, so no, it won't vary from browser to browser.
TextGeek almost 6 years

Omitting all possible tags is penny-wise and pound-foolish. The bandwidth savings is a tiny % (especially since most connections auto-compress), while the odds of human error on the edge cases are high (consider authors, editors, and even HTML parser writers). It's also harder to find errors (because of the change in entropy).
TextGeek almost 6 years

@OdraEncoded -- close, but not quite true. Tag omission is an optional feature for SGML parsers (though most support it), as defined in ISO 8879. Nearly all HTML parsers support it, though Python's 'html.parse' appears not to (see stackoverflow.com/questions/29954170/…).
TextGeek almost 6 years

Exactly which tags can be omitted and exactly where, also varies by HTML version. That also seems like a good reason to avoid them (except for the most obvious and common and consistent cases).
TextGeek almost 6 years

@Marjin "HTML parsing behavior" is also specified in every other HTML version's spec. And they are slightly different. Browsers also have their own ways of deciding which version of the rules (or their own mix) to use; at least when the document doesn't explicitly say, as it usually doesn't. So behavior most certainly does vary from browser to browser. Fortunately the differences are small, but it's wise to avoid depending on edge cases too much..
Det over 4 years

@TextGeek <!DOCTYPE html>.
Admin over 4 years

Glad to see this is wrong: sitepoint.com/a-minimal-html-document-html5-edition
Admin over 4 years

Not even title is needed. You could set it by Javascript and reload the page. Then crawlers can see there is a title and update to get best SEO of your title. I just read today while tons of info is passing by.
Frank Buss over 2 years

Interesting that goiogle.com violates the Google Style Guide, because it has <html>.
TextGeek over 2 years

@OdraEncoded Re. "XML is too dumb to infer elements" -- That was a conscious design choice when the deep magic was written, made in part so browser vendors could stop putting hundreds of developer-years into trying to outdo each other in recovering bad HTML. With XML there's just one rule about tag omission: "don't". That's easy to understand, test, generate, and parse correctly. Maybe that counts as "dumb", but I don't think so.
Logan Cundiff about 2 years

The style guide is not saying to remove <p> or <li> tags, but </p> and </li> closing tags if there is a correct element (see documentation) immediately following as stated here: html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omissi‌on