I was nonchalantly validating my html and I found that I can't have an <h3> as a list element. I know I can just add a class to my <li> but why can't I have an <h3> and what should I be using instead. I'm all for proper web semantics and this doesn't seem to make much sense. Here is my validation message:

 

 

Error Line 61, Column 298: document type does not allow element "h3" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

 

…"162" border="0" id="contrepoint" /><h3>Atelier Contrepoint</h3></a></div></li>

 

✉

 

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

 

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

 

Here is the page in question: My link

After just testing out some simple examples in the validator, and then reading the error message over again, I'v realised why.

 

'h3' is a block element, 'a href...' is a inline element. Since you can't put other elements within an inline element, you get an error.

 

what you have is

<a href ....><h3>Atelier Contrepoint</h3></a>

it should be instead the other way around

<h3><a href ....>Atelier Contrepoint</a></h3>

 

The image may also need to go inside the <h3></h3>, so it'll become

<h3><a href ....><img ... /> Atelier Contrepoint</a></h3>

 

or if you don't want the image inside the h3 you'll have to have the link twice

<a href ....><img ... /></a><h3><a href ....> Atelier Contrepoint</a></h3>

Edited June 20, 201115 yr by markeh

Thanks! I'm happy not to have to abandon my <h3>s It doesn't seem to make much sense to have my link and image inside the headings but what do I know? It passes validation now.

Possibly you could set the image as a background: url(..); of the h3? (Yes I also agree that it doesn't seem right to have the img within the h3)

Edited June 20, 201115 yr by markeh

I had done that originally and then I changed it but I don't remember why. On the assumption that I had a good reason I think I'll leave it for a while, at least until I remember... cheers!