Browse-Crosser

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
document.documentElement
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
<html>
...
</html>
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]-->
...
</html>
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:
js
touch
postmessage
history
multiplebgs
boxshadow
opacity
cssanimations
csscolumns
cssgradients
csstransforms
csstransitions
fontface
localstorage
sessionstorage
svg
inlinesvg
blobbuilder
bloburls
ndownload
formdata
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
Normalize.css
Demo
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.

Code

<!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]-->
<title>demo</title>
<style>
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; }
</style>
<button onclick="d=document.documentElement;if(!d.className)d.className='h-fix'">
	Height fix for the full-screen linear-gradient
</button>

Result




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):
CACHE MANIFEST
# 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
/style.css
/script.js
 
FALLBACK:
# 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
 
NETWORK:
# 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 */ }
or
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
html5-gears
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.

Code

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

Result