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: http://skillcrush.com/2012/06/26/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!
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:
Alternatively, you can just copy/paste the following into your <head>: