Max Design

Published:

Modern development often sits above HTML. Developers work with frameworks, component systems, JSX, templates, and page builders. HTML can feel abstract or almost irrelevant.

But HTML is still the foundation. It is the layer that browsers render, that assistive technologies interpret, and that users interact with.

Every developer and tester should understand how HTML elements can be used, so that the final HTML is well formed and valid.

This avoids forcing browsers to repair invalid markup, which can lead to unpredictable behaviour and accessibility issues.

The HTML Living Standard documents every element. This includes:

The <blockquote> element

We are going to use the <blockquote> element as an example. The goal is to understand how an element is documented and where to find the rules that matter.

You can find the <blockquote> definition in the full list of elements under 4. The elements of HTML.

You can also search in-browser with Ctrl+F or Cmd+F.

When you find <blockquote> in the spec and select it, you will land on its definition: 4.4.4 The blockquote element.

How the <blockquote> is defined

Each element in the HTML specification is structured the same way. These sections explain how the element behaves, where it can be used, and what it can contain.

1. Categories

HTML content categories describe how elements fit into the document structure and how they relate to the elements around them.

The "Categories" section lists all of the content categories that the element belongs to.

The <blockquote> falls into two categories:

You can select each link in the specification to see a full list of elements that share that category.

2. Contexts in which this element can be used

This secction explains where the element may appear. Some elements are restricted to forms, lists, or tables. If an element is used outside an allowed context, the document becomes non-conforming.

The <blockquote> can appear anywhere that flow content is expected. In practical terms, this means almost anywhere in the <body>.

3. Content model

This is one of the most important sections. It lists what can be placed inside the element.

For example:

The <blockquote> accepts flow content as children.

4. Tag omission in text/html

This section describes where start or end tags may be left out. Some elements, like <li>, allow optional closing tags.

The <blockquote> must include both:

<blockquote></blockquote>

5. Content attributes

This lists inherited global attributes plus any element-specific attributes.

The <blockquote> supports global attributes and the cite attribute:

<blockquote cite="https://example.com">
  ...
</blockquote>

6. Accessibility considerations

This section links to guidance for authors and implementers. For everyday development, the author guidance is the most relevant.

7. DOM interface

This describes how the element behaves in the DOM. If you select the element with JavaScript, the DOM interface defines the properties and methods available to you.

This is not essential for everyday HTML usage, but it is very useful when building custom elements.

8. Notes and examples

This section provides clarifications, edge cases, and examples that explain why certain rules exist.

Some examples in action

We will now look at four examples and use the specification to determine:

Example 1: Can a <div> go inside an <h1>?

Step 1

Open the definition for <h1> in the HTML specification.

Step 2

Find the "Content model" section. It tells us what can go inside.

Step 2 result

For <h1> the content model is phrasing content.

Step 3

Check whether <div> is phrasing content.

Step 3 result

<div> is not phrasing content. It is flow content, which belongs to a different category.

Conclusion

Categories must match. Because <div> is not phrasing content, it is not allowed inside <h1>:

<h1>
  <div>Not allowed</div>
</h1>

Example 2: Can a <p> go inside a <ul>?

Step 1

Open the definition for <ul> in the HTML specification.

Step 2

Find the "Content model" section. It tells us what can go inside.

Step 2 result

For <ul> the content model is: Zero or more <li> and script-supporting elements.

Step 3

Check whether <p> is an <li> element.

Step 3 result

<p> is a flow element, not a list item.

Conclusion

Because <ul> only allows <li> children, a <p> is not allowed:

<ul>
  <p>Not allowed</p>
</ul>

Example 3: Can an <h2> go inside a <legend>?

Step 1

Open the definition for <legend> in the HTML specification.

Step 2

Find the "Content model" section. It tells us what can go inside.

Step 2 result

For <legend> the content model is: phrasing content or heading content.

Step 3

Check whether <h2> is heading content.

Step 3 result

All <h1> to <h6> elements are heading content. <h2> matches one of the permitted content categories.

Conclusion

<h2> is allowed as a child of <legend>:

<legend>
  <h2>Section title</h2>
</legend>

Example 4: Can a <div> go inside a <label>?

Step 1

Open the definition for <label> in the HTML specification.

Step 2

Find the "Content model" section. It tells us what can go inside.

Step 2 result

For <label> the content model is: phrasing content with restrictions.

Step 3

Check whether <div> is phrasing content.

Step 3 result

It is not. <div> is flow content. Flow content does not match the permitted phrasing content model.

Conclusion

<div> is not allowed as a child of <label>:

<label>
  <div>Not allowed</div>
</label>

Conclusion

The HTML specification is a powerful reference that describes exactly how each element can be used.

You do not need to memorise every rule. You only need to know how to check the specification and confirm what a parent element is allowed to contain, especially when building components or reviewing generated markup.

Caveats

Examples 1, 2, and 4 are non-conforming according to the specification. Browsers will still parse this markup and construct a DOM. In some cases they may repair or rearrange elements (for example, auto-closing headings), and in other cases they may preserve the non-conforming structure (for example, a <p> inside a <ul>).

This means the DOM may not match the intended structure, even though it renders. This can cause issues for accessibility tools and any system that relies on predictable, valid markup.