Quick Notes on HTML 5: Document Skeleton and Basic Rules

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<!-- saved from url=(0014)about:internet -->
<title>Titles goes here</title>
<link href="style.css" rel="stylesheet">
<script src="script.js></script>
<p>Contents are here</p>

1. Use of <html>, <head> and <body> tags is optional. If they are not present, browser renders them automatically. Usage is still recommended for cleanness purposes.

2. <!DOCTYPE html> is required to prevent browsers from displaying document in quirks mode

3. <meta charset=…> definition is highly recommended right after <!DOCTYPE… or at the top of <head> section. UTF-8 is the most widely used encoding (most compact and fastest for pretty much all browsers).

4. Natural language specification, e.g. lang=”en” is optional, but recommended, as it allows search engines and screen readers to identify section correctly. Specifying language for html tag defines it for entire page, however it also can be specified for elements, such as div.

5. Stylesheet definition does not require type=”text/css” specification, since “rel” (relationship) defines link as stylesheet, and css is the only style sheet language.

6. Similarly, no need to specify language=”JavaScript” for script tag: JavaScript is assumed by default.

7. Closing </script> tag is required, even when referring an external JavaScript file.

8. Comment <!– saved from url=(0014)about:internet –> is only required to enable debugging of local page in IE; if not specified, when you load local page, IE prevents running any JavaScript on the page, unless you explicitely click “Allow blocked content” (this comment is ignored by any other browser)

9. Tags can be lower and/or upper case.

10. Attributes can be specified without values (e.g. <input type=”checkbox” checked>). This is not commonly used, however, since inconsistent with other attributes. XHTML standard required value for each attribute (e.g. <input type=”checkbox” checked=”checked” />).

11. Closing tags are not required for void elements (elements without nested contents) such as <br>, <img> and <hr>. Again, XHTML required <br />, <img … /> and <hr />.

12. Quotation marks around attribute values are only required if attribute values contain >, = or space. E.g. “<img alt=”This is an image” src=image.gif> is valid for HTML5, but not XHTML.

Loose rules 9-12 are likely to fail on validators. It also may be considered a bad “not-so-clean” style. From the browser perspective, however, those inconsistencies do not add any overhead, and thus following XHTML rules is not necessary from performance or compatibility perspective.

Quick Notes on HTML 5: Document Skeleton and Basic Rules

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s