SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Need help Changing Page Semantics

    I could use some help re-doing the HTML Semantics for my web page.

    Currently, I have my Company Name as the <h1>, then a Navigation Bar composed of a <ul>, then a box in the main area with an <h2> as it's name, and finally some unrelated boxes in the right margin.


    Now here is a screen-shot of my NEW layout...
    Attachment 62181


    When I first created this layout 18 months ago, it worked great, because everything under my main box related to the tab selected (e.g. "Finance").

    But since things have grown, here are my new problems...

    First of all, I just added the "Business Structure" and "Seasonal" boxes in the right margin, and they really relate to "Finance". (But visually and semantically, they are unrelated, which is wrong.)

    Secondly, I am further sub-dividing what is listed in the main box. So the new boxes like the "Economy" SubSection - and others below it - really should relate to a new label called "Featured (SubSections)", and not "Finance". (So the box I originally had is not longer accurate.)


    Here is what I would *ideally* like to do...

    1.) Make each "Section" on my Navigation Bar be an <h2> tag instead of <a> tag.

    2.) Semantically speaking, make it so that everything beneath the chosen "Section" Navigation Tab is subordinate to it. (This will eliminate the need for the box I currently have called "Finance".)

    3.) Change label of the box in the main area from "<h2>Finance</h2>" to "<h3>Featured</h3>". (However, this should semantically tie up to the "Finance" Navigation Tab.)

    4.) Make any new boxes in the Right Margin <h3>'s. (Again, semantically these should tie up to the "Finance" Navigation Tab.)


    Visually this seems really straight-forward.

    But sematically, I'm afraid that browsers won't know what I'm doing... (Especially since there is the concept of an "active tab" and "inactive tabs".)

    Hope that makes sense?!

    So, is it possible to do what I just tried to describe??

    Sincerely,


    Debbie

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Debbie,

    I would use an H1 for Double DEE inc although there are arguments that logos and site names shouldn't be an h1 but to me it makes sense as that is the first thing you need to know i.e. "What site am I on?".

    The navigation should not be heading tags at all but an unordered list as it is a means of navigation and not a heading for that page. Therefore I would disregard the navigation from your heading structure as it will only confuse the issue.

    You should probably then add a proper h2 Heading under the navigation with a brief description of what the page is all about and then you can continue with all your separate boxes with their headings starting at h3 for Finance, h4 economy and h5 for "Which state supports main street".

    That will also allow you to start the boxes in the right columns as h3 also.

    That's how I would do it anyway.

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul!!


    Quote Originally Posted by Paul O'B View Post
    Hi Debbie,

    I would use an H1 for Double Dee inc although there are arguments that logos and site names shouldn't be an h1 but to me it makes sense as that is the first thing you need to know i.e. "What site am I on?".
    Yep, I already have that. (Last year, DeathShadow convinced me that was the best way to do things!!)


    Quote Originally Posted by Paul O'B
    The navigation should not be heading tags at all but an unordered list as it is a means of navigation and not a heading for that page. Therefore I would disregard the navigation from your heading structure as it will only confuse the issue.
    This is what I currently have...
    HTML Code:
    	<ul id="topMenu">
    		<li >
    			<a href="/">Home</a>
    		</li>
    
    		<li class="current">
    			<a href="/finance/">Finance</a>
    		</li>
    
    		<li >
    			<a href="/legal/">Legal</a>
    		</li>
    
    		<li >
    			<a href="/management/">Management</a>
    		</li>
    	</ul><!-- End of #TOPMENU -->

    Before going on, I want to clarify some things... (Please see updated screen-shot below.)

    Attachment 62214


    Originally I had the box with a dark grey heading that read "Finance", and all was fine. (See screen-shot in OP).

    But then I did two things to mix things up...

    First, added the concept of "Sub-Sections" in the box that used to read "Finance". (And since all of those new boxes relate to the "Dimension" called "Featured", I wanted to re-label the dark grey heading to "Featured".)

    Secondly, I added "Dimension" boxes in the right margin. (And since like "Featured" that also roll up under the "section" of "Finance", I had an issue...)

    Put another way, when you click on any of the navigation tabs - which represent "Sections" - everything you see below ultimately relates to that selected "Section", and so I need my HTML to reflect that to help the Search Engines out!!



    Quote Originally Posted by Paul O'B
    You should probably then add a proper h2 Heading under the navigation with a brief description of what the page is all about
    Hmmm... Interesting proposal.

    So you don't think that will clutter up my page?

    (I haven't built them yet, but I was planning on adding "breadcrumbs", and between the Navigation Tab, and this new Heading you are proposing, and Breadcrumbs, that sorta seems like "information overload"?! Although I can certainly see the merits in what you are saying...)


    Quote Originally Posted by Paul O'B
    and then you can continue with all your separate boxes with their headings starting at h3 for Finance, h4 economy and h5 for "Which state supports main street".

    That will also allow you to start the boxes in the right columns as h3 also.

    That's how I would do it anyway.
    So, based on my latest screen-shot above, let me repeat what I believe you are saying...
    Code:
    <h1> = Double Dee
    
    <ul> = Navigation Tab
    
    <h2> = Paul O's suggested addition  (I'm not sure what it should exactly say?!)
    
    <h3> = Featured box
    <h4> = Economy
    <h5> = Which States Support Main Street
    :
    <h4> = Markets
    <h5> = Billionaire Paulson Loses More Than $300 Million as Gold Falls
    :
    
    <h3> = Business Structure
    <h4> = Sole Proprietorship
    :
    
    <h3> = Store Type
    <h4> = Brick & Mortar
    :

    Did I understand you correctly??

    Sincerely,


    Debbie

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post


    Hmmm... Interesting proposal.

    So you don't think that will clutter up my page?
    It's always nice to land on a page and know what its about straight away without having to guess from all the various elements. The same applies to search engines and a nice heading and introduction high up in the html is going do to nothing but good. Of course there are design issues and it's up to you to decide whether its detrimental to your design or not. There are always compromises which is why there is never one right answer

    Breadcrumbs are good if the user has had to drill down to get to that page.

    I think you have most of the right ideas anyway and you just need to decide on what are the most suitable descriptions for your headings. (I have to rush out now back later.)

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It's always nice to land on a page and know what its about straight away without having to guess from all the various elements. The same applies to search engines and a nice heading and introduction high up in the html is going do to nothing but good. Of course there are design issues and it's up to you to decide whether its detrimental to your design or not. There are always compromises which is why there is never one right answer
    Okay, so following your line of thinking...

    1.) What should this new Heading say?

    Should it simply be <h2>Finance</h2>?

    Or <h2>Finance Home</h2>?

    Or maybe <h2>Finance Home Page</h2>?

    Or would it be better if it was a phrase like this... Finance: Learn how to manage your Business's Money


    2.) And how would I properly mark-up something like this...

    Finance: All about managing your Business's Money

    Legal: Protecting Yourself and Your Business

    Management: Balancing the Competing Demands of a Business


    Should all of those be wrapped in <h2></h2>?

    Or just the Section Name?

    And then what about the part after the colon?


    Quote Originally Posted by Paul O'B
    Breadcrumbs are good if the user has had to drill down to get to that page.
    Yes, except maybe a little "busy" if I add the Heading you are proposing...

    So WHERE would you put the Breadcrumbs?

    Which order makes more sense to you...
    Code:
    Navigation Bar
    Breadcrumbs
    Section Header (new)
    Featured Box

    Code:
    Navigation Bar
    Section Header (new)
    Breadcrumbs
    Featured Box


    Quote Originally Posted by Paul O'B
    I think you have most of the right ideas anyway and you just need to decide on what are the most suitable descriptions for your headings. (I have to rush out now back later.)
    So, as a "Plan B", let's say I decide that adding a Section Heading is just too much information for people to process...

    What would be the proper way to create an <H2> heading that Search Engines (and screen readers) can see it, but hide it off the screen so that sighted users will never see it?

    Thanks for all of your help so far!!

    Sincerely,


    Debbie

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Okay, so following your line of thinking...

    1.) What should this new Heading say?

    Should it simply be <h2>Finance</h2>?

    Or <h2>Finance Home</h2>?

    Or maybe <h2>Finance Home Page</h2>?

    Or would it be better if it was a phrase like this... Finance: Learn how to manage your Business's Money
    The latter seems best to me.

    If you have a breadcrumb then perhaps incorporate that heading into your breadcrumb.
    Code:
    <p>You are here: Home > Somewhere else > </p><h2>Finance: <span>Learn how to manage your Business's Money</span></h2>
    Or if you don't like that approach then do something like this:

    Code:
    <p>You are here: Home > Somewhere else > <strong>Finance</strong></p>
    <h2>Learn how to manage your Business's Money</h2>
    There doesn't seem to be a need to call the h2 "Finance" as "Learn how to manage your Business's Money" says it all.

    2.) And how would I properly mark-up something like this...

    Finance: All about managing your Business's Money

    Legal: Protecting Yourself and Your Business

    Management: Balancing the Competing Demands of a Business
    [/quote]

    If the above are separate sections and not under any general heading (apart from the site name) then they should be h2s but if these sections are all covered by the main h2 then these should be h3s instead.

    Code:
    <h2>Management:<span> Balancing the Competing Demands of a Business</span><h2>
    Again the actual word "management" may be superfluous as you have a good description following the colon but it may be good to keep it for simple identification.

    So, as a "Plan B", let's say I decide that adding a Section Heading is just too much information for people to process...

    What would be the proper way to create an <H2> heading that Search Engines (and screen readers) can see it, but hide it off the screen so that sighted users will never see it?
    I'm not keen on moving headings out of view as they are important elements and it would seem as though you were hiding something for seo reasons only which is something search engines dislike you doing. You should code for humans first and foremost. If you think that a separate h2 page heading is too cluttered then just use h2s for the sections as already discussed above.

    There is a danger of over-thinking the problem and while semantics are important it shouldn't be so hard to do that no one gets it right. As long as everything is logical and in good order you can bend the rules here and there to fit in with the design a little. No two people will agree on a perfect solution but as long as you are thinking clearly and have good reasons to do something a specific way then I don't see a problem with that.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul, stop "rockin the boat"...


    Here are my thoughts on your latest comments...

    I spent an enormous amount of time designing my website (i.e. Data Model, Pretty URL's, etc.) around a handful of "Sections" (e.g. Finance, Legal, Management, etc.) and so those need to remain consistent through my website and code.

    As such, I would respectfully have to disagree with this comment...
    There doesn't seem to be a need to call the h2 "Finance" as "Learn how to manage your Business's Money" says it all.

    At the same time, I can now see that spelling out what a given Section landing page is about, can't hurt. (While things may seem "obvious" to me, that may not be the case for new visitors to my website, or to search engines.)


    So, to re-ask a question that wasn't as clear as it could have been...

    Let's say that I have the following "Sections": Finance, Legal, and Management.

    Each one would be represented as such in the URL (e.g. www.debbie.com/finance/ )

    And each one would have its own "Section landing page" like my screen-shot above.


    So, sticking with my requirements above, but also trying to incorporate your suggestions, here are some ideas...


    From an HTML SEMANTIC standpoint, I could maybe do this:

    Semantic Options #1:
    Code:
    <h2>Finance: All about managing your Business's Money</h2>
    
    <h2>Legal: Protecting Yourself and Your Business</h2>
    
    <h2>Management: Balancing the Competing Demands of a Business</h2>

    Semantic Options #2:
    Code:
    <h2>Finance</h2><some tag>: All about managing your Business's Money</some tag>
    
    <h2>Legal</h2><some tag>: Protecting Yourself and Your Business</some tag>
    
    <h2>Management</h2><some tag>: Balancing the Competing Demands of a Business</some tag>

    Semantic Options #3:
    Code:
    Other???

    -------------
    And from a VISUAL standpoint, here are some options:

    Visual Options #1:
    Code:
    Finance: All about managing your Business's Money
    
    Legal: Protecting Yourself and Your Business
    
    Management: Balancing the Competing Demands of a Business

    Visual Options #2:
    Code:
    Finance: All about managing your Business's Money
    
    Legal: Protecting Yourself and Your Business
    
    Management: Balancing the Competing Demands of a Business

    Visual Options #3:
    Code:
    Other??

    -------------
    As far as Breadcrumbs go, I guess it depends on how you answer the above proposals?!



    -------------
    Quote Originally Posted by Paul O'B View Post
    I'm not keen on moving headings out of view as they are important elements and it would seem as though you were hiding something for seo reasons only which is something search engines dislike you doing. You should code for humans first and foremost. If you think that a separate h2 page heading is too cluttered then just use h2s for the sections as already discussed above.
    Fair enough.

    So hopefully you can guide me to finding a win-win solution!



    -------------
    Quote Originally Posted by Paul O'B View Post
    There is a danger of over-thinking the problem and while semantics are important it shouldn't be so hard to do that no one gets it right. As long as everything is logical and in good order you can bend the rules here and there to fit in with the design a little. No two people will agree on a perfect solution but as long as you are thinking clearly and have good reasons to do something a specific way then I don't see a problem with that.
    Well, this much I know...

    There is no way I screw things up like the NY Times, LA Times, Chicago Tribune, and most every other major online newspaper does... (How can you have a web page with no <h1> tag??)

    Sincerely,


    Debbie

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Paul, stop "rockin the boat"...


    From an HTML SEMANTIC standpoint, I could maybe do this:

    Semantic Options #1:
    Code:
    <h2>Finance: All about managing your Business's Money</h2>
    
    <h2>Legal: Protecting Yourself and Your Business</h2>
    
    <h2>Management: Balancing the Competing Demands of a Business</h2>
    Semantic Options #2:
    Code:
    <h2>Finance</h2><some tag>: All about managing your Business's Money</some tag>
    
    <h2>Legal</h2><some tag>: Protecting Yourself and Your Business</some tag>
    
    <h2>Management</h2><some tag>: Balancing the Competing Demands of a Business</some tag>
    Either of those are fine as far as I am concerned but feel that the first version would carry more weight. Single word headings are fine but often ambiguous so a little extra detail in the heading won't hurt as long as its succinct.

    If the descriptive text was longer and more detailed then the latter versions would be better and the "sometag" element should be a "p" element.

    As for the breadcrumbs then it all depends if you have pages that are reached by drilling down and down to reach them as you should leave a trail of breadcrumbs to show how to get back up to where you have come from. If pages are accessed in one click then its not an issue but on sub sub pages I would include a breadcrumb.

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Either of those are fine as far as I am concerned but feel that the first version would carry more weight. Single word headings are fine but often ambiguous so a little extra detail in the heading won't hurt as long as its succinct.
    Duly noted.


    If the descriptive text was longer and more detailed then the latter versions would be better and the "sometag" element should be a "p" element.
    Okay.


    As far as Search Engines are concerned, does it matter if a heading is longer like this...
    HTML Code:
    <h2>Management: Balancing the Competing Demands of a Business</h2>
    (From an "indexing" standpoint, I would think that something shorter like "Management" would be more useful to a Search Engine?!)


    As for the breadcrumbs then it all depends if you have pages that are reached by drilling down and down to reach them as you should leave a trail of breadcrumbs to show how to get back up to where you have come from. If pages are accessed in one click then its not an issue but on sub sub pages I would include a breadcrumb.

    If decided to use this example that you provided earlier...

    Code:
    <p>You are here: Home > Somewhere else > </p><h2>Finance: <span>Learn how to manage your Business's Money</span></h2>
    Then is there any rule saying that I can't style the longer <h2> in a *diminutive* way so that it can serve as a Heading and as part of the Breadcrumb, and not stick out like a sore thumb?!

    Sincerely,


    Debbie

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post

    As far as Search Engines are concerned, does it matter if a heading is longer like this...
    HTML Code:
    <h2>Management: Balancing the Competing Demands of a Business</h2>
    As soon as you try to second guess search engines you have already lost. Think instead of your users and what makes more sense to them and the chances are that you will score higher with the search engine. It's all about context.

    (From an "indexing" standpoint, I would think that something shorter like "Management" would be more useful to a Search Engine?!)
    On its own it could be any sort of "management" and I believe search engines are looking for a specific context and I would expect a lower score for a single word like that unless it was quickly backed up by the context to which it refers. But here we go again trying to second guess something mostly beyond our control. Lets concentrate on our visitors -what's good for the goose is usually good for the gander.


    If decided to use this example that you provided earlier...

    Code:
    <p>You are here: Home > Somewhere else > </p><h2>Finance: <span>Learn how to manage your Business's Money</span></h2>
    Then is there any rule saying that I can't style the longer <h2> in a *diminutive* way so that it can serve as a Heading and as part of the Breadcrumb, and not stick out like a sore thumb?!
    Refer to lesson one in CSS

    1) CSS doesn't care what an element looks like (neither do search engines).

    A heading is a title to a section. Who says the heading should be big / small / sky blue pink. It's your design you can design it how you wish (within reason). Styling an element will not change the html semantics at all. as long as the structure is sound then there's no problem.

    e.g.The breadcrumb structure I mentioned was effectively this in html terms.

    Code:
    <p>lorem ipsum</p>
    <h2>Lorem ipsum heading></h2>
    The fact that you styled the heading to flow on from the p element above and in the same text size makes no difference to the html. It's still the same html.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It would be useful if others watching could chime in here with opposing views so that you get both sides of the coin (or even more confused)

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It would be useful if others watching could chime in here with opposing views so that you get both sides of the coin (or even more confused)
    Ha ha, yes, the more people that chime in, the better.

    But I will say this, Paul...

    As usual, you have given me a WEALTH of Best Practices, Knowledge, and Ideas on my OP!!

    I will have to digest all of this for a bit, and of course, play around with different scenarios, and see what makes the most sense for my particular website.

    But the good news is that I have my eyes on the finish-line on this particular issue, and that is always a good feeling. (I am also excited, because deep down I have a real appreciation for Good Semantics and Good Content, so this entire thread is exciting to me!!!)

    Thanks for all of your help so far!!!

    And I look forward to what others might have to say as well!

    Sincerely,


    Debbie


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
  •