Semantics in HTML5 is on a completely different level than in XHTML. You can tag your content better using HTML on your websites. Search engines understand your content better. There are many reasons to start using HTML5 right now. You won't get higher in the search engines' results page, but that's not what is HTML5 about. It's on its way to become a new webdesign standard. It's just a matter of time until the number of HTML5 websites prevails over XHTML.
Advantages of HTML5 over older HTML versions
- Cleaner code - you can replace many of your current elements with more appropriate ones, short doctype declaration
- Way better semantics - HTML5 offers plenty of tags to describe your content better
- Consistency - you can understand a well-written HTML5 code faster, easierly
- Better accesibility
- Many simplifications for web apps and games development
- Modern technology
Actually, you can hardly find lots of matter-of-fact reasons to not start using HTML5. Compatibility with older Internet Explorer versions is assured easily as well, so? Let's transfer our site into HTML5 markup.
Rewriting XHTML code into HTML5
This is just a blog post, not a HTML5 documentation, so only a few basic observations.
In XHTML 1.0 transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is really a huge simplification. You will remember this just by reading it once, won't you?
<img /> means <img></img>
<img/> means <img>
Self-closing tags exist no more in HTML5. However, if you're used to using them, you can continue with it, just be aware what they mean now.
New HTML5 elements / tags
The latest HTML version brings lots of news elements. The most important ones for the basic purposes are the following block elements:
As semantics in HTML5 is the main topic of my bachelor paper, I've started to study it a year earlier than I actually have to. All the elements above are block elements - therefore, you should style them with display: block in most cases. Then just look at the structure of your website, think about it a little while to choose which elements you could replace with new HTML5 semantic tags, and go for it.
Basic HTML structure of my website yet in XHTML
Basic HTML structure of this website after moving to HTML5
The differences are obvious. If you can't see them clearly enough, you can use Firebug / Dragonfly or another debugger to see the HTML structure for yourself. To make your life easier, I've already done it for you. Just a little notice - when I did the first screenshot, I have already had changed the doctype, so you can't see the difference in it.
Getting rid of all the divs? No way!
To move to HTML5 markup doesn't mean to replace all the <div> tags with <sectiong> (or <article>, <aside>, ...). Every new HTML5 tag has it's semantic meaning. That means that there are conditions given when you should and when you should not use the element. That's not what this post is supposed to be about, though.
As you may have already noticed, I didn't remove all the divs. All this web is in <div id="wrapper">, the same goes for the sidebar and content divs. These tags serve just to make styling easier, therefore, it would be absolutely wrong to replace them with <section> or a tag like that.
HTML5 with an old Internet Explorer? A piece of cake.
HTML5 is cool and I don't see a reason why not to dive into it. You can see what does updating code for HTML5 specification involves in the images above. HTML5 is not too difficult, nevertheless, XHTML might be a better choice for you if you'd use HTML5 incorrectly.
To conclude, here you are a few valuable sources. I learned from it when studying HTML5 and it's really worth reading.
- The header element | HTML5 Doctor
- The section element | HTML5 Doctor
- The article element | HTML5 Doctor
- Aside Revisited | HTML5 Doctor
- The footer element update | HTML5 Doctor
- HTML 5.1 Nightly | W3C
- HTML5 best practices | StackOverflow
Going for HTML5 as well? Leave a comment here to share your impression about it.