Menu
Yes , You are free to omit head and body tags from your html code. There is no cons of omitting html , head , body tags since they are optional as per w3c. Please check out the link, The global structure of an HTML document.
Definition and UsageThe <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. Metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information.
There are four required tags in HTML. These are html, title, head and body. The table below shows you the opening and closing tag, a description and an example. These are the tags you put at the beginning and end of an HTML file.
It is required in every HTML document, and there may only be one <body> tag per page. The following sections contain information about this tag, including related attributes and browser compatibility. Example of the <body> code. Deprecated attributes.
Omitting the html, head, and body tags is certainly allowed by the HTML specs. 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 2.0 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 mark-up 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...
IE has at least one known bug in this area. Even IE9 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 IE 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.
The Google Style Guide for HTML recommends omitting all optional tags.
That includes <html>, <head>, <body>, <p> and <li>.
https://google.github.io/styleguide/htmlcssguide.html#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.)
<!-- Not recommended --> <!DOCTYPE html> <html> <head> <title>Spending money, spending bytes</title> </head> <body> <p>Sic.</p> </body> </html> <!-- Recommended --> <!DOCTYPE html> <title>Saving money, saving bytes</title> <p>Qed.
Contrary to @Liza Daly's note about HTML5, that spec 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 http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#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</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 spec, 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)
It's valid to omit them in HTML4:
7.3 The HTML element
start tag: optional, End tag: optional
7.4.1 The HEAD element
start tag: optional, End tag: optional
http://www.w3.org/TR/html401/struct/global.html
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.
http://www.w3.org/TR/html5/semantics.html#the-title-element-0
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.
It's true that the HTML specs permit certain tags to be omitted in certain cases, but generally doing so is unwise.
It has two effects - it makes the spec more complex, which in turn makes it harder for browser authors to write correct implementations (as demonstrated by IE getting it wrong).
This makes the likelihood of browser errors in these parts of the spec high. As a website author you can avoid the issue by including these tags - so while the spec 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 spec 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.
http://www.w3.org/html/wg/drafts/html/master/sections.html#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 JS 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With