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!

ralphm
—
2013-11-01T13:01:56Z —
#2

Hi TheLoneWanderer. Welcome to the forums.

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?

Stevie_D
—
2013-11-01T13:09:02Z —
#3

TheLoneWanderer said:

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:

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.

TheLoneWanderer
—
2013-11-01T13:16:28Z —
#4

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?

ralphm
—
2013-11-01T13:27:56Z —
#5

TheLoneWanderer said:

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.

TheLoneWanderer
—
2013-11-01T14:31:27Z —
#6

ralph_m said:

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.