<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Improve the Web</title>
  <subtitle>Search Engine Optimization, Usability and Design How Tos and Advice</subtitle>
  <link rel="alternate" type="text/html" href="http://www.improvetheweb.com/how-use-h1-heading-tag"/>
  <link rel="self" type="application/atom+xml" href="http://www.improvetheweb.com/node/119/atom/feed"/>
  <id>http://www.improvetheweb.com/node/119/atom/feed</id>
  <updated>2007-06-09T02:20:40-05:00</updated>
  <entry>
    <title>How to use the h1 heading tag</title>
    <link rel="alternate" type="text/html" href="http://www.improvetheweb.com/how-use-h1-heading-tag" />
    <id>http://www.improvetheweb.com/how-use-h1-heading-tag</id>
    <published>2007-05-09T10:31:26-05:00</published>
    <updated>2007-06-09T02:20:40-05:00</updated>
    <author>
      <name>Yuri</name>
    </author>
    <category term="Web design" />
    <summary type="html"><![CDATA[<p>Some are not aware that there's a h1 tag. Some use is as they please. Others try to think what makes the most sense and act accordingly.</p>
<p>Let's see what is the best way to use the h1 heading tag on your website to appease both the humans and the search engines.</p>
<h2>How is it supposed to be used?</h2>
<p>Judging by the <a href="http://www.w3.org/TR/html401/struct/global.html#h-7.5.5">HTML 4.01 Strict specification</a>:<br />
<cite>A heading element briefly describes the topic of the <strong>section</strong>* it introduces.</cite><br />
*- bolding mine.</p>
    ]]></summary>
    <content type="html"><![CDATA[<p>Some are not aware that there's a h1 tag. Some use is as they please. Others try to think what makes the most sense and act accordingly.</p>
<p>Let's see what is the best way to use the h1 heading tag on your website to appease both the humans and the search engines.</p>
<h2>How is it supposed to be used?</h2>
<p>Judging by the <a href="http://www.w3.org/TR/html401/struct/global.html#h-7.5.5">HTML 4.01 Strict specification</a>:<br />
<cite>A heading element briefly describes the topic of the <strong>section</strong>* it introduces.</cite><br />
*- bolding mine.</p>
<p>It means that not only a h1 tag can be used multiple times on a page, but it also determines a topical section of the page. Depending on the page type and structure, there may be several sections, so it can be pretty handy.</p>
<h2>How to use the h1 heading tag?</h2>
<p>So, as mentioned above, the right way to use h1 tag is to either describe a page or a section of a page, if the page has two distinct topics.</p>
<p>Of course, it may need some styling up with CSS, as default browser h1 styling leaves much to be desired, mostly. Especially, if you are using a custom theme design.</p>
<p>There are several cases, when a page can have numerous topics, and, thus, h1 tags:</p>
<ul>
<li>a homepage, introducing numerous site sections</li>
<li>an index page, introducing categories (or a category page, introducing its subcategories)</li>
<li>a page about something in general, then talking about different subtypes (for example a page about felines, first talking about them in general, then about wild cats, then about domestic cats)</li>
</ul>
<p>For the title of each of the page sections, you'd rather be using the h1 heading tag.</p>
<p>Here's <a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20070517/Overview.html#H42">a desrcription</a> of why the headings should be properly used from Web Content Accessibility Guidelines.</p>
<p>WCAG also has <a href="http://www.w3.org/WAI/GL/WCAG20/tests/test37.html">a test for the headings</a>:</p>
<blockquote>
<h2>Test Process</h2>
<h3>Procedure</h3>
<p>1. For each h1 element, find the header element that follows it.</p>
<h3>Expected Results</h3>
<p>1. The header following an h1 is h1 or h2.</p>
<h3>Fail Instructions</h3>
<p>1. Rearrange the header order so h1 or h2 elements follow h1 elements.</p>
<h3>Pass Instructions</h3>
<p>Any accessibility check may be performed after this test.
</p></blockquote>
<h2>How not to use the h1 tag</h2>
<p>Quite often, you will find that most WordPress and Drupal themes have h1 used for the site name (company name, etc). This is not the right way to use it, as every page has site name and, thus, the title does not describe anything page-specific.</p>
<p>Since we are talking about how not to use the h1 tag, you shouldn't use it only for the search engines - use it for the humans only by pointing out a heading, which describes a page or a page section.</p>
<h2>Rounding up</h2>
<p>Of course, the main reason to use the h1 right is the process of doing things right. A perfectionist that I am, it seems quite important.</p>
<p>Also, it gives people and spiders that can't see a chance to use the software to understand what the page is about. While using h1 for the page-specific titles may bring you a tiny little bit of traffic, you can create much better titles by <a href="http://www.improvetheweb.com/how-to-write-human-friendly-page-titles">writing them for the people</a>.</p>
<p>Learn more and <a href="http://www.cre8asiteforums.com/forums/index.php?showtopic=30813">discuss the topic at Cre8asite</a> and <a href="http://www.pearsonified.com/2007/04/definitive-guide-to-semantic-markup.php">learn more about semantic markup</a> at Pearsonified.</p>
    ]]></content>
  </entry>
</feed>
