SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    To wrap or not to wrap? A semantic question

    Do you:

    Code:
    <a><h1>content</h1></a>
    Because you feel that the "header" is a link,

    or

    Code:
    <h1><a>content</a></h1>
    Because you feel that the content within, defined as a header, is the link?

    and why?

    ---------------------

    One thing I do vaguely remember is that block level elements should wrap around the anchor tags, while the anchor tags can/should wrap around inline elements.

    Anyone?
    Last edited by XLCowBoy; Jun 13, 2008 at 09:12. Reason: Added a comment

  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 first one is invalid markup, since a block-level h1 it not permitted to be a child of an inline-level a element. So the choice is very simple:
    Code:
    <h1><a>content</a></h1>
    Anything else is objectively and unequivocally wrong.
    Birnam wood is come to Dunsinane

  3. #3
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    The first one is invalid markup, since a block-level h1 it not permitted to be a child of an inline-level a element. So the choice is very simple:
    Code:
    <h1><a>content</a></h1>
    Anything else is objectively and unequivocally wrong.

    Ah, much better explained.

    What about images then? Don't they count as block level elements? (or is it inline-block?)

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Images are inline elements. To be precise, they are replaced inline elements. Of course, images can't have child nodes, but it's important to know that images are inline, since there are some elements that cannot have inline-level children in a Strict DTD (like body, form and blockquote).
    Birnam wood is come to Dunsinane

  5. #5
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Images are inline elements. To be precise, they are replaced inline elements. Of course, images can't have child nodes, but it's important to know that images are inline, since there are some elements that cannot have inline-level children in a Strict DTD (like body, form and blockquote).
    That's a bit confusing...

    I think you mean that a form cannot have an inline-level child unless that child is wrapped within a block-level child, right?

  6. #6
    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 XLCowBoy View Post
    That's a bit confusing...

    I think you mean that a form cannot have an inline-level child unless that child is wrapped within a block-level child, right?
    Sorry about that.

    Yes, it means a form element cannot have inline elements as immediate children; only block-level elements (preferably fieldset).

    Those block-level children can, in turn, have inline children, of course. Input elements and other form controls are inline, after all.
    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
  •