Choosing Your <h1>

Choos­ing the proper text to des­ig­nate as your top level head­ing can improve your site’s acces­si­bil­ity and search engine rank­ing. This arti­cle shows you how to prop­erly bal­ance indi­vid­ual page names and over­all site identification.

HTML 4.01 defines 6 lev­els 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 mat­ter 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 sim­ple <div> tag on the remain­der of pages:

  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>
<?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>.

Jeffrey D. King

About the Author

Jef­frey D. King is a web designer and con­sul­tant in San Diego. Jeff is pas­sion­ate about the inter­sec­tion of busi­ness and the inter­net. As a stu­dent of design, usabil­ity, brand­ing, and entre­pre­neur­ial strate­gies, he can help your orga­ni­za­tion achieve online success.

Leave a Comment

Please note our comment and privacy policies.