SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Headings as Links

    Hello, I am new to these forums so forgive me please if I have posted this in the wrong area.


    My question is how do I make a link into a heading properly?

    When I used <a href="#"><h1>Heading</h1></a>, the link did not work, and sent me to a random page.

    When I used <h1><a href="#">Heading</a></h1>, the css seemed to not work as a heading but as a link, and I am not sure of how to make a css rule for a heading in a link.

    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi TheLoneWanderer. Welcome to the forums.

    This is the way to code the HTML:

    Code:
    <h1><a href="#">Heading</a></h1>
    However, your link styles will apply to this as well, so if you don't want the normal link styles here, you'll have to set different styles in this situation. E.g.

    Code:
    h1 a {
      color: black;
      text-decoration: none;
    }
    Does that make sense?

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TheLoneWanderer View Post
    My question is how do I make a link into a heading properly?

    When I used <a href="#"><h1>Heading</h1></a>, the link did not work, and sent me to a random page.

    When I used <h1><a href="#">Heading</a></h1>, the css seemed to not work as a heading but as a link, and I am not sure of how to make a css rule for a heading in a link.
    If you're using HTML5 then you can put your code either way round.

    If, like most people, you're using HTML4 then you can only use <h1><a href="#">...</a></h1>, not the other way round. The reason for that is that <a> is an inline element, which means that it can only contain text and other inline elements, but <h1> is a block element.

    But ... that doesn't seem to quite fit with what you've said. Because most browsers are very error-tolerant – if you've done something that isn't quite right but they can figure out what they think you probably meant, they will have a good go at interpreting that. And most browsers would quite happily display a heading inside a link even though they aren't supposed to. I've never heard of the link destination going wrong as a result!

    If you have CSS that applies to both headings and links, there will be the usual CSS fight to see what gets applied. For example:
    HTML Code:
    <h1><a href="#">Heading<a></h1>
    Code CSS:
    h1 a:link {color:green;}
    h1 {color:blue; font-family:georgia; size:150%;}
    a:link {color:red; font-family:arial; background:yellow;}
    then the heading in question will have the following styles:
    • size:150% – a size was set for all <h1>s, and there's nothing set for <a> that challenges that
    • background:yellow – a background has been set for all <a>s, and nothing for <h1> to argue with it
    • font-family:arial – although a font has been set on both <h1> and <a>, the one specified last is the one that is used
    • color:green – although colours have been set on both <h1> and <a>, the colour has also been set on <h1><a>, which is more specific than the other declarations so that one is used.

  4. #4
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you ralph.m and Steve D, It works fine now and for it sending me to the wrong webpage was just my own mistake in the coding that I did not notice. Just wondering, does XHTML have any differences to HTML5 with a heading as a link?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TheLoneWanderer View Post
    does XHTML have any differences to HTML5 with a heading as a link?
    No, there's no difference. HTML5 has introduced a few new elements, but otherwise is effectively the same. As Stevie said, you are allowed to place the H1 inside the <a> in HTML5, but there's no point. The reason it's allowed is for situations when you might have a whole bunch of elements (say, in a box) and you want the whole box to be a clickable link.

  6. #6
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    No, there's no difference. HTML5 has introduced a few new elements, but otherwise is effectively the same. As Stevie said, you are allowed to place the H1 inside the <a> in HTML5, but there's no point. The reason it's allowed is for situations when you might have a whole bunch of elements (say, in a box) and you want the whole box to be a clickable link.
    Okay thank you for your help


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
  •