HTML5 is just about the hottest topic on the internet right now, in large part due to the on-going fight between Apple and Adobe. We may not know who will win this “argument” but I think we can be sure of one thing – HTML5 is the way of the future. And such, it’s good to be properly prepared for it when that day comes.
In this article, I’m going to be talking about the very basics of HTML5 and show you how can start applying it right now.
“But won’t that break the site in older browsers such as IE6?”
Actually, that’s the beauty of it – it won’t! I am going to show you how to code up a properly HTML5 document and how you can style it with CSS.
There’s just a few things I’d like to clear out first. HTML5 is not a new language – it’s an extension of HTML4, the language you’re been using for so many years. This means that your fancy code isn’t wrong in HTML5. It won’t break and it won’t suddenly stop validating once you make the switch to HTML5.
“Then what’s the point?”
The point is that HTML5 allows you to do the same things with more ease. And it allows the client to get a better view of the document – for example, screen-readers will have an easier time understanding the document. (Please notice that these are only a few of the points with HTML5 – once you dive in deeper you get to the good stuff, like native video, geotagging API, canvas, etc. But this is only meant as an introduction.)
I’m going to dive right in and show you proper, simple examples. And perhaps you will be just as impressed as I am. And we’ll start with the very first thing that comes up in a HTML page – the doctype. And we’re gonna simplify it!
A simple doctype? Are you kidding me?
No, I am quite serious. The very first thing you will notice about a HTML5 document is the doctype. Nobody ever remembered the long and complicated doctypes for letting the browsers know whether it was XHTML, HTML, strict, transitional or frames, etc. That’s why we now have a much more simpler doctype, that looks like this:
<!DOCTYPE html>
It looks a lot more clean, right? The idea is to stop versioning HTML to make for easier backwards compatibility. As for myself, I’m only happy to actually be able to write that damn doctype myself, instead of copying and pasting it!
REAL semantic structure
OK, so you’ve declared your document as HTML5, now what? I tell you what – now we get to use some spanking new tags! Exciting, huh?
Before we do that, let’s make up a simple HTML4 document.
<html>
<head>
<title>My web page</title>
</head>
<body>
<div id="header">
<h1>My web page</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<h2>My content</h2>
<p>......</p>
</div>
<div id="footer">
<p>....</p>
</div>
</body>
</html>
Looks familiar, doesn’t it? This is the way most designers code. We break up our documents into divs – basically containers that can hold anything we want them to. And then we assign them ID’s – to be able to target them with CSS and also to distinguish them from one another. I think we can all guess what the div “content” mean. But herein lies the problem – different designers have different ways to mark up things. One designers might go for “main” instead, yet another goes for “text”, and so on. There’s really no standard way to mark up things like this.
And that’s where our new fancy tags come in!
- <header>
The header tag is intended as an introduction to the section or the whole page. This is meant to contain things like the logo, slogan, introduction text, etc. - <nav>
Pretty self-explanatory – the nav element is designed to contain your site’s navigation. But don’t just restrict its uses to the top navigation – the nav element can be used several times in any document. For example, it might be used in a sidebar menu as well, or if you have a navigation in the footer. - <section>
Section is probably the one tag that most resembles div, and will probably be the one that wounds up getting used the most. Section is supposed to group together thematic content. But sections can also be nested inside one another. - <article>
The article element should wrap a single section of your site, whether it be a blog posts, news article, etc. You can have several article elements on your web page. - <aside>
A weird name for a simple function – the sidebar. Content that doesn’t necessarily don’t belong in the main flow of the web page but rather act as a support for it. - <footer>
And then we have the last tag – the footer. VERY self-explanatory, I don’t think I have say anything about this one!
And there you have it! Now we just have to start using them… I’m gonna post our previous example, and this time, it’s all HTML5-fied! (Try saying that out loud.) Check it out:
<html>
<head>
<title>My web page</title>
</head>
<body>
<header>
<h1>My web page</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<h2>My content</h2>
<p>......</p>
</section>
<footer>
<p>....</p>
</footer>
</body>
</html>
There you go! Nice and tidy. Easy to follow. A standard way of writing your code, which means that everybody’s HTML5-document will look more or less like this. That’s what I’m talking about!
HTML5 with style
So…can you style it? I’m glad you asked!
I’m gonna quote Barack Obama here: “Yes, you can!” You style it just as any other div element, with only one difference – these new tags are inline elements by default in a lot of browsers, so be sure to add the display block value to them to get the desired results.
And do you wanna know the beauty of it? This works in every browser but one! And I’m sure we can all guess which one THAT is…that’s right – the dreadful Internet Explorer 6! (Insert spooky music…)
The problem with IE6 is that it refuses to style elements it doesn’t recognize. And in this case, that actually seems quite reasonable. Fortunately, there’s a way around that. With JavaScript, just use the createElement function and create all those fancy HTML5 tags. You don’t even have to do anything with them – just having them there in limbo is enough to get IE6 to “get” the tags. Just be sure to do it right away in the header, before the content and before you link to your CSS.
So there you have it. The very basics of forming up a HTML5 document. Combatible in all major browsers so there’s really not any reason NOT to start doing it right away. That way, you’ll be better prepared when HTML5 makes it big entrance, together with all the nice functions it bring.
HTML5 – bring it on!
[...] Basic HTML5 Perhaps this one requires a bit of testing before I can fully commit to this statement. But marking up your document in proper HTML5 tags, such as <header>, <section>, <footer> and the like is not wrong! All the browsers in use of today support it; just treat them as regular <div> tags. (But don’t forget to put the display: block property in the CSS! That’s the only thing these new tags don’t share with regular <div> tags.) [...]
All versions of IE have this problem, except IE9 which isn’t out yet of course.
To get over this, you can use Remy Sharp’s HTML5 Shiv to enable IE to use and style HTML5 elements.