SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    SitePoint Addict FizixRichard's Avatar
    Join Date
    May 2003
    Location
    UK
    Posts
    372
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

    http://www.youtube.com/watch?v=iR5itZlq8sk


    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:



    HTML Code:
    <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:

    HTML Code:
    <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:

    HTML Code:
    .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.
    Last edited by FizixRichard; Jul 8, 2012 at 05:16. Reason: Cleared it up a bit
    FIZIX - Full Service Digital Agency - Engaging websites, apps and games.
    Follow us @FIZIXAgency

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,177
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    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.

    Edit: Ninja'd by ralph.m.

  5. #5
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, thanks for the input everyone . All the replies fully answered my question.

  6. #6
    SitePoint Addict FizixRichard's Avatar
    Join Date
    May 2003
    Location
    UK
    Posts
    372
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    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.

    Edit: Ninja'd by ralph.m.
    True, I was just trying to keep it simple
    FIZIX - Full Service Digital Agency - Engaging websites, apps and games.
    Follow us @FIZIXAgency


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •