Begin by using a simplified version of the charset property for better backwards compatibility with legacy browsers.
By using XHTML 1.0 syntax on a HTML5 document is a good practise. That is, uppercase attribute and no quotes for wrapping attributes’ values.
This is a very basic and solid startup for all and any HTML5 projects you might do in the future. The use of an “index” id and a “home” class on the <body> tag is a good habit and has simplified the coding of inner-sections of overly complicated websites.
With this, we can start assigning tags to the different sections of our layout.
Here is a As a very basic start to our markup skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Youe Website</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body id="index" class="home">
</body>
</html>
Header
The header element represents a group of introductory or navigational aids. The layout header is as simple as it gets. It is more than logic that we use this to markup our header.
The nav element represents a section of a page that links to other pages or to parts within the page. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. (Global Navigation)
There’s a lot of buzz regarding the spec of the nav element since “major navigation blocks” is not a very helpful description. But this time we’re talking about our main website navigation; it can’t get any major than that. So after a couple of id’s and classes our <header> tag reads as follows:
<header id="banner" class="body">
<h1><a href="#">Your Website</a></h1>
<nav>
<ul>
<li class="active"><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>
Body Content area
Next is our document’s body, where all the content will be. Since this block “represents a generic document section” and a section is “a thematic grouping of content”, this one is without a doubt a <section> tag.
For the posts, we’ll use the old <ol> tag since, well, it’s an ordered list of articles. Each <li> should have an <article> tag and within this, we’ll have a <header> for the post title, a <footer> for the post information and a <div> for the post content.
The reason for using a <div> is simple to keep the content entry wrapped by an element. It is not a section, it is not a full article, it is not a footer, etc. we can use a deprecated <div> that keeps the markup as clean as possible.
With all these tags the code shall look like this:
<section id="content" class="body">
<ol id="posts-list" class="hfeed">
<li>
<article class="hentry">
<header>
<h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>
</header>
<footer class="post-info">
<abbr class="published" title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->10th October 2005</abbr>
<address class="author">By<a class="url fn" href="#">Name</a></address>
</footer>
<div class="entry-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div>
</article>
</li>
<li>
<article class="hentry"><p>Lorem ipsum dolor sit amet</p></article>
</li>
<li>
<article class="hentry"><p>Lorem ipsum dolor sit amet</p></article>
</li>
</ol>
</section>
The footer area
The footer has no real difficulty. We’ll use the brand new <footer> tag to wrap both the about and the copyright information. The <footer> element represents a footer for its nearest ancestor sectioning content. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Since the nearer ancestor of our <footer> tag is the <body> tag, is more than right to wrap both elements here since we’re adding information about the website’s owner/author.
For the about block we’ll use an <address> tag, which “contains contact information for it’s nearest <article> or <body> element ancestor”. For the copyright information we’ll go with a simple <p> tag so the code ends like this:
<footer id="contentinfo" class="body">
<address id="about" class="vcard body">
<span class="primary">
<strong><a href="#" class="fn url">Your Website</a></strong>
<span class="role">Your Website</span>
</span>
<span class="bio">Your web site is made in HTML5</span>
</address>
<p>2005-2009 <a href="">Yoursite</a>.</p>
</footer>