A pretty simple and straightforward HTML question; which is correct?

<p>
    <h1>TPS Reports</h1>
    Please use the new coversheets.
</p>

or

<h1>TPS Reports</h1>
<p>
    Please use the new coversheets.
</p>

If both are allowed by the spec, which is semantically more correct?

3 answers

o.k.w 2355
4
points

I do agree with Dwayne and Mark that headings should not be nested within a paragrapgh element. However, I'll look at it from another approach instead of just taking W3C's specification.

From a semantic point of view in the context of an article or writing, a paragraph is simply a body of text distiguished from others with a deliberate vertical gap (margins or paddings).

A heading is similar but it has different styles (font/size/color etc). Headings typically starts a new page or section which also means it precedes a paragraph or another body text.

Having nested headings within a paragraph compromises the intended manner in which a heading is supposed to be displayed. If there's really a need, the heading has to be styled to look fit the content that follows it rather than placing them into the body.

How about non-article/text content? Well, paragraph shouldn't be used in the first place if it is for layout and alignment purposes. This is often overlooked and a very common 'mistake'.

Answered almost 7 years ago by o.k.w
3
points

the second example... (Heading elements should never be placed inside a paragraph element.)

Answered almost 7 years ago by Dwayne Anderson
2
points

Seconding Dwayne, headings should always be outside of paragraphs. From http://www.w3.org/TR/html4/struct/text.html#edef-P: The P element represents a paragraph. It cannot contain block-level elements (including P itself).

Answered almost 7 years ago by Mark Lee