Class Reading

HTML5 overview and resources

1. What is HTML5

HTML5 is the fifth edition of HTML. The HTML you have been learning in this class is technically HTML4, but we just call it HTML. Why is HTML5 called HTML5? No reason, except fancy marketing :)

HTML5 improves upon HTML4 in two main ways:

  • HTML5 has a whole bunch of more specific tags, which make it more semantic (remember what that means?). This means that you can be much more specific about your website content.

  • HTML5 brings a handful of features that were once only available using programming languages, into the frontend. This means that you can do things like have a little database, or find someone’s geolocation without using a programming language or a web server.

Read our term on HTML5:

Download the HTML5 Cheatsheet

2. Let’s learn some useful HTML5 tags

If you take a look at the HTML5 cheatsheet, you will see some of these more specific tags. Some good ones for you to try are:

  • <header> – for your site header (this is the one users DO see, not to be confused with the <head> of your HTML document)

  • <footer> – your site footer

  • <section> – for major sections of your site or web page

  • <article> – for smaller pieces of content (like a blog post)

  • <aside> – for sidebars

In general, you will find that most of these tags will replace <div> tags.

3. How to make your HTML5 sites work in those old browsers

So you’ve fallen in love with those <section> tags, but you want to make sure that your site works in Internet Explorer 7?

No worries, Modernizr to the rescue!

Modernizr is a JavaScript library that translates HTML5 into regular old HTML for older browsers.

In order to use it in your site:

(1) download Modernizr (don’t change any of the settings)

(2) then put the modernizr.js file into your root folder (the same one as the index.html page)

(3) then add the following to the bottom of your <head> area:

<script type=”text/javascript” src=”modernizr.js”></script>

Alternatively, you can just copy/paste the following into your <head>:

<script type=”text/javascript” src=”//“></script>

If you want to learn more more more about HTML5, check out HTML5 Rocks and sign up for the HTML5 Weekly newsletter.

Deepina Kapila

Dee is a fun-loving instructor with diverse tech experience across Fortune 500 companies, early-stage start-ups, government agencies & non-profits. Dee works at mobile product design studio Funsize, in Austin Texas where she lives with her husband, 2 border collie mixes, & 2 cats.

In her spare time she enjoys playing video games, reading on her Kindle & scuba diving in her hometown (CuraƧao - an island in the Caribbean!).