SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make H1, H2, etc as links?

    Im a little embarassed to be asking a question in this section as I consider myself a competent HTML coder!

    However I'm stumped on this one.
    What is the 'correct' code for turning a h1, h2 etc heading into a link?

    Is it:
    <a href="#"><h1>heading</h1></a>

    or

    <h1><a href="#">heading</a></h1>

    Which nesting is correct?
    I know both of them work, just not sure which is right. I have been putting the <a> tag on the outside.

    And what is the correct way to style this in CSS? My h1 style is automatically overwritten when I turn it into a link.

    Is it:
    h1 a:link
    ?

  2. #2
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by longroad View Post
    Is it:
    <a href="#"><h1>heading</h1></a>

    <h1><a href="#">heading</a></h1>

    Which nesting is correct?
    The second. The A element is an inline element and can't contain block elements. The Hx elements are all block elements and can contain inline elements.

    To be sure, try them both and throw tham at the validator.
    Ed Seedhouse

  3. #3
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ed Seedhouse View Post
    To be sure, try them both and throw tham at the validator.
    While the validator will catch the first as invalid in this case, the validator doesn't always tell the truth about what is conforming HTML. The validator only checks SGML-validity against the DTD (that the document declares itself), and the HTML spec has requirements beond that.
    Simon Pieters

  4. #4
    SitePoint Addict Procode's Avatar
    Join Date
    Dec 2006
    Location
    New York
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe it is the second one as well.

  5. #5
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I thought being a block element, H1 would require the a tag to be contained within it.
    Im not too fussed on validation, Im more concerned at how the CSS would treat it.

  6. #6
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't be sure how the DOM will look like (for the first example), because it's invalid HTML, and HTML4 doesn't define error handling rules.

    However, in this case, you can be reasonably sure that browsers will build a DOM where the H1 is a child of the A element, so this selector would match the heading:
    Code:
    a > h1 { ... }
    Simon Pieters

  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)
    As has been mentioned previously, you cannot have a block level element inside an inline one (in this case a header inside a link). However, you can have an inline level element inside a block level element (a link inside a header).

    So this will be valid:
    HTML Code:
    <h1><a href="#">Some Link Text</a></h1>
    while this will not be:
    HTML Code:
    <a href="#"><h1>Some Header Text</h1></a>


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
  •