Proper tag for a lesser title

[csdude55]

I'm already using all of my H1-H6 tags elsewhere, and now I'm in a position where I have sub titles that will be styled separately.

Can you guys and gals suggest an HTML5 tag that would be appropriate for a lesser title on a page? I can always use a tag with a class, of course, but if there's a more appropriate tag then I'd rather use it.

[not2easy]

Please tell us that you are not using your <h tags for styling. The <h1 - <h6 should be used to indicate the hierarchy of the page contents' structure. When used as intended they can help bots better understand your page. If it is just too late and there is just too much involved, you can use classes with <h tags.

Browsers have default sizes for <h tags, whether you declare some size or not is optional. Before css came to be a thing, in old html4 I admit to using <h tags for style, but that is a misuse today and can distort bots' understanding of your content.

[csdude55]

Yes and no... I use H1-3 to style my logo, primarily for search engines. It helped a lot in the past... maybe not so much now, there are so many variables that it's hard to know anymore.

Sorta like:

<style>
H1, H2 {
 display: inline;
 font-size: 20px;
}

H3 {
 font-size: 16px;
}
</style>

<H1>Webmaster</H1>
<H2>World.com</H2>
<H3>A great forum for webmasters</H3>

I use H4-6 for traditional titles, though.

I can't for-the-life-of-me figure out where I'm using H4, though! I'm not finding it anywhere, so that might just be left over in the CSS from my old site. Which would kinda suck since I'm using H5 and H6 as traditional titles throughout the site, so I should really change all of them if I'm going to use H4 above them...

[not2easy]

Using <h1> for your logo styling isn't the best use of it because that is like saying, "This page is about Sitename" on every page. Though <h1> is so often misused it doesn't have the importance it was meant to have. There have been several good discussions about its proper use, here's one from 2019: [webmasterworld.com...]

It is not uncommon to have multiple <h2> elements on a page and due to some WP themes building in a <h1> default it became unofficially acceptable to have more than one <h1> on a page. It is kind of up to you if you want to stick to common or proper meanings for them at this point. It is not a good practice to use the <hn> tags just for styling though.

In html5 there are semantic tags like <heading> but they don't have any real benefit (yet). You could assign a style to <heading> elements if that works for your use. Semantic tags are used mostly for convenience of the person creating or editing a page. See this discussion: [webmasterworld.com...]

[tangor]

In the code sample above semantically this is not a logo, but a very abbreviated (and poorly written) document. Sadly, it appears at the top of every page on the site, thus diminishing the value of every page as that page now has the same "title" (h1). This would be Semantic Suicide.

Conversely, the same effect can be done with ordinary <p class> stuff WITH GREAT RELIABILITY (after all it is now CONTENT) rather than using anything in the h series.

That said, many of us have been around since there were dinosaurs on the web and we just might have a bunch of pages coded to the era/style of the day and migrating that elder content to a fully semantic layout might be more effort than it is worth.

If it ain't broke, don't fix it, just don't expect SEO miracles because the SEs one wants to optimize caught on to this trick sometime around 1999 and by 2005 that practice was largely deprecated (ie, no SEO value remained).

AFAIK there is no <logo> tag ... but I could be wrong!

[csdude55]

I feel like I started that sometime around 2005, so yeah, I'm sure it's a super outdated idea. But I DID find that W3.org uses <H1> for their logo!

<h1 class="logo"><a tabindex="2" accesskey="1" href="/"><img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C" /></a> <span class="alt-logo">W3C</span></h1>

So does Fakebook, but they're not exactly known for their quality programming:

<h1 class="_19ea" data-click="bluebar_logo"><a class="_19eb" data-gt="&#123;&quot;chrome_nav_item&quot;:&quot;logo_chrome&quot;&#125;" href="https://www.facebook.com/?ref=logo" title="Go to Facebook Home"><span class="_2md">Facebook</span></a></h1>

In my case, <H1> should at least indirectly apply to every page (sorta how "<H1>Webmaster</H1>" should indirectly apply to any page on here), but I'm really wasting the <H2> tag. Maybe it's time for me to revisit that whole concept... wish I'd done it 6 months ago, now it's going to be a major fix :'-(

[tangor]

Bear in mind that under html5 headers, footers, sections, navs, captions, and asides call all each LEGALLY have their own H1 ...

So I wouldn't worry too much over this. The "if it ain't broke don't fix it" applies here.