Choosing Your <h1>

HTML 4.01 defines 6 levels of head­ings: <h1> - <h6>. These head­ings are hier­ar­chi­cal in nature, indi­cat­ing the impor­tance of their con­tent from most impor­tant to least. It is a matter of best prac­tice to label the title of each page with the <h1> tag.

Seman­ti­cally, it is impor­tant the <h1> tag iden­tify the core essense of the sub­ject page. Such prac­tice is also ben­e­fi­cial to the acces­si­bil­ity and search rank­ing of your site.

Yet in prac­tice, many web design­ers con­sis­tently wrap the site iden­ti­fi­ca­tion (i.e. com­pany name or web­site name) in the <h1> tag, leav­ing the remain­der of the con­tent to share the <h2> - <h6> tags. Now, it is com­pletely appro­pri­ate to wrap the site iden­ti­fi­ca­tion in a <h1> tag on the home­page, but this prac­tice should be resisted on sub­pages. But out of lazi­ness, this is often done.

Let’s remove excuse for the lazy, and pro­vide code to prop­erly use the <h1> tag.

The fol­low­ing HTML and PHP code pro­vides the logic to wrap the site iden­ti­fi­ca­tion in a <h1> tag on the home page, and in a simple <div> tag on the remain­der of pages:

<?php
  function isHomePage() {
    if( ($_SERVER["REQUEST_URI"] == "/") || (substr($_SERVER["REQUEST_URI"], 0, 7) == "/index.") {
      return TRUE;
    }
    return FALSE;
  }
?>

<?php if( isHomePage() ) { ?>
  <h1 id="siteID">Company Name</h1>
<?php } else { ?>
  <div id="siteID">
    <a href="/">Company Name</a>
  </div>
<?php } ?>

Of course, some con­tent man­age­ment sys­tems have built in func­tions that do the job of isHomePage(). For exam­ple, with Word­Press you can use is_page('Home').

The fol­low­ing is an exam­ple of CSS for styling your <h1> and site identification:

h1 {
  clear: both;
  margin: 36px 0 18px;
  font: 54px/54px  "Palatino Linotype", serif;
  text-align: left;
  color: #333;
  text-shadow: #ccc 3px 3px 3px;
  text-transform: capitalize;
  }
h1#siteID, div#siteID {
  clear: both;
  float: left;
  height: 90px;
  width: 400px;
  margin: 0;
  padding: 0;
  text-indent: -9999px;
  background: url('images/logo.png') no-repeat;
  }

With this han­dling of the site iden­ti­fi­ca­tion, you are now free to iden­tify the title of each sub­or­di­nate page as <h1>.