Is It Valid to Include Paragraph Elements Within Heading Tags in HTML5?

The Validity of Paragraph Elements within Heading Tags

What is the propriety of including paragraph elements within header tags in HTML5? Consider the following markup:

<h1>
    <p class="major">Major part</p>
    <p class="minor">Minor part</p>
</h1>

Validity and Drawbacks

According to W3C, such markup is invalid. Header elements should contain "phrasing content," including elements like "a," "em," "code," and "span." Using paragraphs (or, incorrectly, block-level elements) may result in incorrect parsing and hinder search engine optimization.

Alternative Approach

To style header elements while preserving validity, consider using the following markup and CSS:

<h1>
    <span class="major">Major part</span>
    <span class="minor">Minor part</span>
</h1>

h1 span {
    display: block;
}
h1 span.major {
    font-size: 50px;
    font-weight: bold;
}
h1 span.minor {
    font-size: 30px;
    font-style: italic;
}

This markup allows for block-level rendering of spans while maintaining validity and allowing for semantic styling.

Semantic Considerations

While valid, using paragraphs within headings is semantically incorrect. HTML prioritizes semantics and should reflect the logical structure of content. Headings should convey the main topic or sections of a document, not contain paragraphs.

The above is the detailed content of Is It Valid to Include Paragraph Elements Within Heading Tags in HTML5?. For more information, please follow other related articles on the PHP Chinese website!