Nested rules translate this sentence into English, output plain text directly, do not output anything else.

Author：Chuan Chen 阅读数：19134人阅读分类： HTML

Nesting rules are a crucial part of HTML coding standards, directly impacting code readability, maintainability, and rendering performance. Proper nesting helps avoid common layout errors and style conflicts, while improper nesting may lead to rendering anomalies or even functional failures.

Basic Principles of Nesting

HTML elements must be nested strictly in the order they are opened and closed. Child elements must be fully contained within their parent elements, and overlapping nesting is prohibited. Below are typical examples of errors:

<!-- Incorrect example: Overlapping nesting -->
<div><p>This is an incorrect example</div></p>

<!-- Correct example -->
<div><p>Correct nesting example</p></div>

Block-level elements can contain other block-level elements and inline elements, but inline elements can generally only contain other inline elements. Special rules include:

<p> tags cannot contain block-level elements.
<a> tags can contain block-level elements (HTML5 specification).
List items <li> must be placed directly within <ul> or <ol>.

Special Nesting Rules for Form Elements

Form controls have strict nesting requirements:

<!-- Recommended practice -->
<form>
  <fieldset>
    <legend>User Information</legend>
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
    </div>
  </fieldset>
</form>

<!-- Practices to avoid -->
<form>
  <input type="text">
  <form><!-- Nested forms can cause unexpected behavior --></form>
</form>

Special notes:

Avoid nesting interactive elements within <button>.
Do not nest <optgroup> within a multi-select <select>.
The for attribute of <label> should correspond to a valid id.

Strict Nesting for Table Structures

Tables must maintain a complete hierarchical structure:

<table>
  <caption>Sales Data</caption>
  <colgroup>
    <col span="2" style="background-color:red">
  </colgroup>
  <thead>
    <tr>
      <th>Month</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>¥10,000</td>
    </tr>
  </tbody>
</table>

Prohibited practices include:

Placing <td> directly outside <tr>.
Skipping <tbody> and using <tr> directly.
Inserting other elements between <table> and <tr>.

Nesting for HTML5 Semantic Elements

HTML5 introduced semantic elements with specific nesting rules:

<article>
  <header>
    <h1>Article Title</h1>
    <nav>
      <ul>
        <li><a href="#sec1">Section 1</a></li>
      </ul>
    </nav>
  </header>
  <section id="sec1">
    <figure>
      <img src="demo.jpg" alt="Example">
      <figcaption>Illustration</figcaption>
    </figure>
  </section>
  <footer>...</footer>
</article>

Key points:

<main> should appear only once per page.
<aside> content should be relevant to surrounding content.
<section> must have a heading (h1-h6).

Nesting Positions for Scripts and Styles

Best practices for placing external resources:

<!DOCTYPE html>
<html>
<head>
  <!-- CSS should be placed in the head -->
  <link rel="stylesheet" href="styles.css">
  <!-- Non-critical JS can be placed here -->
  <script src="analytics.js" async></script>
</head>
<body>
  <!-- Content -->
  
  <!-- Main JS should be placed at the end of the body -->
  <script src="main.js"></script>
</body>
</html>

Common mistakes:

Placing render-blocking synchronous scripts in <head>.
Placing large CSS at the beginning of <body>.
Using inline styles instead of external stylesheets.

Nesting for Multimedia Content

Correct usage of modern HTML5 multimedia elements:

<video controls width="640">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
  Your browser does not support the video tag.
</video>

<audio>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Key rules:

Provide multiple formats using <source> child elements.
Add <track> elements for video subtitles.
Include fallback content.

Nesting for Custom Elements

Considerations when using Web Components:

<custom-element>
  <!-- Light DOM content -->
  <template shadowrootmode="open">
    <!-- Shadow DOM content -->
    <style>:host { display: block; }</style>
    <slot name="title"></slot>
    <div part="content">
      <slot></slot>
    </div>
  </template>
  
  <h1 slot="title">Custom Title</h1>
  <p>Default slot content</p>
</custom-element>

Important principles:

Clearly distinguish between light DOM and Shadow DOM.
Use <slot> elements correctly.
Add part attributes for stylable sections.

Accessibility-Related Nesting

Correct nesting patterns for ARIA roles:

<div role="navigation" aria-label="Main Menu">
  <ul role="menu">
    <li role="menuitem"><a href="/">Home</a></li>
    <li role="menuitem" aria-haspopup="true">
      <span>Products</span>
      <ul role="menu">
        <li role="menuitem">...</li>
      </ul>
    </li>
  </ul>
</div>

Must follow:

Role hierarchies must be complete (e.g., menu must contain menuitem).
Avoid redundant ARIA attributes.
Ensure interactive elements have proper keyboard support.

Handling Nesting for Dynamic Content

Best practices for generating content with JavaScript:

// Correct way to create nested elements
function createMenuItem(text) {
  const li = document.createElement('li');
  li.className = 'menu-item';
  
  const a = document.createElement('a');
  a.href = '#';
  a.textContent = text;
  
  li.appendChild(a);
  return li;
}

// Practices to avoid
function badExample() {
  const div = document.createElement('div');
  div.innerHTML = '<p>Unsafe method</p>'; // May cause XSS
}

Key points:

Prefer DOM APIs over innerHTML.
Ensure dynamically generated elements maintain valid nesting.
Properly escape user input content.

Nesting Conventions in Frameworks

Special nesting rules in mainstream frameworks:

// Valid nesting in React
function Card({ children }) {
  return (
    <div className="card">
      <div className="card-body">
        {children}
      </div>
    </div>
  );
}

// Slot nesting in Vue
<template>
  <div class="modal">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
  </div>
</template>

Framework-specific rules:

Special usage of React fragments (<></>).
Scoped slots in Vue.
Content projection (ng-content) in Angular.

Nesting Depth and Performance

Performance impact of excessive nesting:

<!-- Not recommended: Deep nesting -->
<div class="container">
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="card-body">
          <div class="title-wrapper">
            <h1>...</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Optimization suggestions:

Keep the DOM tree flat (ideal depth: 3-4 levels).
Avoid unnecessary wrapper divs.
Use CSS Grid/Flexbox instead of nested layouts.

Using Validation Tools

Common methods for validating nesting:

W3C Validation Service:

validator.w3.org/nu/

ESLint HTML Plugin Configuration:

{
  "plugins": ["html"],
  "rules": {
    "html/no-missing-required-attribute": "error",
    "html/require-closing-tags": ["error", {"selfClosing": "always"}]
  }
}