Redefining a Blog Using Semantic Markup On Html5

Redefining a Blog Using Semantic Markup

One place you’re sure to find lots of content in need of structured markup is a blog. You ’ r  going to have headers, footers, multiple types of navigation (archives, blogrolls, and internal links), and, of course, articles or posts. Let’s use HTML5 markup to mock up the front page of the blog for AwesomeCo, a company on the cutting edge of Awesomeness.

Redefining a Blog Using Semantic Markup On Html5

Redefining a Blog Using Semantic Markup On Html5

To get an idea of what we’re going to build with Semantic Markup,   It’s a fairly typical blog structure, with a main header with horizontal navigation below the header. In the main section, each article has a header and a footer. An article may also have a pull quote, or an aside. There’s a sidebar that contains additional navigation elements. Finally, the page has a footer for contact and copyright information. There’s nothing new about this structure, except that this time, instead of coding it up with lots of div tags, we’re going to use specific tags to describe these regions with Semantic Markup.When we’re all done, we’ll have something that looks like Figure. It All Starts with the Right Doctype We want to use HTML5’s new elements, and that means we need to let browsers and validators know about the tags we’ll be using. Create a new page called index.html, and place this basic Semantic Markup HTML5 template into that file.

<!DOCTYPE html>

<html lang="en-US">


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>AwesomeCo Blog </title>





Take a look at the Semantic Markup doctype on line 1 of that example. This is all we need for an Semantic Markup HTML5 doctype. If you’re used to doing web pages, you’re probably familiar with the long, hard-to-remember doctypes for XHTML like this:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “” >

Now, take another look at the HTML5 doctype:


The point of a Semantic Markup doctype is twofold. First, it’s to help validators determine what validation rules it needs to use when validating the code. Second, a Semantic Markup doctype forces Internet Explorer versions 6, 7, and 8 to go into “standards mode,” which is vitally important if you’re trying to build pages that work across all browsers. The Semantic Markup HTML5 doctype satisfies both of these needs and is even recognized by Internet Explorer 6

Making Headers with  Semantic Markup

Headers, not to be confused with headings such as h1, h2, and h3, may contain all sorts of content, from the company logo to the search box. Our blog header will contain only the blog’s title for now.

 <header id="page_header">
<h1>AwesomeCo Blog!</h1>


You ’ r e not restricted to having just one header on a page. Each indi- vidual section or article can also have a header, so it can be helpful to use the ID attribute like I did on 1 to uniquely identify your elements. A unique ID makes it easy to style elements with Semantic Markup CSS or locate elements with JavaScript.

Create Footers With  Semantic Markup Html5

The footer element defines footer information for a document or an adjacent section. Y o u ’ v e seen footers before on websites. They usually con- tain information like the copyright date and information on who owns the site. The specification says we can have multiple footers in a doc- ument too, so that means we could use the footers within our blog articles too in Semantic Markup.
For now, let’s just define a simple footer for our page. Since we can have more than one footer, we’ll give this one an ID just like we did with the header. It’ll help us uniquely identify this particular footer when we want to add styles to this element and its children.

<footer id="page_footer">

<p>&copy; 2010 AwesomeCo.</p>


This footer simply contains a copyright date. However, like headers, footers on pages often contain other elements, including navigational elements.

Add Navigation With  Semantic Markup Html5

Navigation is vital to the success of a website. People simply aren’t going to stick around if you make it too hard for them to find what they’re looking for, so it makes sense for navigation to get its own Semantic Markup html5 tag.

Let’s add a navigation section to our document’s header. W e ’ l l add links to the blog’s home page, the archives, a page that lists the contributors to the blog, and a link to a contact page.

<header id="page_header">

<h1>AwesomeCo Blog!</h1>



<li><a href="/">Latest Posts</a></li>

<li><a href="archives">Archives</a></li>

<li><a href="contributors">Contributors</a></li>

<li><a href="contact">Contact Us </a></li>




 Like headers and footers, your page can have multiple navigation ele- ments. Y o u often find navigation in your header and in your footer, so now you can identify those explicitly. Our blog’s footer needs to have links to the AwesomeCo home page, the company’s “about us” page, and links to the company’s terms of service and privacy policies. W e ’ l l add these as another unordered list within the page’s footer element.

<footer id="page_footer">

<p>&copy; 2010 AwesomeCo.</p>


<ul> <li><a href=""> Home</a></li>

<li><a href="about">About</a></li>

<li><a href="terms.html">Terms of Service</a></li>

<li><a href="privacy.html">Privacy</a></li>




W e will useSemantic Markup CSS to change how both of these navigation bars look, so don’t worry too much about the appearance yet. The point of these new elements is to describe the content, not to describe how the content looks

Sections and Articles Can Be Included with  Semantic Markup Html5


Sections are the logical regions of a page, and the section element is here to replace the abused div tag when it comes to describing logical sections of a page.

<section id="posts">


Don’t get carried away with sections, though. Use them to logically group your content! Here we’ve created a section that will hold all the blog posts. However, each post shouldn’t be in its own section. W e have a more appropriate tag for that. Articles The article tag is the perfect element to describe the actual content of a web page. W i t h so many elements on a page, including headers, footers, navigational elements, advertisements, widgets, blogrolls, and social media bookmarks, it might be easy to forget that people come to your site because they’re interested in the content you’re providing. The article tag helps you describe that content. Each of our articles will have a header, some content, and a footer. We can define an  article as we  like.

Create Asides and Sidebars including  Semantic Markup Html5


Sometimes you have content that adds something extra to your main content, such as pullout quotes, diagrams, additional thoughts, or related  links. You can use the new aside tag to identify these elements.



&quot;Never give someone a chance to say no when selling your product.&quot; </p>


W e ’ l l place the call out quote in an aside element. We ’ l l nest this aside within the article, keeping it close to its related content.

Styling  With  Semantic Markup Html5 & CSS

W e can apply styles to these new elements just like we’d style div tags. First, we create a new style sheet file called style.css and attach it to our HTML document by placing a style sheet link in the header, like this:

<link rel="stylesheet" href="style.css" type="text/css">

Let’s first center the page’s content and set some basic font styles.

body{ width:960px; margin:15px auto; font-family: Arial, "MS Trebuchet", sans-serif; }

margin:0 0 20px 0;
p, li

{ line-height:20px;

Next, we define the header’s width Semantic Markup CSS



W e style the navigation links by transforming the bulleted lists into horizontal navigation bars.

header#page_header nav ul,#page_footer nav ul{

list-style: none;

margin: 0;

padding: 0;


#page_header nav ul li, footer#page_footer nav ul li{


margin: 0 20px 0 0;



The posts section needs to be floated left and given a width, and we also need to float the callout inside the article. While we’re doing that, let’s bump up the font size for the call out.


float: left;

width: 74%;


section#posts aside{

float: right;

width: 35%;

margin-left: 5%;

font-size: 20px;

line-height: 40px;


W e ’ l l also need to float the sidebar and define its width.


float: left;

width: 25%; }

And we need to define the footer. W e ’ l l clear the floats on the footer so that it sits at the bottom of the page.


clear: both;

width: 100%;

display: block;

text-align: center;


These are just basic styles. From here, I’m confident you can make this look much, much better With  Semantic Markup.