0
0
HTMLmarkup~5 mins

Nested elements in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Nested elements help organize content inside other content, like putting boxes inside bigger boxes. This makes your webpage structured and easy to understand.

When you want to group related content together, like a paragraph inside a section.
When you need to create lists inside other lists, such as a list of steps with sub-steps.
When building menus with submenus that appear inside main menus.
When adding images or links inside text blocks.
When structuring forms with labels and inputs inside form tags.
Syntax
HTML
<parent-element>
  <child-element>
    <!-- content or more nested elements -->
  </child-element>
</parent-element>
Every opening tag must have a matching closing tag to keep the structure clear.
Indent child elements inside their parent to make the code easier to read.
Examples
A section contains a heading and a paragraph nested inside it.
HTML
<section>
  <h1>Title</h1>
  <p>This is a paragraph inside a section.</p>
</section>
A list with nested sublist inside the first item.
HTML
<ul>
  <li>Item 1
    <ul>
      <li>Subitem 1a</li>
      <li>Subitem 1b</li>
    </ul>
  </li>
  <li>Item 2</li>
</ul>
Navigation menu with links nested inside list items.
HTML
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>
Sample Program

This webpage shows a section with a heading and a list of fruits. The list has a nested list inside the Banana item to show types of bananas.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Elements Example</title>
</head>
<body>
  <main>
    <section>
      <h2>My Favorite Fruits</h2>
      <ul>
        <li>Apple</li>
        <li>Banana
          <ul>
            <li>Yellow Banana</li>
            <li>Green Banana</li>
          </ul>
        </li>
        <li>Cherry</li>
      </ul>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes
Tip: Use indentation to see which elements are inside others easily.
Remember: Browsers read nested elements from outside in, so the order matters.
Nested elements help with styling and accessibility by grouping related content.
Summary
Nested elements mean putting HTML tags inside other tags.
They help organize content clearly and logically on a webpage.
Always close your tags and indent nested elements for readability.