Is it considered bad to use a H3 header without using H2 or H1 on the page?

HTML & CSS
1

Hello everyone,

I have 2 quick questions. I am working on a layout that unfortunately lays out the text different on various pages.

  1. Is it considered bad practice if I use lets say a H3 element on a page that doesn’t have any H1 or H2 Elements? Basically, do I always need to go in order by using a H1 first, then H2 and then H3?

  2. Is it okay to use multiple H elements, like multiple H1, H2, or H3 elements if lets say I have multiple sections on the same page with titles?

The problem I am running into is on one page the title text for that page might have a certain styling while on another page the title text might have another styling. This is causing me to have to create a custom H1 and H2 class for the various pages. I was curious if I should go that route, or just create H1-H6 and for example using H1 as the title text for one page where it has a certain style and H2 on another page which has a different style for the title text?

I may not have explained the above correctly, been awake for almost 24 hours. Does what I said make sense? lol

Thank you in advance.

2

Firstly, I tend to go H1 -> H2 -> H3 as that’s semantically correct if you think about it. I’m not actually sure what common consensus is; but using a h2 without a h1 on the page doesn’t to my knowledge trip W3C validation.

As for search engines, I’ve heard people say that Google will treat your heading tags with different priority, but Google state otherwise; if the content is good then Google will still process it just fine.

Secondly, you can have multiple H tags of the same type on a page, they are simply there to distinguish headings from paragraph (or other) content.

Thirdly, an answer to your problem:

Stylesheets cascade; hence the name. So you can do something like this:


<div class="page">
   <div class="homecontent">
      <h1>My Homepage</h1>
      <p>
         Welcome to my website, blah blah blah.
      </p>
   </div>
</div>

This would be for the homepage, note that you have a class called “homecontent” that encapsulates the actual content itself, which is encapsulated by a page class.

The page class would be your main “content” wrapper, the homecontent class would be the wrapper for your content on that page (which could apply styles or could simply serve as a hook).

Then for example, your about page:


<div class="page">
   <div class="aboutcontent">
      <h1>About Us</h1>
      <p>
         About my company, blah blah blah
      </p>
   </div>
</div>

On this page your content wrapper is called “aboutcontent”

Now in your CSS you can do this:


.page .homecontent h1
{
   ... styles for the h1 tag, which will only be applied to h1 tags that are nested in a flow of .page -> .homecontent ...
}

.page .aboutcontent h1
{
   ... styles for the h1 tag, which will only be applied to h1 tags that are nested in a flow of .page -> .aboutcontent ...
}

So you can define your style classes in a hierarchy; so only tags that match the hierarchy are affected, while the two definitions above are for the same tag (h1), they exist in a different structure so are different; allowing you to apply multiple styles to the same tag within different scenarios.

3

As FizixRichard says, you can set different styles for different pages based on classes (say on the body element). But from a semantic (meaning) point of view, using an h3 without an h2 or h1 is not good practice.

However, HTML is starting to introduce a different document structure, whereby it’s OK to have multiple h1s on the page. Although that structure isn’t well recognized by browsers yet, it is an option, but better avoided if possible.

4

[FONT=Verdana]If you don’t happen to have a handy <div> already in place for FizixRichard’s suggestion, then you can add a class/id to the <body> tag on each page to provide tailored styles.

Using HTML tags for appearance rather than semantics is unnecessary and missing the point of CSS. :slight_smile:

Edit: Ninja’d by ralph.m. :)[/FONT]

5

Awesome, thanks for the input everyone :). All the replies fully answered my question.

6

True, I was just trying to keep it simple :blush: