Are you someone like me who thinks HTML is the most interesting topic on the planet?
No?
Not surprising, really. Most people have other things to think about.
But even those among us – you! – who would rather think about other things have probably noticed a lot of headlines and blog posts that talk about HTML5. Maybe you’ve wondered if HTML5 is something important enough for you to start thinking about. Maybe you’ve noticed that WordPress themes are coming out in HTML5, such as these from WPMU, and you’ve thought about whether you should switch to a new theme on your blog. Maybe you’re worried that your current blog/web site will be out of date if you don’t make a move to HTML5.
This post is for the wonderers, the worriers, and those who are only marginally interested in HTML. I’ll do a little ‘splainin’ that may help you learn enough to make some decisions.
Fact One: HTML5 is still HTML
If you know a little about HTML already, everything you know is still good and still works. HTML5 is an evolutionary growth step, it’s not a completely new invention. HTML5 is backwards compatible. It works with whatever version of HTML or XHTML you already have on your web page. Here’s the kicker – you can take an existing web page and change it to HTML5 with just a few keystrokes.
Change the DOCTYPE to HTML5 and you’re suddenly using HTML5. For example, your existing DOCTYPE (it’s the first thing in the code on your page) might look something like this:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
If you replace that with the DOCTYPE for HTML5, your web page would still work. It would still look the same. Backwards compatible, remember? What’s the new DOCTYPE?
<!DOCTYPE html>
That all there is to it. Several other things are much simpler in HTML5, like links to scripts and stylesheets. Nice, eh?
Fact Two: Choose Your Own Syntax
What if you’ve been using XHTML – with all those forward slashes at the ends of tags like <br />? In HTML5, you can still use that type of syntax if you want it. Or you can do the plain old <br> minus the XHTML required forward slash. You can write HTML the way you like best. For example, you can capitalize tags if you want to, like this:
<IMG SRC=”myimage.jpg”>
You can use quotation marks or not. So you could do this:
<img src=myimage.jpg>
HTML5 can deal with all of it. Nothing will get broken and not work.
Fact Three: New HTML Elements
There are some new elements. Some are meant to make things more semantic. Most HTML tags are self-describing. This semantic self-description among HTML elements is a very good thing. You document makes more sense to both humans and machines if the correct tags are used to mark up the content as whatever it is semantically meant to be – for example a list or a heading.
Bloggers might really be interested in the new <article> element. Think of an article as a single unit, something you could pick up and move around. Like a blog post. Each post on your blog could be an <article> in HTML5. Inside that article there could be the new <header> element with the post title, and the new <footer> element with info like the author’s name, or permalinks, or comment links.
We’re used to thinking of pages only having one header and one footer, but in HTML5 other elements can have headers and footers when they make sense – and there’s an tag for that.
Fact Four: New Form Types
You might have noticed this implemented on your phone already, though most browsers aren’t doing it yet. There are some new input types for forms, for example email, website, and phone. When you use one of those types in a form field, you get a keyboard to match. For example, if you were asked to enter an email address in a form field that was type=”email” the keyboard shown might include an @ and a period. Other new form elements may help make it easier to pick a date or select from a range of numbers.
More? Yes, There’s More
There’s more. There’s always more. For example there are new <audio> and <video> elements, but using them is still a pain. There are lots of other new tags and form types I didn’t mention. And there are related technologies that make HTML5 look really cool, like CSS3.
While I didn’t tell you everything, I hope I did tell you enough to help you decide if you want to learn more, and to not be frightened if you want to use a blog theme or template that’s written in HTML5.