SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,796
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    where do <Hx> tags belong?

    Just a couple of curious questions about semantic correctness and validation.

    #1. I was wondering why it is considered be wrong to nest <Hx> tags?

    example:
    <h2><h2>This is my heading</h2></h2>


    It seems, to my novice self, that semantically you are saying that message is an H2, while at the same time providing 2 block level hooks for styling purposes. Maybe I am totally off on this. I just want to know why.

    #2, Is a more sensible question. What is the best practice for placing/ displaying a title when you have a UL or LI ?

    Example, something that looks like this:
    This is a menu
    * ITEM 1
    * ITEM 2
    * ITEM 3
    * AND SO FORTH...


    I mean, do you use a <Hx> tag OUTSIDE the UL/OL tag? do you use a <Hx> tag INSIDE the UL/OL tag? Or do you place the title inside the UL/OL tag with semantically neutral tags such as DIV, SPAN or even no tag at all? Whis is the SEMANTICALLY, SEO FRIENDLY correct way of doing it?


    Replies to my curious mind's question appreciated. Thanks.

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,139
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    I don't know the nitty gritty specifics, but it's a matter of a block level element that can't contain another block level element. As for wanting to do so for presentational effect, although browsers do associate default styling to the tags, if you want something non-default, use CSS not kludgy mark-up.

    An H tag is a content heading. I guess in some cases this might be a list title, if the list is the content. In which case I would place it above the list.

  3. #3
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    1. Does it make sense to have a window within a window? A carpet within a carpet? Do you see books with titles inside titles?

    Relating content to real life things can really help you to get a grasp on things. Headers don't have headers inside, as headers should generally contain text, maybe a link.

    As for the second, I'd contain the menu in a <div> and put the header there, e.g:
    Code html:
    <div class="MenuContainer">
        <h3>Title</h3>
        <ul>
            <li>Item...</li>
            <li>Item...</li>
            <li>Item...</li>
        </ul>
    </div>

    Whereas if it were titleless, the UL would do.
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    It seems, to my novice self, that semantically you are saying that message is an H2, while at the same time providing 2 block level hooks for styling purposes. Maybe I am totally off on this. I just want to know why.
    You need only one H2 to define the element as a level 2 heading. If you need additional elements to use as hooks for CSS, use generic elements like DIV or SPAN. You don't want to define the element twice as the same thing.
    Quote Originally Posted by dresden_phoenix View Post
    I mean, do you use a <Hx> tag OUTSIDE the UL/OL tag? do you use a <Hx> tag INSIDE the UL/OL tag? Or do you place the title inside the UL/OL tag with semantically neutral tags such as DIV, SPAN or even no tag at all? Whis is the SEMANTICALLY, SEO FRIENDLY correct way of doing it?
    The only element HTML allows inside a UL or OL is LI. Anything else will invalidate your code and make quality assurance more difficult. Since the heading applies to the list, put the heading element directly above the list in the code.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,796
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    That's very helpful guys.

    BTW, isnt an LI a BLOCK element, thus it's by default a block within a block?

    Also, quite often have seen sites with list of contents.. that is an LI that contains multiple P elements with in it. So that's not valid code?

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    BTW, isnt an LI a BLOCK element, thus it's by default a block within a block?

    Also, quite often have seen sites with list of contents.. that is an LI that contains multiple P elements with in it. So that's not valid code?
    LI in UL is perfectly legal and so is P in LI.

    Every HTML element has a content model that defines what other elements are allowed inside it. To determine the content model of an element, see the specification for the particular version of (X)HTML you're using. Or, you can just try things and let a validator tell you when you've made a mistake.

  7. #7
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    As Chris stated, it's perfectly valid, certain block level elements can contain other block level elements (your example was correct), just like DIV is a block level element that can contain other's like Hx, P (etc). It's only inline objects that can't contain block level elements (though inline elements can contain other inline elements!). The best way to deal with it is to think in the context of "Would I write it like this?", You might include a paragraph of text within a list (so yes its correct), but you would not include a mid paragraph heading (which is why you wouldn't have a hx inside a p).

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    It is a sticky issue because headings aren't relative to their container in the current specs. There isn't a definitive answer. Its more or less based on the site and surrounding content. One technique I have used often is a dl in place of headings. For example, a none SEO important things like menu could describe the menu. It doesn't have to be a headings.

    HTML Code:
    <dl class="MenuContainer">
        <dt>Menu</dt>
        <dd>
        	<ul>
            	<li>Item...</li>
            	<li>Item...</li>
            	<li>Item...</li>
            </ul>
        </dd>
    </dl>
    Now you avoid the need to make the decision relative to the document because the term is relative to that item. This doesn't always work though and probably wouldn't work well with SEO important content such as a title where you would be better served using a heading. Just something to mull over next time you run into a situation like this were the "heading" is a heading but isn't all that important in respects to document as a whole.

    Depending on your needs you could also go this route:

    HTML Code:
    <dl class="MenuContainer">
        <dt>Menu</dt>
        <dd>Item...</dd>
        <dd>Item...</dd>
        <dd>Item...</dd>
        <dd>Item...</dd>
        <dd>Item...</dd>
        <dd>Item...</dd>
    </dl>


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
  •