o.rydberg

Passion for software development



Basics of a HTML5 blog post

2012-11-15

This is the first part in my series on how I’m building my blog engine. But it’s also a great beginner’s guide on how a modern blog post page based on HTML5 could look like.

HTML5 logo

What is HTML5? To begin with HTML5 is in review at the W3C, so it’s not yet a standard and it will probably not be that in a few years. But the browser vendors have started to implement functionality that is stable in the upcoming standard already into the recent versions of their browsers.

This blog post will only focus on HTML part of a blog post. This means that the blog look will kind of ugly at first. But I'm focusing on structure and semantics here. Maybe you have heard about the semantic web earlier? One of the major differences between HTML5 and the older HTML standards is that HTML5 will bring more semantics into the HTML document. You could also say that it will bring more meaning to the different parts in the document for a search engine or other tools. In a later blog post I will do styling of the HTML page with CSS3 and then the page will look much nicer.

It’s actually only one simple tag that specific for the browser that this is HTML5 document and it’s this tag:

<!DOCTYPE html>

This tag is actually the only thing that you need to write in a document to create a valid HTML5 document.

There are many aspects of HTML5 and I will not cover them all here, I will only focus on how to create a HTML5 blog post and the semantics that could be coded into that blog document.

First I would like to show you how to create one of the simplest HTML5 document that have some kind of meaning compared to the one-liner document that I showed above here. To be able to take this in small steps I wanted you to show you this small document before we start looking on how a simple blog page written in HTML5 could look like.

            
<!DOCTYPE html>
<html lang="en"> 
<head> 
    <meta charset="utf-8"/> 
    <title>Page title</title>
</head> 
<body>
    Page text 
</body> 
</html>

Some explanation about the code:

  • <html>: Everything in the HTML page needs to be between html tags.
  • lang="en": This tells the browser and the search engines what the language of text in this document is English.
  • <head>: Inside the section of this tag are things that are related to the whole page.
  • <meta charset="utf-8"/>: This tells the browser that the text is encoded with the Unicode.
  • <title>: The text in the section of this tag will be displayed for instance in the tab of your browser window.
  • </body>: Everything inside the section of this tag will be the content that the user see on the web page.

As you can see there is not so much code needed to create a simple HTML5 document with a little meaning to it. So, now it’s time to add some more content in the page. I will now add blog post related parts to the page. I will also add a navigation part since you would need that on a blog if you have more than one blog post.

            
<!DOCTYPE html>
<html lang="en"> 
<head> 
    <meta charset="utf-8"/> 
    <title>Page title</title>
</head> 
 <header> 
  <h1>Blog page title</h1> 
  <nav>
   <ul>
    <li><a href="../../">Home</a></li> 
    <li><a href="../../Archive.html">Archive</a></li> 
   </ul> 
  </nav> 
 </header> 
 <article itemscope itemtype="http://schema.org/BlogPosting">
   <h1>Blog title</h1> 
  Blog text
 </article>
 <footer> 
  Copyright 2012
 </footer> 
</body> 
</html>

I have basically added 3 parts to the body section of the page. The sections are header, article and footer. These main sections are there to give more meaning and context to the page. I will now explain these sections a bit more in detail.

Header

In the header it's very common to have the title of the blog and some navigation. As you can see in the header section there is a nav tag that means navigation. So this is another example of how to specifying a meaning of a section in the web page. In the nav section there is simply a list of navigation items.

Article

The article section describes that this section of the blog post is an article. To specify this even more concrete I have set the item type to be a blog posting. I have done this specifying with a micro format from the http://schema.org. There are of course many more properties that I can set on a blog post like author, creation date and so, but I will not specify anything more at this point since this is a simple example so far. Micro formats from schema.org are recognized by search engines like Google and Bing.

Footer

As you know the footer is something that you have in the bottom of a web page or a blog post that usually contains copyright information and contact information.

More sematic tags for blogs

Code: If you, like me are writing a blog where you have to show computer code, there is a special tag called code that you can use. Below I'm showing an example of the code tag could be used.

<code><!DOCTYPE html></code>

dateCreated: The creation date for a blog post is both interesting for the reader to directly see on the page and it’s also important for the search engine, so that it can prioritize between all different blog posts. Below, you can see an example of how the property dateCreated could be used.

<span itemprop="dateCreated">2012-11-15</span>

There are much more to say about blog posts written with HTML5, but you should take this as a starting point. I will probably come back to write more about details of HTML5 later.

So, this was an introduction on how to build a blog post with HTML5. I hope that it was helpful for you. Please also ready my blog post about how to style a HTML5 blog post with CSS3.

Some resources that can be useful for you: