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