SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Heading Tags, So simple, Yet so confusing

    Hello,

    When I first built my website, I learnt that heading tags should describe the content that follows them. So the logical format for most pages in my mind was this:

    Example 1
    HTML Code:
    <title>Content <!-- (similar title to the words used as the content heading) --></title>
    
    <h1>Navigation</h1>
    <!-- navigation menu -->
    
    <h1>Content</h1>
    <!-- content -->
    <h2>Sub Content</h2>
    <!-- sub content -->
    <h3>Sub Sub Content</h3>
    <!-- Sub Sub content -->
    
    <h1>Ads</h1>
    <!-- Ads -->
    
    <h1>Footer</h1>
    <!-- footer content -->
    I recently learned that there should only be one level 1 heading on your page. So I have been looking for the best way to re-arrange my content. My initial thought is moving all the headers down a level like this:

    Example 2
    HTML Code:
    <title>Content <!-- (similar title to the words used as the content heading) --></title>
    
    <h1>Content</h1>
    
    <h2>Navigation</h2>
    <!-- navigation menu -->
    
    <h2>Content 2</h2>
    <!-- content -->
    <h3>Sub Content</h3>
    <!-- sub content -->
    <h4>Sub Sub Content</h4>
    <!-- Sub Sub content -->
    
    <h2>Ads</h2>
    <!-- Ads -->
    
    <h2>Footer</h2>
    <!-- footer content -->
    But this brings up two issues, firstly I need a new descriptive title for "Content 2" and it will de-value the sub headings of the content. The most suitable heading name would probably be "Main Content", which probably wouldn't be very useful in terms of SEO. So that brings me on to this idea (Which is probably even worse for SEO, but I have seen it on quite a few sites):

    Example 3
    HTML Code:
    <title>Content <!-- (similar title to the words used as the content heading) --></title>
    
    <h1>Website Name or Company Name</h1>
    
    <h2>Navigation</h2>
    <!-- navigation menu -->
    
    <h2>Content</h2>
    <!-- content -->
    <h3>Sub Content</h3>
    <!-- sub content -->
    <h4>Sub Sub Content</h4>
    <!-- Sub Sub content -->
    
    <h2>Ads</h2>
    <!-- Ads -->
    
    <h2>Footer</h2>
    <!-- footer content -->
    I thought a discussion of this could be quite useful for a number of web developers/designers, who seem to have a similar level of confusion over this simple formating as me.

    If you have a better suggestion to the ones above, please make another example, based on the examples used to keep the thread as clear as possible.

    Thanks, looking forward to the following discussion

    ro0bear

  2. #2
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that Navigation and Footer are not parts of the content. So the my proposition will be:

    Code:
    <title>Content</title>
    
    <div id="navigation">
    <h2>Navigation</h2>
    <!-- navigation menu -->
    </div>
    
    <div id="main">
    <h1>Content</h1>
    <!-- content -->
    <h2>Sub Content</h3>
    <!-- sub content -->
    <h2>Sub Sub Content</h2>
    <!-- Sub Sub content -->
    </div>
    
    <div id="ads">
    <h2>Ads</h2>
    <!-- Ads -->
    </div>
    
    <div id="footer">
    <h2>Footer</h2>
    <!-- footer content -->
    </div>
    Of course, it may have even worst SEO then your third example, but I think that it closer to the practice.
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think the footer needs a heading (at least not the sort of footers I use). My structure would be along these lines,
    HTML Code:
    <div id="header">...</div>
    <h1>Document Title</h1>
      <h2>First Article Section Heading</h2>
        <h3>Subheading</h3>
          <h4>Sub-subheading</h4>
      <h2>Second Article Section Heading</h2>
        <h3>Subheading</h3>
          <h4>Sub-subheading</h4>
      <h2>Menu Links</h2> <!--Navigation-->
    <div id="footer">...</div>
    I don't have advertisment.
    Birnam wood is come to Dunsinane

  4. #4
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    I don't think the footer needs a heading (at least not the sort of footers I use). My structure would be along these lines,
    HTML Code:
    <div id="header">...</div>
    <h1>Document Title</h1>
      <h2>First Article Section Heading</h2>
        <h3>Subheading</h3>
          <h4>Sub-subheading</h4>
      <h2>Second Article Section Heading</h2>
        <h3>Subheading</h3>
          <h4>Sub-subheading</h4>
      <h2>Menu Links</h2> <!--Navigation-->
    <div id="footer">...</div>
    I don't have advertisment.
    That is interesting, why have you put the navigation at the bottom? Is it because you would read the content and then decide if you want to visit another area of the website?

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,871
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The closer to the top of the file that the actual content is the easier it is for search engines and those using screen readers and text only browsers to see the content.

    You can always use CSS to move the navigation to where ever you want it on the actual page for everyone else.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    The closer to the top of the file that the actual content is the easier it is for search engines and those using screen readers and text only browsers to see the content.
    I didnít know the position on the page made a difference for search engines.

    On the accessibility side of things, I suppose a skip link at the top of the page saying "skip to navigation" would be useful for those using the keyboard to navigate or using a speech synthesiser.

    I have read that many blind users will leave a website immediately if the first thing on the page isnít a skip link saying "skip to content" or "skip navigation", so "skip to navigation" could cause some confusion if they think it said "skip navigation" and instead of arriving at the content past the navigation, they find themselves at the navigation, and would interpret it as an error on the website. I suppose it is a small issue in the scheme of things.

    A solution could be having "skip to content | skip to navigation" even though the skip to content would have little or no functional benefit, it could help reduce confusion.


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
  •