HTML5 Layout Tutorial with Semantic Tags

As we have seen in the last section, HTML5 introduces several new semantic tags. In this tutorial we will look at how to use these tags for a more intuitive layout.

Suppose you have a blog page that looks like this

Here is how the page is actually styled using <div> tags.

As you can see, in the figure, with HTML4 or XHTML, you all your containers are made up of <div> tags

The only way you distinguish the header, the blog post, the time stamp, articles and the footer is by giving your <div> tags a “class” or “id” designation. When you use <div> tags to set up your layout, you have to pay close attention to whether you are nesting your tags appropriately. For example in the blog post has two <div> tags nested inside the <div> tag with the “blog_post” class. This means you have to pay close attention to your closing </div> tags. Sometimes this can get confusing, as you can have a hard time telling which container you are actually closing.

Now let us look at the same layout example with HTML5.

HTML5 actually introduces new elements like <header>, <footer>, <article>, <section> etc. This means you are no longer limited to naming and styling <div> tags and confusing the </div> tags.

Let us look at how we could we can redo this layout using the new elements but without changing what the webpage looks like.

Here is the code in HTML5 with the CSS.

<!DOCTYPE html>
<html>
<head>
<title> HTML Basic Layout </title>

<header> <h1>Welcome to the Popular Blog</h1>
<p>A blog about celebrities and their crazy lifestyles. </p>
</header>
<section class= "blog_post">
<time>Feb 20, 2011</time>
<p>Guess what guys? Paris lost her Dog again!!
How many does she have? Really?
Wonder if she going to bother even looking for this one?
Remember she didn’t even care about the last one.
Do you really think she is going to care about this one?
They are just another bag to her. Just use and toss.</p>
</section>
<section class= "blog_post">
<time>Feb 21, 2011</time>
<p>Another fender bender.
The will probably be another mugshot soon.
Will keep you guys posted.
Look at what everyone is saying about Paris Hilton
over on sugar pop.</p>
<article>
Hilton gets in trouble again!!!
This time the heiress gets is in trouble for
leaving her car in the middle of the road. LOL!!!
</article>
</section>
<footer> Site Maintained by Magic Media
</footer>
</body>
</html>

Here is what the webpage looks like.

As you can see it looks exactly the same. But it is a lot easier to understand your code and keep track of all your containers. The labeling is much more intuitive. Here is the webpage with the semantic tags.

One Response to “HTML5 Layout Tutorial with Semantic Tags”

kiran Says:
November 19th, 2011 at 7:08 am
Very cool ! so easy to catch up this chage, I was dicouraged before
I think I can start with it.

[Reply]

HTML5 Layout Tutorial with Semantic Tags

One Response to “HTML5 Layout Tutorial with Semantic Tags”

Leave a Reply