SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Linking headings... the correct way?

    Hi there,

    Pretty simple question I hope - I'm curious as to the correct way to link a heading tag? Thinking about it I guess this is relevant to anything you want to turn into a link actually.

    So is it:

    1) <a href=""><h2>My Heading</h2></a>

    or

    2) <h2><a href="">My Heading</a></h2>

    The latter seems preferable, however this seems to lead to link styling overriding H2 styles (in the example).

    Thoughts?

    Cheers,

    DM

  2. #2
    SitePoint Guru
    Join Date
    Feb 2008
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DangerMouse1981 View Post
    Hi there,

    Pretty simple question I hope - I'm curious as to the correct way to link a heading tag? Thinking about it I guess this is relevant to anything you want to turn into a link actually.

    So is it:

    1) <a href=""><h2>My Heading</h2></a>

    or

    2) <h2><a href="">My Heading</a></h2>

    The latter seems preferable, however this seems to lead to link styling overriding H2 styles (in the example).

    Thoughts?

    Cheers,

    DM
    I would say the first is the most preferable way, for the very reasons you mentioned yourself.

  3. #3
    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)
    Including the anchor link within the H2 is more semantically accurate. As for the issues you are getting with CSS styles being overridden by the anchor, this can simply be resolved by using for example the CSS below which in this case tells the page to apply the white text color to the anchor within the H2 tag. Your CSS just needed to be a bit more specific in where the style was being applied, that’s all.

    Code CSS:
    h2 a {color: #FFFFFF;}
    Last edited by AlexDawson; Feb 20, 2009 at 09:04. Reason: Rewording response.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In contemporary, standardized versions of HTML, the content model of the A element does not allow an H2 to be placed inside of it. Putting an H2 inside an A will be flagged as a validation error, so I wouldn't use that method. Invalid code is more difficult to troubleshoot and may not render as expected in various user agents.

  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 DangerMouse1981 View Post
    So is it:

    1) <a href=""><h2>My Heading</h2></a>

    or

    2) <h2><a href="">My Heading</a></h2>
    Option #2 is the only acceptable way. Option #1 is invalid (X)HTML.

    Quote Originally Posted by chris cressman View Post
    In contemporary, standardized versions of HTML, the content model of the A element does not allow an H2 to be placed inside of it.
    And it's been that way since the first 'standard' version, HTML 2.0. There are rumours that HTML5 will allow inline-level links to contain block-level elements, but no-one knows what'll end up in the spec eventually.
    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
  •