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