While the semantic tags are sort of the bread-and-butter of the new HTML5 elements you'll encounter, the new functional tags are actually its most powerful parts. These tags extend the functionality of your page in some really interesting ways, especially when working with media or forms.
HTML5 also expanded the interaction between the native browser application and the webpage it displays. It unlocked new functionality (via browser APIs) which provides web pages with a powerful array of additional tools like storage, background processing and navigation.
In this brief lesson, we'll look at both HTML5's functional tags and the new functionality it offers. We won't be interacting with this particular area of HTML5 directly until later in the course, so consider this a teaser for later.
These tags make media and rich functionality first-class citizens of your page:
<audio> tags now let you embed an audio player and audio controls directly in the browser as well. You can avoid using plug-ins.
<input> types galore! These new input types extend your ability to build useful forms for the user. Most web browsers now natively display these new form types properly.
<input type="search">for search boxes
<input type="number">for spin boxes (the little up/down arrows included)
<input type="range">for sliders
<input type="color">for color pickers
<input type="tel">for telephone numbers
<input type="url">for... yeah.
<input type="date">for calendar date pickers
<input type="time">for timestamps
<input type="datetime">for precise date+time timestamps
<input type="datetime-local">for local dates and times
HTML5 also gives you "Placeholder Text" in forms -- that gray writing that says "enter your email here..." but disappears as soon as you click the input field.
The "Autofocus" attribute of an input field (or button or textarea) activates it immediately on page load.
<input type="email" placeholder="Enter your email here..." autofocus >
HTML5 is more than just new tags... it provides deeper functionality for your web apps to interface with the browser.
"Local Storage" is a way for websites to store bits of information on the user's browser over time. It's similar to cookies but cookies are designed for only small text strings while Local Storage can be used for slightly larger chunks of data.
As with all browser-side activity, assume the user can change it maliciously so don't treat it as secure.
"Offline Web Applications" allows you to download and view full pages offline.
"MicroData" lets you add additional undisplayed data to items on the page, for instance adding contact information in a standard "contact card" format to a person's profile page so it can be easily shared.
In coming years, this could be increasingly useful for massaging your search engine results too.
A look at the important bits of code from this lesson
As we said above, we won't be playing with these new tags just yet but it's good to have an idea of what's out there.
<video>tags that gracefully fail to third-party plug-ins in older browsers.