HTML5 Functional Tags and New Features

Other useful functionality added by the HTML5 spec through tags and the browser API.

Scroll down...

Content

Resources

Comments

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.

These rich functions allow your browser to handle more of the computational load which would traditionally live server-side. This, in turn, has enabled the expansion of client-side JavaScript frameworks and single-page web applications.

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.

Functional Tags

These tags make media and rich functionality first-class citizens of your page:

<canvas> is a rectangular panel that allows you to use JavaScript to draw inside of it. You can probably imagine how creative people have gotten with this! We'll explore it a bit further later on.

<video> tags now let you embed videos directly in the browser where before you needed to use plug-ins like Apple Quicktime and Adobe Flash. You can get a fair bit of functionality right out of the box and even more if you interact with the tag using JavaScript.

<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 Attributes

<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="email">
  • <input type="date"> for calendar date pickers
  • <input type="month">
  • <input type="week">
  • <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 >

Other Helpful HTML5 Functionality

HTML5 is more than just new tags... it provides deeper functionality for your web apps to interface with the browser.

Local Storage

"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.

Cookies get sent back to the web server with each request so they need to be small. Local Storage is just there waiting for you in the browser if you need it, so you need to use JavaScript to grab it.

As with all browser-side activity, assume the user can change it maliciously so don't treat it as secure.

Web Workers

"Web Workers" apply directly to JavaScript -- they allow you to run multiple JS threads in a way that doesn't interfere (and actually improves) the page load and interaction times. Essentially, it's background processing for JavaScript.

Offline Web Applications

"Offline Web Applications" allows you to download and view full pages offline.

Geolocation

"Geolocation" gives you the ability to discover where the user is just by querying the browser. Pretty handy in some applications. Accessed via JavaScript.

MicroData

"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.

History API

"History API" lets you modify the browser's history and what behavior the Back button triggers. This is particularly useful when using JavaScript front-end frameworks to create single-page applications which would otherwise have annoying Back behavior.

Code Review

A look at the important bits of code from this lesson

# *** New Functional Tags ***
# Embed JavaScript comfortably within this
# (using their special rules)
<canvas>...</canvas>

# Embedded video
<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

# Embedded audio
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>


# *** New Input Attribute Types ***
<input type="search">   # for search boxes
<input type="number">   # for spin boxes
<input type="range">    # for sliders
<input type="color">    # for color pickers
<input type="tel">      # for telephone numbers
<input type="url">      # for URLs
<input type="email">    # for emails
<input type="date">     # for calendar date pickers
<input type="month">
<input type="week">
<input type="time">     # for timestamps
<input type="datetime"> # for precise date+time timestamps
<input type="datetime-local">  # for local dates and times

Wrapping Up

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.



Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

Sorry, comments aren't active just yet!