Multiple H1 Tags and Drupal

I've always worked hard with my drupal theme designs to make sure that each page has just one <h1> tag.  The front page should have the site title wrapped with <h1>s, and the other pages should have the page title wrapped with <h1>s (maybe having the site title in a large - but non H-tag - element).

Often, drupal themes as distributed require some hacking to make this work.  Unless a specific check is done in the processing for the site-title in the header section - to check whether a page is the home page - multiple H1 tags are likely. Zen has one way of doing this that I more or less follow; some other themes do it differently; some themes don't do it at all (and need hacking).

Interestingly, I had always thought it was a commandment to not have multiple H1 tags.  But I just ran across Matt Cutts's recent youtube explanation that multiple H1 tags aren't strictly forbidden.

Nevertheless, even in light of the video, I still think I'm taking the correct approach: just one h1 tag per page, which is the page title for all pages other than the front page.  By the way, I also specifically change the input filters for content on all pages to prohibit use of the h1 tag in all text.  (For anonymous users, the input filter is even configured to bar the use of any header tags in the text fields.)

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Garland: replace page title <h1> with span class

I've been looking around for a lazy man's fix for this issue in the garland theme for Drupal 6 and well.... i couldn't find one so i went ahead and did it.

To replace the tag that drupal ads to the site title, i decided to make my own class called .myTitle and replace the heading1 tag with .

It does the job well, though i haven't checked to see if h1 is used in content headings by default...

To replace it in the header, make a copy of the garland theme and paste it in sites>all>[make new folder called 'themese']>[make new folder called 'MyGarland']. next, rename 'garland.info' to 'myGarland.info.' open that file and change the name to myGarland and save it.

Enable your new theme through the admin pannel (administer>sitebuilding>themes) and set it as default. Open up the page sites>all>themes>myGarland>page.tpl.php and...

REPLACE:
if ($logo || $site_title) {
print '
';
if ($logo) {
print '';
}
print $site_html .'
';

WITH:
if ($logo || $site_title) {
print '
';
if ($logo) {
print '';
}
print $site_html .'
';

now we need to edit our .css files to accommodate the new class. Start by opening sites>all>themes>myGarland>style.css and add the following to the bottom:

/* -- @start MyClasses -- */
.myTitle {
margin: 0;
padding: 0;
font-weight: normal;
font-family: Helvetica, Arial, sans-serif;
font-size:170%;
}

#wrapper #container #header .myTitle, #wrapper #container #header .myTitle
a:link, #wrapper #container #header .myTitle a:visited {
line-height: 120px;
position: relative;
z-index: 2;
white-space: nowrap;
}

#wrapper #container #header .myTitle span {
font-weight: bold;
}

#wrapper #container #header .myTitle img {
padding-top: 14px;
padding-right: 20px; /* LTR */
float: left; /* LTR */
}

#wrapper #container #header .myTitle, #wrapper #container #header .myTitle
a:link, #wrapper #container #header .myTitle a:visited {
color: #fff;
font-weight: normal;
text-shadow: #1659ac 0px 1px 3px;
font-size: 1.5em;
}

#wrapper #container #header .myTitle a:hover {
text-decoration: none;
}

/* -- @end My Classes -- */

Next, open style-rtl.css and add this:
/* -- @Start My Classes -- */
#wrapper #container #header .myTitle img {
padding-right: 0;
padding-left: 20px;
float: right;
}

And finally, open print.css and add:
/* -- @Start My Classes -- */

#wrapper #container #header .myTitle, #wrapper #container #header .myTitle
a:link, #wrapper #container #header .myTitle a:visited {
text-shadow: none;
color: #000;
}
/* -- @end My Classes -- */

that should do it.

I'm a complete newb to Drupal, but this is pretty much just css stuffs. hope this makes it easy on a few of you out there! please critique, correct exeterra - i have a lot to learn about drupal!!