Image from carmichaellibrary on Flickr, used under Creative Commons license.

Correct Use of H1 Tags in WordPress

One of the basics of semantic HTML is the correct use of <h1> tags. It also has benefits for search engine optimization. It’s not that correct use of <h1> is going to have a massive impact in itself, but it’s definitely one of the more commonly misused pieces of HTML code. It’s very easy to use <h1> correctly with WordPress, but it’s overlooked because the WordPress default template *doesn’t* use it very well.

What is an <h1> tag?

Header tags are used to lay out the HTML content of a page in a suitable hierarchy. <h1> is the tag given the most weight, and it should be used to display the overall subject or topic of a web page. For example, the <h1> tag on this post contains the post title; “Correct Use of H1 Tags in WordPress”. Given this purpose, a web page should only have a single <h1> tag, with <h2>…<h6> used to subdivide the content further into different sections and topics.

What’s the coding issue?

I said that the <h1> tag should be used to display the overall subject of a web *page* … not a web *site*. What you’ll find is that very commonly the <h1> is used to display a website’s name or, using image replacement, its logo. That’s fine, and indeed appropriate, for the front page of a site. It’s not correct for internal pages.

The WordPress default templates, and many others, tend to misuse <h1>. WordPress themes share the header.php across different pages and posts, and often you’ll see;

<h1><?php bloginfo('name');</h1>

This means that every page of the site will have the blog’s full name as its <h1>. Post or page titles are then usually given an <h2> tag, even though they are the main topic of the individual web page.

It’s a really easy fix

It’s simple to update most templates to resolve this issue. In the header.php file for Shiny Toy Guns, the main logo is coded like this:

<?php if(is_home() || is_front_page()) {?>
  <h1 id="logo"><?php bloginfo('name');?></h1>
<?php } else { ?>
  <span id="logo"><?php bloginfo('name');?></span>
<?php } ?>

On the front page of the site, the title of the blog is rendered as an <h1>. I then use the front-page.php template file to render the most recent blog post title as an <h2> and subsequent blog posts as <h3>. When viewing an internal page, however, this changes. The title of the blog is rendered as simply a <span>, and the main title of the page, post or search page is rendered as an <h1>. This means that the <h1> is a more accurate reflection of the content of that particular page.

Nothing changes from a visual perspective. Both the <h1> and <span> share the id=”logo”, which means that whichever one appears, they’re going to share the same CSS.

It’s worth keeping an eye on the little things

From a human user perspective this really doesn’t have much of an impact. Unless they’re browsing in a non-standard way (e.g. using a screen reader) people won’t see anything different whether you’re using <h1> correctly or not. Yet such a simple fix can provide some search engine benefit, generally improve the structure of your HTML, and ensure that your code is semantic and makes sense to both human and machine readers!

If you enjoyed this post, why not subscribe to receive all the latest stories from Shiny Toy Robots?

Tagged as: , , ,