SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Heading order [was: Issues]

    Code:
    <h2 class="structural">Main Menu</h2>
    <ul id="menu-main">
    ....
    </ul>
    
    <div id="content">
    	<h1>About</h1>
            ..........
    </div>
    Would make your document 'semantically' invalid. Also, there may be no <hx> tags before the <h1>. I prefer to place my menu before the content in the markup, and most of the time have nested lists, so when I have something like this:

    Code:
    <h2 class="structural">Main Menu</h2>
    <ul id="menu-main">
    	<li>
    		<h3><a href="#">Home</a></h3>
    		<ul>
    			....
    		</ul>
    	</li>
    	...
    </ul>
    
    <div id="content">
    	<h1>About</h1>
            ...........
    </div>
    the document becomes 'semantically' invalid.

    Also, what do you guys think about physically hiding presentational images(JavaScript libraries can cause this occasionally) when styles are turned off. So basically, css would have full control of the dimensions.

    Code:
    <img src="presentational.gif" width="0" height="0" alt="" />
    Last edited by cooper.semantics; Oct 30, 2008 at 00:17. Reason: Added '...' - to indicate the rest of document.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The H1 is the heading for the entire document, so it should appear first in the markup, not buried inside the content DIV.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Tommy

    skip nav -
    logo -
    menu -
    h1?

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the menu-main is for site navigation i.e. it shift the page to another page, then I consider it as (in printing terms) belonging to the head of page. And so it is not content and can't have headings.

    If it is structual it navigates on the page and can have headings, but then the h1 should be on top or start the page-navigation.

    Abou the image; it is not content and imho it should be used as a background.
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    @Tommy

    skip nav -
    logo -
    menu -
    h1?
    I'd do,
    1. logo
    2. h1
    3. jump to navigation
    4. content
    5. navigation


    If you want navigation before content,
    1. logo
    2. h1
    3. jump to content
    4. navigation
    5. content


    The logo (with the company/organisation/site name as the text equivalent) should come first to confirm that the user is on the right site.

    The document heading should also come before the skip links, so that screen reader users get a chance to find out what the page is about before they have to decide whether to skip to the navigation or content.

    N.B., I'm not saying this is some universal truth; it's just how I'd do it. YMMV.
    Birnam wood is come to Dunsinane

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @cooper-semantic, Thanks for the subject, I wasn't aware of my ignorance regarding this. I'll change that.
    Happy ADD/ADHD with Asperger's

  7. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used to follow this method:
    http://www.456bereastreet.com/archive/

    Tommy, I know your method must be more logical, unless you wouldn't abide by it

    Erik,
    If the menu-main is for site navigation i.e. it shift the page to another page, then I consider it as (in printing terms) belonging to the head of page.
    Not true, I think you realized this? The head must only contain: branding information/header appropriate info imho. Negative margins may be required to pull off certain effects.
    Abou the image; it is not content and imho it should be used as a background
    Correct, but what if you want your entire page expandable, or stuck with some script that has(inline presentational) images?

    I think if worse comes to worse, these images need to be hidden for when styles are disabled as I shown above.


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
  •