SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  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
    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)

  8. #8
    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
  •