SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    eez
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tricky questions on good usage of headers (h1, h2, etc.)

    Hi!

    I am really confused and frustrated now. I can't figure out how to correctly use the header elements (h1, h2, etc.) in my XHTML document.

    The structure of my document is a header, left sidebar, content, right sidebar, and finally a footer.

    Convention: Let's wrap the logo in a h1 header (you all know why and I won't explain).

    Here are some litigious cases:

    1/ On my article page, I have a h2 header with the text Article cats. Under that header are quite some categories as you have understood. Should I wrap each of the article titles in a h3 header even if the category only consist of this title and under it some sub-categories displayed on a single line?

    My reasoning goes like this: No, I shouldn't because a category under Article cats isn't a section of the page.


    2/ On the same article page, I have another h2 header with the text Articles, which is the articles in this article category. Now, under this header are let's say 15 articles. Each article is like 500px * 1000px. Each article has a title with parentheses after it on the same line with additional info like # of pages and so on (this article is just a quite long snap of a very long article of let's say 50 pages that you will get to when you click the title). How should I mark up the snap article title?

    My reasoning goes like this: No, I shouldn't use headers because an article isn't a section of the page. Moreover, as said just above, each article title has elements on the right on the same line in another font size. Should I include those elements in the header then? Moreover, just under the last article and still in the h2 section is a small legend of text. Putting the article titles up in h3s would create a structure like this:

    <h2>Articles</h2>
    <div class="article"><h3></h3>...</div>
    <div class="article"><h3></h3>...</div>
    <div class="article"><h3></h3>...</div>
    <div class="article"><h3></h3>...</div>
    <p id="legend"></p> -> legend comes here directly

    <h2>Other h2 header</h2>

    This would be absurd. The same applies for the categories (there is a legend describing the colors used in the categories).


    3/ In my sidebars, I have various sections like Recommended articles (top list made up of a <ul> and a title, a quick search form (with no title at all!), a quick login form (with a title of the same size as the title of the top list).

    How should I mark up these titles?

    What am I gonna do about the quick search box with no title? Please note that it lies on the same level as the other 2 elements that have titles. Maybe I could create a header and then hide it with CSS using the display: none property?

    Also, please note that the title of the quick login box is within a legend. YOU CANNOT PUT h1 or h2 IN LEGENDS (only inline elements). Nor can you put the legend element in a h2 (checked with the XHTML validator). What am I gonna do?


    Thank you a lot! These are some tricky cases that I have failed to resolve.

  2. #2
    SitePoint Enthusiast ComputerGuru247's Avatar
    Join Date
    Jul 2006
    Location
    Wisconsin
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can I see the site. It is really hard to read all the text and comprehend what is going on. I started drawing a diagram, but then realized it would be easier to see the work.

    Thanks
    Bryan

    Breakpoint Designs - Web Design, Logos, and more!

  3. #3
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it's a heading then use a heading tag. If it isn't a heading then don't use a heading tag.

    In the example you've given it would seem to me that since what you've actually got is a list of articles that what you need is an unordered list underneath the H2 Articles heading.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I do with my documents:
    HTML Code:
    <h1><span><!-- --></span>Site Title</h1>
    <div class="access">
    	<a href="#content"><strong>Skip to Content</strong></a>
    </div>
    <ul id="menu">
    	<li><a href="#">Menu Link</a></li>
    	<li><a href="#">Menu Link</a></li>
    	<li><a href="#">Menu Link</a></li>
    	<li><a href="#">Menu Link</a></li>
    	<li><a href="#">Menu Link</a></li>
    	<li><a href="#">Menu Link</a></li>
    	<li><a href="#">Menu Link</a></li>
    </ul>
    <div class="access">
    	<a href="#menu"><strong>Return to Menu</strong></a>
    </div>
    <div id="content">
    	<h2>Page Title</h2>
    	<div class="section">
    		<h3>Secion Title</h3>
    		<p>
    			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
    			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
    			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
    			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
    			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
    			 augue commodo ornare. Donec ornare, dui vitae convallis
    			 congue, augue dui blandit sapien, in faucibus mauris massa
    			 consectetuer purus.
    		</p>
    		<p>
    			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
    			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
    			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
    			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
    			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
    			 augue commodo ornare. Donec ornare, dui vitae convallis
    			 congue, augue dui blandit sapien, in faucibus mauris massa
    			 consectetuer purus.
    		</p>
    		<p>
    			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
    			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
    			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
    			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
    			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
    			 augue commodo ornare. Donec ornare, dui vitae convallis
    			 congue, augue dui blandit sapien, in faucibus mauris massa
    			 consectetuer purus.
    		</p>
    	</div>
    	<div class="section">
    		<h3>Secion Title</h3>
    		<p>
    			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
    			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
    			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
    			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
    			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
    			 augue commodo ornare. Donec ornare, dui vitae convallis
    			 congue, augue dui blandit sapien, in faucibus mauris massa
    			 consectetuer purus.
    		</p>
    		<p>
    			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
    			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
    			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
    			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
    			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
    			 augue commodo ornare. Donec ornare, dui vitae convallis
    			 congue, augue dui blandit sapien, in faucibus mauris massa
    			 consectetuer purus.
    		</p>
    		<p>
    			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
    			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
    			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
    			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
    			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
    			 augue commodo ornare. Donec ornare, dui vitae convallis
    			 congue, augue dui blandit sapien, in faucibus mauris massa
    			 consectetuer purus.
    		</p>
    	</div>
    	<div class="section">
    		<h3>Secion Title</h3>
    		<p>
    			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
    			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
    			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
    			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
    			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
    			 augue commodo ornare. Donec ornare, dui vitae convallis
    			 congue, augue dui blandit sapien, in faucibus mauris massa
    			 consectetuer purus.
    		</p>
    		<p>
    			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
    			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
    			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
    			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
    			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
    			 augue commodo ornare. Donec ornare, dui vitae convallis
    			 congue, augue dui blandit sapien, in faucibus mauris massa
    			 consectetuer purus.
    		</p>
    		<p>
    			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
    			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
    			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
    			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
    			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
    			 augue commodo ornare. Donec ornare, dui vitae convallis
    			 congue, augue dui blandit sapien, in faucibus mauris massa
    			 consectetuer purus.
    		</p>
    	</div>
    </div>
    <div id="footer">
    	<p>
    		Copyright &copy; 2006 Fiasco Labs. All Wrongs Reserved. (Now if I
    		could only remember the name of the Sitepoint member who thought this
    		one up.)
    	</p>
    	<ul>
    		<li><a href="#">Footer Link</a></li>
    		<li><a href="#">Footer Link</a></li>
    		<li><a href="#">Footer Link</a></li>
    		<li><a href="#">Footer Link</a></li>
    		<li><a href="#">Footer Link</a></li>
    	</ul>
    </div>
    Basically, the H1 element is used as the site title, the H2 for the page title, and H3 for the content section titles. H4, H5 and H6 are used as further content sub-headings as appropriate.

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by aqw
    Also, please note that the title of the quick login box is within a legend. YOU CANNOT PUT h1 or h2 IN LEGENDS (only inline elements). Nor can you put the legend element in a h2 (checked with the XHTML validator). What am I gonna do?
    You can either style your legend to look the same as other headings on the page (a bit tricky to do cross-browser) or you can decide to replace the legend with a hx tag instead.

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    This is what I do with my documents:
    HTML Code:
    <h1><span><!-- --></span>Site Title</h1>
    I'm curious... what's the comment in the span for?

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  8. #8
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,247
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Dan Schulz
    Basically, the H1 element is used as the site title, the H2 for the page title, ...
    fascinating -- all your pages have the same H1?

    what do you put into your TITLE tag?
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, the comment in the span. Didn't read your question right. One of the workarounds for IE.

  10. #10
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    All my pages have the same H1 tag as well - is that bad?

  11. #11
    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 Stormrider
    All my pages have the same H1 tag as well - is that bad?
    Not if all your pages are about the exact same thing.
    Birnam wood is come to Dunsinane

  12. #12
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    276
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The consensus seems to be that Titles and H1s should be page specific.. I certainly agree. What then is the best way to mark up the website name, and other information that is included on each page?
    "Never imagine yourself not to be otherwise than what
    it might appear to others that what you were or might
    have been was not otherwise than what you had been
    would have appeared to them to be otherwise."

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it's a paragraph (e.g., a logo with a text equivalent plus a tag line), mark it up with <p>...</p>.

    If it's contact information, you can mark it up with <address>...</address>.

    If there's no semantically correct element type, just use a DIV.
    Birnam wood is come to Dunsinane


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
  •