See them in action here
The date input field:
<inputtype="date"min="2012-03-12"step="1"max="2012-05-12"name="departingDate"/>
The range input field:
<inputtype="range"name="shoeSize"min="0"max="15"step=".5"value="3"/>
novalidate will skip the browser built in html5 validation
<video width=”640″ height=”480″ controls autoplay preload=”auto” loop poster=”myVideoPoster.jpg”>
<source src=”video/myVideo.mp4″ type=”video/mp4″>
<source src=”video/myVideo.ogv” type=”video/ogg”>
<object width=”640″ height=”480″ type=”application/x-shockwave-flash” data=”myFlashVideo.SWF”>
<param name=”movie” value=”myFlashVideo.swf” />
<param name=”flashvars” value=”controlbar=over&image=myVideoPoster.jpg&file=video/myVideo.mp4″ />
<img src=”myVideoPoster.jpg” width=”640″ height=”480″ alt=”__TITLE__”
title=”No video playback capabilities, please download the video below” />
</object>
<p> <b>Download Video:</b>
MP4 Format: <a href=”http://myVideo.mp4″>”MP4″</a>
Ogg Format: <a href=”http://myVideo.ogv”>”Ogg”</a>
</p>
</video>
controls: will show the controls for the video
preload: pretty much the same as buffer
loop: automatically loops when the video ends
poster: the initial video image placeholder
<source> tags: if a format is not available in the current browser, it will play the next one up
All other HTML content, including the <object> flash tag are there just in case the current browser don’t support HTML5.
Audio pretty much the same, except it doesn’t have height, width and poster attributes:
<audio controls = "controls"> <source src = "music.ogg" type = "audio/ogg" /> <source src = "music.mp3" type = "audio/mpeg" /> Your browser does not support HTML5 Audio. Please shift to a newer browser. </audio> You can also add audio tags dynamically, via JavaScript:
<script> //Create a new Audio object var sound = new Audio(); // Select the source of the sound sound.src = "music.ogg"; // Play the sound sound.play(); </script> To test if certain audio format can be played in the current browser:
if (audio.canPlayType) {
// Currently canPlayType() returns: "", "maybe", or "probably"
To check if an audio file has finished loading:<script>
if(soundFileExtn) {
var sound = new Audio();
sound .addEventListener('canplaythrough', function(){
alert('loaded');
sound.play();
});
// Load sound file with the detected extension
sound.src = "bounce" + soundFileExtn;
}
</script>IE doesn’t understand, and doesn’t know how to render the newest HTML5 elements. But if there is a “document.createElement(‘section’)”, you will be able to display now section element in IE old browsers, and even style it. shiv library does that for you.
In those cases, this is what you need:
https://github.com/aFarkas/html5shiv/
Along with this:
<!–[if lte IE 8]>
<script src=”html5.js”></script>
<![endif]–>
Scripting to make up for missing CSS or HTML features in legacy browsers. Not ideal, but sometimes necessary.
A manifest file indicates the browser what files are needed to run the app offline, so the browser will store them locally for when there is no internet connection.
Example, if you create demo.manifest and put it on your web root, and the content of the file is as below, the files listed will be set locally so the app can run when no internet connection available:
CACHE MANIFEST
index.html
logo.jpg
scripts/demo.js
styles/screen.css
The paths can be absolute or relative.
Then the manifest link should be added to your html document as follows:
<html manifest="demo.manifest">
This file must be served with a specific MIME type in order to be ok, here are the apache settings for it:
AddType text/cache-manifest .manifest
In addition to your apache settings, if you want to stop caching the actual “demo.manifest” file, you can do the following:
<Files offline.manifest>
ExpiresActive On
ExpiresDefault “access”
</Files>
You can also specify files that will always be fetch in the NETWORK section, and FALLBACK will indicate what to do if the networks is not available:
NETWORK:
logo.jpg
FALLBACK:
logo.jpg offline.jpg
Another Network / Fallback example:
NETWORK:
*
FALLBACK:
/ /offline.html
In this case, we indicate we want all the files to be pulled from the network, when the network is available, and if we have to fallback for the root file, we want to pull offline.html
HTML coding in general:
1) Divide semantic or meaningful parts of your website in containers. Everything must have a container as a logical section.
2) Use your containers (divs, or see HTML5 below for other tags) to apply padding, and margin separation between sections. Also, use them for borders and drop shadow effects.
HTML5 specific:
1)The hgroup surrounds header elements (say, the h1 and any other h2 or h3s underneath it) and when a outline algorithm hits the page, it just shows the h1 element of it. Each hgroup can contain an h1, so in theory, if you are using hgroups, it should be “ok” to have several h1’s in your page. Note: this element has been removed from the HTML5! Browsers will probably regard it as an unknown element, but most likely it won’t validate.
2) Notice how the bottom navigation links are not marked with the <nav> tag, this is explicitly recommended in the HTML draft document, leaving <nav> for more important parts of the document, and making <footer> sufficient enough to tell these are just generic links.
3) <main> is the newest addition to the html5 family. It basically encompass your main content, so you avoid doing stuff like <div class=”main”> or <div id=”main”>. Not a lot of browser support as of 2/16/2013, but you can just add a temp CSS patch to make sure it works as expected:
main{
display: block;
}
4) <section> is a related group of content in a document, the <div> tag was used before to enclose this, but section is more generic, and it can contain sections within sections. If you just want to style a group of HTML elements, don’t use a section (which is more like a sub-part of an article), but throw a div in the mix instead.
5) <article> is a piece of the document that can be used as a standalone piece of content, reusable if taken independently from the page content. If you can put that piece as a blob in an RSS feed, it is a good candidate for an article, if in doubt, make it a section. Articles usually contain several sections, not the other way around.
6) <aside> is for a piece of content that relates to the page content (or to the page article) tangentially.
7) Published <time datetime="2010-06-15T11:00" pubdate>June 15 2010</time> is used to mark up dates and times. The datetime part is machine readable, the pubdate, if there, signifies this article's (or whatever is this contained in) publication date.
8)<figure> is used to encapsulate images and captions. It usually contains a <figcaption> tag, which describes what the <figure> image is about
9) <mark> used to highlight content
10) The attribute “role” is used to mark what kind of content the specific DOM element has. For example:
<nav role=”navigation”>
<ul> <li><a href=”#”>Why?</a></li>
<li><a href=”#”>Synopsis</a></li>
</ul>
</nav>
This will be used to indicate that the
Here are other roles and their description:
– application: This role is used to specify a region used for a web application.
– banner: This role is used to specify a sitewide (rather than document specific) area. The header and logo of a site, for example.
– complementary: This role is used to specify an area complementary to the main section of a page.
– contentinfo: This role should be used for information about the main content. For example, to display copyright information at the footer of a page.
– form: You guessed it, a form! However, note that if the form in question is a search form, use the search role, instead.
– main: This role is used to specify the main content of the page.
– navigation: This role is used to specify navigation links for the current document or related documents.search: This role is used to define an area that performs a search.
EXAMPLE OF A PAGE WRITTEN IN HTML%:
<!doctype html>
<head> <meta charset=”utf-8″> <!– Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess –> <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″> <title></title> <meta name=”description” content=””> <meta name=”author” content=””>
</head>
<body>
<header>
<hgroup><h1>Web Directions USA</h1>
<h2>The Web Industry Conference</h2></hgroup>
<p>September 21-25</p>
<p>Midtown Atlanta</p>
<p>Register before August 15 and save $100!</p>
<nav> <ul> <li>Skip to the content</li> <li>Home</li> <li>Program</li> <li>Workshops</li> <li>Sponsor</li> <li>Expo</li> <li>Venue</li> <li>Pricing</li> <li>Contact</li> <li>Register now!</li> </ul> </nav> <nav> <ul> <li>Design Track</li> <li>Development Track</li> <li>Keynotes</li> <li>Networking</li> <li>Speakers</li> </ul> </nav></header>
<section><h2>Design Track</h2>
<p>Dan Rubin gets creative with CSS3 and HTML5; Juliette Melton runs effective remote research; Aaron Walter gets all emotional about design; Esther Derby introduces agile to UI; Ryan Freitas balances data-driven and genius design; Zoe Mickley Gillenwater streamlines sites with CSS3 and Jason Cranford Teague celebrates the year of web typography.</p><p>Agile Meets UI</p></section>
<article><hgroup><header><h2>HOW TO INCORPORATE UI & UX INTO AN AGILE PROCESS</h2></header><figure> <img src=”/speaker_s_sullivan.png” alt=”Headshot of Stephanie (Sullivan) Rewis”> <figcaption>Presenter: Stephanie (Sullivan) Rewis </figcaption></figure></hgroup>Agile teams work in short iterations and deliver working software that means coded, tested, documented, and if the customer decides the time is right, ready to go out the door. Teams work on features in tiny slices based on prioritized user stories, avoiding big up front design. But without a design phase, where does UX and UI fit?Esther will share strategies for evolving UI design as the software grows, keeping UI designers in the loop and helping everyone on the team be a better designer (cause they think already are).Learning to Love Humans: Emotional Interface Design</article><article><hgroup><header><h2>BOW DOWN TO THE MACHINE NO LONGER!</h2></header><figure> <img src=”/speaker_s_sullivan.png” alt=”Headshot of Stephanie (Sullivan) Rewis”> <figcaption>Presenter: Aarron Walter</figcaption></figure></hgroup>Humans, though cute and cuddly, are not without their flaws, which makes designing for them a challenge. By understanding how the wet, mushy processor works in these hairy little devils, you can design interfaces and web experiences that will have them hopelessly devoted to your brand.In this talk, Aarron Walter will introduce you to the emotional usability principle a design axiom that identifies a strong connection between human emotion and perceived usability. Through real-world examples, you’ll learn practical interface design techniques that will make your websites and applications more engaging to the humans they serve.Creativity, Design and Interaction with HTML5 and CSS3</article>
<section>SEARCH</section>
<section>LOEWS ATLANTA HOTELSpecial offer: stay at the conference venue for just $179 per night that’s $100 off!</section>
<section>STAY IN TOUCH Twitter: @webdirections See what all the speakers have to say on Twitter Track the latest Web Directions news (RSS)</section> <section>DOWNLOAD OUR ONE-PAGERNeed to convince the person who writes the checks? Grab our ready to print one-pager.</section>
<section>FROM OUR ATTENDEES One of the best organised and most informative conferences in the digital arena I’ve been to.PAUL MCCARTHY, NSW DEPT OF COMMERCE</section>
<section> BROUGHT TO YOU BY
OUR EXHIBITORS OUR SPONSORS CHAMPIONS OUR COMMUNITY PARTNERS<section> <footer> <h3>ABOUT WEB DIRECTIONS</h3> Founded in Australia in 2004, by long time web industry figures Maxine Sherrin and John Allsopp, Web Directions conferences bring together the web industry’s leading experts from around the world to educate and Read more <h3>SIGNUP TO THE NEWSLETTER</h3> Drop in your email address and stay up to date with the latest. Name: Email: <h3>SUBSCRIBE</h3> <p>Web Directions Pty Ltd. ABN: 20 118 802 118. All rights reserved.</p> News Feed (RSS) | Podcast | Terms and Conditions | Privacy Policy</footer>
</body>
</html>
If you have doubts about what tag to choose, see the image below (original coming from http://html5doctor.com/downloads/h5d-sectioning-flowchart.png )
And, a list that gets updated with the tags that are supported by HTML5:
http://www.w3schools.com/tags/default.asp
This is basically the software representation of a given map of language characters. The English language, not having lots of different letters, can be represented by 8 byte construct, which give you about 256 characters. Enough to cover all the letters and punctuation signs. Most browsers and computer systems would default to this if not specified.
In HTML4, it is specified as:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
In HTML5, the specification is:
<meta charset="utf-8">
In IE7 or older IE browsers, you won’t be able to target CSS rules to HTML5 elements, like this:
section {color: red}Instead though, you can use the following weird code:
[section] {color: red}<section section="true">It was a dark and stormy night</section>
In quirks mode, it acts like IE 5.
Implements most of CSS 2.1 goodness.
To turn off compatibility mode and revert it back to IE 7 behavior, put the following tag in the head:
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
Now, if you want a really good HTML5 ready engine to run on your old IE browsers, put the following tag:
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
That will render pages as in chrome, even as you hit them with IE.