The definitive guide of cross-browser/cross-device Web Development

HTML5 elements > html

Element information
Role Document root
Type Normal element
Introduced in HTML1
Mandatory Yes
If not present All browsers automatically add a <html> element at the root of the DOM if it's not present in the source code.
Visible Yes
Stylable Yes
CSS Selector html (recommended), or :root
Best JS selector
Default style • Display: block
• Width: 100%
• Height: auto
• Padding: 0
• Border: 0
• Margin: 0
Hierarchy • It's the root (top-level) element.
• It must be placed just after the doctype.
• It must contain two children: head, and body.
Simple form
Recommen- ded form
<!--[if IE 6]><html class="lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]-->
<!--[if IE 7]><html class="lt-ie10 lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if IE 8]><html class="lt-ie10 lt-ie9" lang="en"><![endif]-->
<!--[if IE 9]><html class="lt-ie10" lang="en"><![endif]-->
<!--[if !IE]>--><html lang="en"><!--<![endif]-->
Comments and techniques • Always specify a lang attribute with the current language code of the page:
  - Search engines and screenreaders will use it to read your pages correctly.
  - Modern browsers will use it to spellcheck user inputs and to use correct hyphenation, ligatures and spacing.
  - You'll be able to define language-specific quotes with CSS.
• To ease CSS debugging for IE6 to 9, it's recommended to use "conditional classes", as shown above. They avoid using CSS hacks and IE-specific stylesheets. You can use them to prefix your IE-specific CSS rules.
• For a cleaner HTML code, conditional classes can also be inserted with PHP:
<?php function echo_html_classes(){$u=$_SERVER["HTTP_USER_AGENT"];$p=strpos($u,"MSIE");if($p){$v=$u{$p+5};while($v<10)echo " lt-ie".++$v;}} ?>
<html class="<?php echo_html_classes();?>"> lang="en">

• The feature-detection library Modernizr adds many classes to the HTML element, that can be useful to use graceful degradation or polyfills. These classes are:
and each of them can be prefixed by "no-" if the feature isn't supported by your browser.
Cross-browser use
Browser Support Compatible with all browsers
Feature detection N/A
Known issues • Some browsers and devices don't have a "100%" default font size. It can be a problem if you use em units, and alter your layout.
• Browsers don't use the same default font family.
• The html element's height depends on the page contents. It can be a problem if you want to apply full-screen gradient backgrounds to the body: a gradient pattern with the same height than the HTML element will be repeated on all the page (or stop if you precise "no-repeat").
Fix • Font-size issue, CSS fix
/* Font-size consistency for IE<8 (with em units), iOS, IE Mobile */
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;

• Font-family issue, CSS fix
/* Font-family consistency across browsers */
html, button, input, select, textarea {
	font-family: sans-serif;

• Height issue, CSS fix
/* If the body needs a full-screen gradient background */
html {
	height: 100%;
	overflow: hidden;

Alternatives No
Polyfills No
Graceful degradation No
Related links
W3C specifications
W3C - Language tags
Paul Irish - Conditional stylesheets vs CSS hacks? Answer: Neither!
Modernizr documentation
jqPerf - jQuery "html" selector
In this exemple, we use conditional classes to color the body background according to the browser quality (green, yellow, orange, red, black).
We also try to apply a linear-gradient background to the body for non-IE browsers. There's a button to enable the full-screen gradient CSS fix.


<!doctype html>
<!--[if IE 6]><html class="lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]-->
<!--[if IE 7]><html class="lt-ie10 lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if IE 8]><html class="lt-ie10 lt-ie9" lang="en"><![endif]-->
<!--[if IE 9]><html class="lt-ie10" lang="en"><![endif]-->
<!--[if !IE]>--><html lang="en"><!--<![endif]-->
body {
	background: green;
	background: linear-gradient(green, greenyellow); background: -moz-linear-gradient(green, greenyellow); background: -webkit-linear-gradient(green, greenyellow); background: -ms-linear-gradient(green, greenyellow); background: -o-linear-gradient(green, greenyellow);
.lt-ie10 body { background: yellow; }
.lt-ie9 body { background: orange; }
.lt-ie8 body { background: red; }
.lt-ie7 body { background: black; }
.lt-ie10 button { display: none; }
.h-fix { height: 100%; overflow: hidden; }
<button onclick="d=document.documentElement;if(!d.className)d.className='h-fix'">
	Height fix for the full-screen linear-gradient


HTML5 elements > html > attributes

(See also: Global attributes)

Attribute manifest
Introduced in HTML5
Mandatory No
Recommended Caution, with fallback
Description Defines a cache manifest for offline browsing
Value URL or path of the cache manifest.
Comments • It's recommended to name the manifest file with a ".appcache" extension.
• The manifest file must be served with the "text/cache-manifest" MIME-type.
• The manifest file contains three parts (each of them can be empty):
# Last update: 2013-01-01
# In the first part, list the files you want to put into cache
# You don't need to list the current page
# In the second part, list the folders that are not accessible offline,
# Add a space and provide a fallback file. This one will be cached.
/online_only/ /you_are_offline.html
# In the third part, list the files needing a connection
# Usually, you should use "*" (anything that's not cached)

• To cache files in his browser, a visitor must of course access to the Website at least once with an Internet connection.
• Cache size is limited on most browsers (limit yourself to 5MB).
• User authorization is required to enable application cache for a Website.
• The Application Cache API provides three methods and eight events related to file caching.
Browser Support IE10+, Firefox 3.5+, Chrome 5+, Opera 10.6+, Safari 4+, iOS 2.1+, Android 2+
Feature detection
if(window.applicationCache){ /* Pure JS */ }
if(Modernizr.applicationCache){ /* With Modernizr */ }
Known issues No
Fix No
Alternatives • There are other options than Application Cache to make a Website (or Web app) offline:
- If it's a Website, you can provide it on a local network, a USB key, a CD...
- If it's a Web app, you can include it in a native application and provide it in an app store (iOS, Android, Chrome, Firefox, ...)
Polyfills • html5-gears, developed in 2008. No information about browser support.
Related links W3C specifications
Dive into HTML5 - Let's take this offline
Can I Use
HTML5 Please
HTML5 Doctor - Go offline with application cache
HTML5 Rocks - A beginner's Guide
Demo The button tests if your browser supports AppCache.
Open the demo in a new page and refresh it without Internet connection to reach the fallback page.


<!doctype html>
<html lang="en" manifest="demo.appcache">
<button onclick="alert(!!window.applicationCache)">
	Application Cache?