SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 81
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,757
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question about H1's

    How many <H1> tags can you have on a web page?

    Is there only supposed to be one "supreme almighty <H1>", or can you have a few?

    My personal website is like an online newspaper. As such it has several content sections on the Home Page. One section (i.e. "Headlines") is in the Left Column, two more content sections (i.e. "Featured Article" and "Small Business") are in the main Center Column, and a fourth content section (i.e. "Upcoming Events") is in the RightColumn.

    Can each content area start off with an <H1> tag?



    Debbie

  2. #2
    SitePoint Addict
    Join Date
    May 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see why you can't have as many as you like. Why would having more than one be a concern?

    Rgds

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,757
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by accelerator View Post
    I don't see why you can't have as many as you like. Why would having more than one be a concern?

    Rgds
    Well, Headings are supposed to be descendants, right?

    I'm not sure - in database terms - if it is a "One-to-Many" or "Many-to-Many" relationship. (Where is r937?!)

    I was thinking you'd have only one <H1> per page, but could have multiple <H2>, <H3>,...


    Debbie

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    How many <H1> tags can you have on a web page?

    Is there only supposed to be one "supreme almighty <H1>", or can you have a few?

    My personal website is like an online newspaper. As such it has several content sections on the Home Page. One section (i.e. "Headlines") is in the Left Column, two more content sections (i.e. "Featured Article" and "Small Business") are in the main Center Column, and a fourth content section (i.e. "Upcoming Events") is in the RightColumn.

    Can each content area start off with an <H1> tag?
    Opinions are divided.

    Some people say that logically you can only have one <h1> on a page.

    Some people say that the site name and branding should be in an <h1>, others say it should not.

    If you take the view that the site name and branding should not be in an <h1>, it is perfectly possible to have a page that has no single top-level heading, but several equally important headings ... in which case, it would make sense to have them all as <h1>.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,757
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Opinions are divided.

    Some people say that logically you can only have one <h1> on a page.

    Some people say that the site name and branding should be in an <h1>, others say it should not.

    If you take the view that the site name and branding should not be in an <h1>, it is perfectly possible to have a page that has no single top-level heading, but several equally important headings ... in which case, it would make sense to have them all as <h1>.
    Well, here is the Header code that I am "including" in each web page...

    Code HTML4Strict:
    <div id="header">
    	<a href="<?php echo WEB_ROOT ?>index.php">
    		<img class="logo" src="<?php echo SECURE_WEB_ROOT ?>images/MyLogo.png" width="220" alt="My Logo" />
    	</a>
    	<p id="welcome">
    		<span class="redBold">
    			Helping small businesses get off to a good start!!
    		</span>
    	</p>
     
    	<ul id="topMenu">
    		<li class="current"><a href="<?php echo WEB_ROOT ?>index.php">Home</a></li>
    		<li><a href="<?php echo WEB_ROOT ?>articles/a_index.php">Articles</a></li>
    		<li><a href="<?php echo WEB_ROOT ?>casestudies/cs_index.php">Case Studies</a></li>
    		and so on...
    	</ul><!-- End of #TOPMENU -->
    </div><!-- End of #HEADER -->


    Did I just create a semantic nightmare??



    Debbie

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,757
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'd be curious to see what DeathShadow thinks, since he seems to be an expert on Semantics (among other things)...


    Debbie

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Well, here is the Header code that I am "including" in each web page...

    Code HTML4Strict:
    <div id="header">
    	<a href="<?php echo WEB_ROOT ?>index.php">
    		<img class="logo" src="<?php echo SECURE_WEB_ROOT ?>images/MyLogo.png" width="220" alt="My Logo" />
    	</a>
    	<p id="welcome">
    		<span class="redBold">
    			Helping small businesses get off to a good start!!
    		</span>
    	</p>
     
    	<ul id="topMenu">
    		<li class="current"><a href="<?php echo WEB_ROOT ?>index.php">Home</a></li>
    		<li><a href="<?php echo WEB_ROOT ?>articles/a_index.php">Articles</a></li>
    		<li><a href="<?php echo WEB_ROOT ?>casestudies/cs_index.php">Case Studies</a></li>
    		and so on...
    	</ul><!-- End of #TOPMENU -->
    </div><!-- End of #HEADER -->


    Did I just create a semantic nightmare??
    First question is what the heck you need <span class="redBold"> there for, given that (a) it's a daft name to give a class, and (b) it is the sole content of a paragraph with an ID ... why not just slap the style onto #welcome?

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,757
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    First question is what the heck you need <span class="redBold"> there for, given that (a) it's a daft name to give a class, and (b) it is the sole content of a paragraph with an ID ... why not just slap the style onto #welcome?
    I created that class so that when I want to highlight a few words I can do exactly what I did. (It just so happens that this case was the entire sentence.)

    Yeah, I could fix that one thing, but back to my larger question...


    Debbie

  9. #9
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,216
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I'm not sure - in database terms - if it is a "One-to-Many" or "Many-to-Many" relationship. (Where is r937?!)
    napping

    it should be one-to-one

    one page should have one main heading, as well as one title

    the heading and title should be extremely similar, if not identical

    the situation you describe is that you have one page (the home page) consisting of multiple sections, so these sections should have H2s, not H1s

    your H1 should say Home Page or however you choose to name it
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,757
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    napping

    it should be one-to-one

    one page should have one main heading, as well as one title

    the heading and title should be extremely similar, if not identical

    the situation you describe is that you have one page (the home page) consisting of multiple sections, so these sections should have H2s, not H1s

    your H1 should say Home Page or however you choose to name it
    My Home Page has a Top Menu, Left Column, Middle Column with two sub-sections, and a Right Column. (The HTML and CSS are fairly complex.)

    Nothing personal, but what you describe sounds like the first web pages out there where the content was linear and *conveniently* fit into a structure like...

    Code HTML4Strict:
    <h1>Our Vacation across the U.S.</h1>
     
    <h2>Month #1</h2>
    <h3>New York</h3>
    <h3>New Jersey</h3>
    <h3>Pennsylvania</h3>
     
    <h2>Month #3</h2>
    <h3>Utah</h3>
    <h3>Nevada</h3>
    <h3>California</h3>


    I don't think my Home Page has an all-inclusive <H1> per se, unless it it my company name?!

    (It looks like Yahoo's or CNN's home pages - very busy with lots of sections.)

    And even other pages (e.g. article on "Using QuickBooks to manage your Small Business") don't necessarily have an <H1> for the *entire* page.

    In this example, I would have...

    Code HTML4Strict:
    <h1>Using QuickBooks to manage your Small Business</h1>

    But I would NOT wrap the entire web page in an <H1> - that is so 1990s...


    Debbie

  11. #11
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    My personal opinion is I believe the h1 is sacred and there should only ever be one. I use the h1 to define the main content, focal point in a way. Everything else, sidebars, mastheads, footers, etc that wrap the main content use other heading levels based on the contents structure. Normally though headings inside sidebars are always marked up in a way that makes them less dominant than headings for the pages main content. h1 should be used to tell the user and machine the most important thing on the page. So the more h1s you use the less meaningful the h1 becomes, to human and machine. Taking that into consideration I do not mark-up branding with a h1. I mean… think about is practically. Pretend the h1 is the only thing you see on a page. So if you mark-up a logo as the h1 that gives no information about the pages content, what really matters. In regards to the standard news site home page the most logical h1 would probably be the featured story title I would think. Also, considering heading level in terms of human readers is tightly coupled to some type of visual property, generally size – emphasis that can be used as a way to determine a proper heading. I mean… would it really make sense to mark-up an content as a h1 yet make it the smallest thing on the page – I would think not, unless there where some other form of design emphasis in use.
    The only code I hate more than my own is everyone else's.

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,757
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    My personal opinion is I believe the h1 is sacred and there should only ever be one. I use the h1 to define the main content, focal point in a way. Everything else, sidebars, mastheads, footers, etc that wrap the main content use other heading levels based on the contents structure. Normally though headings inside sidebars are always marked up in a way that makes them less dominant than headings for the pages main content. h1 should be used to tell the user and machine the most important thing on the page. So the more h1s you use the less meaningful the h1 becomes, to human and machine. Taking that into consideration I do not mark-up branding with a h1. I meanů think about is practically. Pretend the h1 is the only thing you see on a page. So if you mark-up a logo as the h1 that gives no information about the pages content, what really matters.
    Makes sense, but particularly with my Home Page, that's a tough one...

    Using Paul O's 3-Column Blah Blah layout with a fair amount of "wrapper" <DIV> tags makes it tougher, and I will not create some God-<H1> for the sake of having a supreme element.

    If push comes to shove, do I hear you saying, "Pick whichever sub-section is most important and give it an <H1>"??

    I think part of my confusion with <H1>'s is that if you can have only one like you are saying, then to me, that implies everything else needs to map up to that <H1>?!

    The sections on my Home Page do map to the page itself, but the page itself doesn't have any logical semantic like my earlier vacation example, and since I'm using a more modern - read complex - layout using <DIV>'s there isn't a practical way to have an <H1> for the entire Home Page as r937 suggests.

    Also, can you have <H2>'s, <H3>'s, etc on a web page without an <H1>??


    Debbie

  13. #13
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    The best thing to do is pick the most important content and use a h1 for that. Logically, things in the center would seem more important than everything else. Than logically the item at the top in the center would seem more important to the one below it. Visually, I would expect the story in the center column at the top to the focal point. So to me it would make sense to follow through with that precedence with a h1. Speaking visually the most appropriate h1 is generally the heading accompanying or in close proximity to the focal point. oh… and by visually I mean the path the user should follow, which is directly related to how and when the user should experience the information.
    The only code I hate more than my own is everyone else's.

  14. #14
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,757
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    The best thing to do is pick the most important content and use a h1 for that. Logically, things in the center would seem more important than everything else. Than logically the item at the top in the center would seem more important to the one below it. Visually, I would expect the story in the center column at the top to the focal point. So to me it would make sense to follow through with that precedence with a h1. Speaking visually the most appropriate h1 is generally the heading accompanying or in close proximity to the focal point.
    Below is an example of what my Home Page might look like...

    (I'll mark it up and see if I'm following your advice?!)

    Left Column:
    <h2>Latest News</h2>
    News Link #1
    News Link #2
    :
    News Link #n

    Center Column:
    <h1>Featured Stories</h1>

    <h2>Fire Your Accountant and Try Quickbooks</h2>
    <p>Learn how take charge of your books...</p>

    <h2>College Interns: Friend or Foe?</h2>
    <p>Bringing on an unpaid college intern may not make the most business sense...</p>


    Right Column:
    <h2>Ask The Expert</h2>
    <p>Dear Debbie...</p>

    <h2>Business Workshops</h2>
    <p>The BBB will be holding the following Small Business workshops...</p>

    <h2>Tip of the Week</h2>
    <p>Voice-Over IP is more affordable than ever...</p>


    What throws me off is that logically all of the <H2>'s don't map back to my one <H1> in the example above. And that is why I was putting each section at the same level - whether that be <H1> or <H2>.



    Debbie

  15. #15
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,216
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    But I would NOT wrap the entire web page in an <H1> - that is so 1990s...
    you asked (hinted for) my opinion, so i gave it to you

    then you shouted and laughed at me

    that wasn't very nice and i'm a bit miffed

    one H1 per page is a very good convention, and that's not just my opinion, others hold it too for good reason, and if you don't understand why, then you know what? i'm not going to attempt to explain it to you because i've got a really low tolerance for abuse

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  16. #16
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,757
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    you asked (hinted for) my opinion, so i gave it to you

    then you shouted and laughed at me

    that wasn't very nice and i'm a bit miffed
    I was not shouting.

    I just bold things that are important in my endless paragraphs of babble.

    It is a chuckle, and meant to be light-hearted.

    (You're reading too much into this.)



    one H1 per page is a very good convention,
    I don't disagree.


    and that's not just my opinion, others hold it too for good reason, and if you don't understand why, then you know what? i'm not going to attempt to explain it to you because i've got a really low tolerance for abuse
    Abuse is disagreeing with you?

    Must not have been a very good nap...

    One H1 per page when you can logically assign one, sure.

    One H1 per page that is contrived for the sake of having on H1 per page, no.

    If there was one logical H1 for my current Home Page I wouldn't be asking for help!

    Not sure what all of the crabbiness is about, but I was NOT being mean or rude. I just bolded some sentences that I wanted to stand out, and I added some laughter to lighten things up. Not to be called "abusive"...



    Debbie

  17. #17
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think DoubleDee is getting bogged down in "rules" that simply aren't cut and dried. For god's sake, use <h1> however you like. The HTML Police aren't going to break down your door if you're violating some arbitrary rule. There isn't only one "right" way to code a page.

  18. #18
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,757
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EarlyOut View Post
    I think DoubleDee is getting bogged down in "rules" that simply aren't cut and dried. For god's sake, use <h1> however you like. The HTML Police aren't going to break down your door if you're violating some arbitrary rule. There isn't only one "right" way to code a page.
    I realize that, but I'm trying use a "best practices" approach as much as possible so I can grow up to be a superstar someday like Paul O or Rayzur or Stomme and lots of others on SitePoint!

    Besides, nobody likes sloppy implementations!


    Debbie

  19. #19
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    huh…

    notice: what does the first line say? –

    The h1 element is used to indicate the most important (or highest-level) heading on the page. – note that is singular not plural. Again, that means one, not two, three, eight or hundred – one per page.
    The only code I hate more than my own is everyone else's.

  20. #20
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But there's no agreement about what "best practices" are, so you're chasing a phantom. You'll encounter some strongly, even vehemently, held opinions here, but they're just that - opinions.

  21. #21
    SitePoint Enthusiast rainner's Avatar
    Join Date
    Apr 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The way i see it is all tags are nothing but wrapping containers with different styles applied to them. You can make a b tag look exactly as an h1 tag and vise-versa. There's no rule that says you can only use one of each tag per page, aside from the head tag and it's meta tags.

    Whenever you feel like showing some big text that can be used as a header for a section on the page, use an h1, they already did the CSS work for you. Go nuts..

  22. #22
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,757
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oddz,

    So what about my attempt here??


    Debbie

  23. #23
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by EarlyOut
    But there's no agreement about what "best practices" are, so you're chasing a phantom. You'll encounter some strongly, even vehemently, held opinions here, but they're just that - opinions.
    I guess the author is wrong then.

    Quote Originally Posted by rainner
    Whenever you feel like showing some big text that can be used as a header for a section on the page, use an h1, they already did the CSS work for you. Go nuts..
    Elements should never be chosen based primarily on display properties.

    The way i see it is all tags are nothing but wrapping containers with different styles applied to them. You can make a b tag look exactly as an h1 tag and vise-versa. There's no rule that says you can only use one of each tag per page, aside from the head tag and it's meta tags.
    The topic is the h1 and nothing more. You can have billion h2s if you like, spans, even font tags, but only one item can be most important. Once you begin using multiple h1s the meaning of the tag is lost – again most important.
    The only code I hate more than my own is everyone else's.

  24. #24
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    I guess the author is wrong then.
    No, the author is simply expressing an opinion.

  25. #25
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by DoubleDee
    So what about my attempt here??
    I think that is fine though your going a little h2 crazy but yeah. In my opinion I would have the sidebar content headings be h3 probably. They are essentially less important than the featured stories… I mean that is why they are at the side – right.

    Quote Originally Posted by DoubleDee
    Well, Headings are supposed to be descendants, right?
    Headings should be chosen based on precedence, relative to one another absolute to the entire document.
    The only code I hate more than my own is everyone else's.


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
  •