Moving from XHTML to semantic HTML5

Moving from XHTML to semantic HTML5

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.

Doctype declaration

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">

In HTML5:

<!DOCTYPE html>

This is really a huge simplification. You will remember this just by reading it once, won't you?

Self-closing tags

In XHTML

<img /> means <img></img>

In HTML5

<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:

  • header
  • footer
  • section
  • article
  • aside
  • nav

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

Schéma kódu webu Tomáše Janečka ještě v XHTML

 

Basic HTML structure of this website after moving to HTML5

Schéma kódu webu Tomáše Janečka po přepracování do 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.

HTML struktura webu Tomáše Janečka před a po předělání do HTML5

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.

Although that HTML5 is officialy supported only since IE version 9, you can use it in 6, 7 and 8 as well. How? Easily, check out this great javascriptu html5shiv. Now, there is no restrictions in comparison with XHTML. If you ask about CSS3, that's a different story...

Závěrem

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.

Going for HTML5 as well? Leave a comment here to share your impression about it.

<< Back to the previous page


Comments.
Charlesemume
0

viagra http://viagra365.info
viagra
<a href="http://viagra365.info">viagra</a>
cialis http://cialis365.info
cialis
<a href="http://cialis365.info">cialis</a>
buy viagra http://viagra365.info
buy viagra
<a href="http://viagra365.info">buy viagra</a>
buy cialis http://cialis365.info
buy cialis
<a href="http://cialis365.info">buy cialis</a>

Published on 08.01.2018 09:16:08, from Colonel Hill
   Reply

Write a comment
 If you cann't see the verification code clearly.
Type the characters into the text field below(*)
 
This website uses cookies for ads, just like any other website. Further information