h1 and the span

Question

While using h1-h6 tags in my html, i keep getting error messages on w3c validator. I'm new to this and I've tried so many times to solve the problem but i can't.

The text appears perfectly fine on my website but it won't validate. How do i solve this problem? The error message is as follows;

Line 34, Column 4: document type does not allow element "h1" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

<h1><span> My website </h1>< span> <----this is the code i'm getting the error for.

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 "

" or "") inside an inline element (such as "", "", or "").

In any case what's the best way to use header tags? What am I doing wrong?

Answer 1

• An span is an inline element
• An h1 is a block element
• An inline element cannot contain a block element
• Elements cannot be partially contained by other elements

Therefore, from the perspective of the DTD:

<h1><span>…</span></h1> <!-- This is fine -->
<div><h1>…</h1></div>   <!-- This is fine -->
<h1><span>…</h1></span> <!-- This is wrong -->
<span><h1>…</h1></span> <!-- This is wrong -->

What the right solution to the problem actually is rather depends on what you are trying to use the span for.

(Note that the discussion of block and inline elements above is somewhat simplified. See How to read the HTML DTD for the full story, in particular the section on the Content Model)