# validateDOMNesting error in React

# Introduction

The `validateDOMNesting` error in React occurs when the DOM elements are not properly nested according to the [HTML specification](https://html.spec.whatwg.org/).

# Example of how the error looks

The error message will look like this:

```typescript
Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>
```

This error tells us that the `<p>` element cannot be a descendant of another `<p>` element.

# HTML specification

HTML has a defined set of rules for how elements can be nested.

Let's look at some examples of correct and incorrect nesting.

Elements must be properly nested and not overlap:

```xml
<p>This is <em>very <strong>wrong</em>!</strong></p> <!-- incorrect nesting -->
<p>This is <em>very <strong>correct</strong></em>.</p> <!-- correct nesting -->
```

Other examples would be nesting `<a>` elements inside `<button>` elements, or `<button>` elements inside `<a>` elements. Or them being nested inside each other, such as `<a>` inside `<a>`.

These examples are quite clear as to why they are incorrect, but why is nesting `<p>` elements inside `<p>` elements not allowed?

# Why is nesting &lt;p&gt; inside &lt;p&gt; not allowed?

The `<p>` element cannot contain nested `<p>` elements or other block-level elements like `<div>`, `<h1>`, etc. This is because a paragraph (`<p>`) is meant to be a standalone block, representing a complete point.

The main issue is semantic meaning. The `<p>` element is meant to represent a single paragraph, a distinct part of a document discussing a specific idea. Nesting paragraphs within each other would complicate the structure, making it harder for both people and machines (like search engines or accessibility tools) to understand.