Elements, Tags, Attributes

Example

<article
  id="article-101"
  class="blog-card featured"
  lang="en"
  data-article-id="101"
  title="Read the article summary"
>
  <h2>Learning HTML</h2>
  <p>Start with well-structured markup.</p>
</article>

In this example:

• id="article-101" provides a document identifier.
• class="blog-card featured" assigns two classes.
• lang="en" identifies the language as English.
• data-article-id="101" stores a custom data value.
• title supplies advisory information.

Important: An id should be unique in the document. Class names can be reused on multiple elements.

9. Nesting HTML Elements Correctly

Nesting means placing one HTML element inside another. The outer element is the parent, and the inner element is a child.

<section>
  <h2>Our Services</h2>
  <p>We provide <strong>reliable web development</strong> services.</p>
</section>

Relationships in this example:

• <section> is the parent of the heading and paragraph.
• <h2> and <p> are children of the section.
• <strong> is a child of the paragraph.
• The paragraph and heading are siblings because they share the same parent.
• The section is an ancestor of the strong element.

Correct Nesting Order

When elements overlap in the source, close them in the reverse order in which they were opened.

Correct:

<p>This is <strong>very important</strong> information.</p>

The strong element opens inside the paragraph and closes before the paragraph closes.

Incorrect:

<p>This is <strong>very important</p></strong>

The paragraph closes before the strong element. This is malformed nesting. Browsers attempt to recover from many markup errors, but the resulting DOM may not match your intention.

Visualizing the Element Tree

<main>
  <section>
    <h2>Courses</h2>
    <p>Learn <strong>HTML</strong> today.</p>
  </section>
</main>

The simplified tree is:

main
└── section
    ├── h2
    └── p
        └── strong

This hierarchy matters because CSS selectors, JavaScript DOM traversal, accessibility APIs, and browser rendering all depend on the document structure.