HTML 5 Basics

It really is time we all brushed up on HTML5. Very soon, the time will be upon us when it will be “the way” to create web apps. For instance, Windows 8 will support HTML5 and JavaScript as one of its native app languages. The current generation of smart phones (Android, iPhone, and Windows Phone 7) all have browsers that support HTML5. Even Internet Explorer 9 supports most of the new elements – and IE 10 will have even better support. Look for Microsoft to be pushing HTML5 over the next year in other products as well. This is the future, you might as well get used to it now J

Here is what you need to know.

Doctype

The new doctype is just “html.” Nice, sweet, simple. In use it looks like this:

<!DOCTYPE html>

Divs

The <div> tag is still around, but it has a bunch of underlings now for specific tasks. Here are the important ones:

  • Section – contains a section of a page (think column 1, sidebar, etc)
  • Article – contains a set of content (like a blog post)
  • Header – contains header information (not the same as the “head” element)
  • Footer – contains footer information
  • Aside – contains content aside from the main content
  • Nav – contains navigation links

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <header>Header</header>
    <nav>some nav
igation
links
</nav>
    <section id=“section1”>
      <article>
        <header>Title</header>
        <p>Content</p>
        <footer>Tags</footer>
      </article>
      <article></article>
    </section>
    <section id=“section2”>
      <article></article>
    </section>
    <footer>Powered By HTML5</footer>
  </body>
</html>

The thing that is really cool about this, is that you don’t have to worry about all kinds of CSS classes – or giving IDs to each element. CSS becomes really simple, and your HTML is nice and clean and easy to read.

Example of defining headers:

/* the main page header */
header {
  font-size: 2em;
  padding: 1em;
}

/* override for the article header */
article header {
  font-size: 1.2em;
  padding: 0.5em;
  font-weight: bold;
}

Input

Another cool thing is the changes to the <input> element. Here I’ll focus on the type attribute, but you should check out the other changes too.

Several new types have been added that tell the browser how to handle the field. This means that in many cases, the browser should handle pickers and validation for you!

Here are the new types:

  • Color
    • Shows the user a color picker.
    • Support: Opera
  • Date
    • Show the user a date picker.
    • Support: Chrome, Safari, Opera
  • DateTime
    • Same as Date, but includes time (no time-zone)
    • Support: Chrome, Safari, Opera
  • Email
    • Auto validated on submit
    • Support: Firefox, Chrome, Opera
  • Month
    • Allow the user to select Month and Year
    • Support: Chrome, Safari, Opera
  • Number
    • Allow the user to input a number
    • Set restrictions on what numbers can be entered (min, max, step)
    • Support: Chrome, Safari, Opera
  • Range
    • Like number, but the value doesn’t need to be precise
    • Ex: Slider Control
    • Support: Chrome, Safari, Opera
  • Search
    • Defines a search field (works like a regular text input)
    • Support: Chrome, Safari
  • Tel
    • Defines a telephone number
    • Support: None.
  • Time
    • Allows the user to select a time
    • Support: Chrome, Safari, Opera
  • Url
    • Defines a field that should contain a URL
    • Support: Firefox, Chrome
  • Week
    • Allows the user to select a week and year
    • Support: Chrome, Safari, Opera

At this point, you may have noticed that most of these don’t have any support in IE. Read on.

Making HTML5 work in browsers

So, not all browsers support ever HTML5 feature you may want to use. Until version 9, IE had practically ZERO support for the new elements. What if you want to use HTML5, but have to support older browsers? There are things you can do.

  1. Use the Modernizr JavaScript library.
    1. It will create all the missing elements in browsers that don’t support them.
  2. Check out the GitHub list of cross-browser Polyfills to add support for other features (like input types).

Leave a Reply

Your email address will not be published. Required fields are marked *