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.


Hi TheLoneWanderer. Welcome to the forums. :slight_smile:

This is the way to code the HTML:

<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.

h1 a {
  color: black;
  text-decoration: none;

Does that make sense?

[font=calibri]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:

<h1><a href="#">Heading<a></h1>
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:

[list][]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.[/list][/font]

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?

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 :slight_smile: