How To Add Semantic HTML5 Markup in Thesis Theme

Last Updated on

html5 logoI am using thesis theme for many years, mostly because the simplicity of this template. Apart from a beautiful design it also helps with search rankings. Time and time again I have seen, just by installing this theme a new blog gets quick google rankings. Thesis is quick to add new SEO standards and one of them I will be talking about today is HTML5’s semantic markups.

Just imagine turning your blog’s crucial sections like header, content, or footer into meaningful HTML elements to the eyes of the search engines without having to write a single line of code! Seems too good to be true, but thesis let’s you do it yourself.

Let’s find out how,

For those who know a bit more about HTML5 and SEO will know about the semantic or meaningful markups. This is the standard launched with HTML5 (and still in development.) All the major browsers suppor these new tags and so does the search engines.

In general every element of a website is sectioned with divs <div>. Take a look at this example:

standard HTML code
standard HTML code

Machines like web browser and search engines can’t really tell the difference between parts of these content blocks. They can’t really differentiate between the blog content and the sidebar widget. The only time they can figure out is when these blocks are highly structured or the machine is really smart enough. With the use of semantic HTML markups we can create blocks that look like this:

semantic HTML structure
semantic HTML structure

Which is much more easier for the bots to understand the meaning behind these blocks. In the past heading tags like H1-H6, image alt tags and META tags have been widely used by search engines to make sense of websites. Now the semantic tags are going to move it one step further when it comes to a meaningful web and therefore improving your blog SEO.

{ Both of the images above are courtesy of Vertical Measures }

There is a long list of semantic markups but among them the most important ones that matters are,

  1. Header <header>
  2. Navigation <nav>
  3. Article <article>
  4. Section <section>
  5. Aside <aside>
  6. Footer <footer>

So instead of using <div id=”header”></div> I can use <header></header> ~which changes nothing from a designers stand point but when it comes to SEO it does wonders. Now search engines can tell this is the website header, it contains the name of the website and it is the identity of the whole operation.

Then instead of using <div id=”article”></div> I am using <article></article> which instantly separates my blog article from everything else. Now suddenly bots can put more focus on the text inside this for relevance instead of going all over the place.

Now, there is a right way of doing this and there is always a wrong way of doing this. It is better when you know the meaning of each and every tag above, study a bit and then apply them into your website.

The first theme I came across that has the semantic markup built in was the Genesis theme.

Most WordPress themes these days will have semantic HTML of some sort but there is a problem.

Many web designers are not SEO folks. They have used the markups as recommended but not knowing the purpose. They are using HTML5 markups just to sell the themes.

When you buy a template these markups are hard-coded and you cannot just go there and change these. It will make a huge mess.

When I installed Thesis 2.1 which is known for it’s SEO friendliness I realized they are lacking semantic HTML markup. At first I was unhappy but later I found that I have the option to do it myself.

Wow a theme that let’s me add my own markup without writing a single line of code? That’s fantastic.

So I added the markup and let me quickly give you a full overview on how you can too do the same with thesis 2.1.

Open up your thesis skin editor and let’s start editing the “Home” template.

thesis 2 skin editor
thesis 2 skin editor

FYI, I am using the thesis classic responsive skin.

The Header Section

Obviously the header section that includes your website title, tagline or logo will be wrapped with <header> element. The header tag must have a heading tag like H1-H6. Here’s what the standard says about this tag:

a group of introductory or navigational aids. A header element typically contains the section’s heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos.

Just click on the gear icon and select header from the dropdown and you are done!

header area
header area

The Navigation Menu

Every website has at least one navigation menu of some sort. I have wrapped my primary navigation menu with the <nav> tag. We are allowed to wrap the post navigation (like next/prev posts) or even comment navigation pages. But I will only wrap my primary navigation menu with the <nav> element so it will stand out from other navigation units.

The navigation menu in thesis has no HTML wrapper so I cannot directly add the <nav> tag.

What I did was to add a new HTML container box from the boxes and then dragged the navigation menu inside it.

creating a new HTML container
creating a new HTML container
New container named Nav
new container named nav
Inserting the nav menu inside nav container
inserting the nav menu inside nav container

I named the new HTML box “Nav” and selected <nav> as the wrapping element.

This way search engines will know that my top navigation menu is the most important navigation area of my blog. The pages that I have linked from the nav menu will be seen more importantly.

The Articles

What else I want to wrap my blog articles with, other than the <article> tag? The article element also requires a heading tag. Every article has a headline and that is wrapped in the H2 tag in the home page.

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

So the article tag is a type of content which is unique to the page like a blog post, a page or a blog comment.

I will open the home post box inside the WordPress loop and add the <article> tag here. This way the <article>’s will loop/replicate. Every single post in the home will be in a separate <article> element.

wp loop in article tag
home post box in wp loop
article box
article box

Do you know we can add more than one <header> in a page? It is allowed in HTML5.

I will wrap the headline area of the blog post in <header> tag.

article header area
article headline area
header area in header element
headline area in header element

This header is different than the website <header> and search engines can easily distinguish between them.

Sidebar Section

This is a no-brainer. I have wrapped the sidebar with the <aside> tag.

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

An <aside> element is a standalone piece of content which can repeat itself. Sidebar widgets stay the same all across the website. Also the <aside> tag does not require any heading (H1-H6) tags so this all suggests that it’s the perfect element to use for the sidebar widgets.

I will open the sidebar area and set it as <aside> nothing special here.

sidebar area
sidebar area in aside tag

The Footer

Nothing much to say about this. I have wrapped my website footer with the <footer> tag.

Represents the “footer” of a document or section of a document. The footer element typically contains metadata about its enclosing section, such as who wrote it, links to related documents, copyright data, etc. Contact information for the section given in a footer should be marked up using the address element.

footer area in footer tag
footer area in footer tag

I then saved my template

template saved
template saved

..and went to w3 validator.

It returned with a green passed box.

validated as html5
validated as html5

Do check your website against the w3 validator to make sure your website code is error free.

The Single Article Page

Now that the home page template is done. I will now select the Single template. This template is for the individual blog posts. I will make the same changes for all other elements (I guess thesis does it automatically, don’t remember)

single template
single template

Set the Post box to <article> and the headline area with <header>

There is an extra option here which is the schema markup. Thesis has set article as the default schema. So nothing much to change here.

schema markup option at the bottom
schema markup option at the bottom

Now the new bit here is the comments section. We can wrap the comments section with the <article> tag, since they are unique user created content. But I will wrap them with <aside> tag because I want to give more importance to my written blog article.

So open up the Post comments section and select the <aside> tag for this one.

comments in aside tag
comments in aside tag

The Page.. Page?

Open the Page template and just like before make the changes. There is no comment in my pages so nothing more here. Now some people will recommend that I use the <section> tag to wrap the page area.

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

So I will be using the <article> tag rather than the <section> styling element.

This is because my website pages are as much valuable as the blog articles.

The Archive Template

Same as the home template. The only addition is the archive intro which I wrapped with the <header> tag.

archive intro
archive intro
archive intro in header tag
archive intro in header tag

Wrapping Up

Most templates out there have some sort of semantic markup however I found in thesis you have the total control over it. You can change the markup to fit your own unique needs.

If you don’t have thesis yet, you can grab a copy here. You can even hire me for thesis customization and optimization.

Do know that, having schema and semantic markup will not magically bring you better search rankings, it’s just a start. You have to create remarkable blog content.

So now my website is optimized, let me wait a few months to see if it improves the rankings or not?

By the way, are you loving the new redesign of BlogKori? (it’s still work in progress..)

blogkori 2015 redesign
blogkori 2015 redesign

Do let me know your thoughts in the comments,

1 thought on “How To Add Semantic HTML5 Markup in Thesis Theme”

Leave a Comment

Your email address will not be published. Required fields are marked *