Tutorials Courses Interview Prep (100 Q&A) AI Tools (50) Developer Tools (50) Tracks Pricing Plans Blog & Articles Contact Us
HTML5 Fundamentals & Document Anatomy 12 mins read Free Lesson

HTML Elements, Tags & Hierarchy

Learn the difference between start tags, content, end tags, void self-closing elements, and nested hierarchy.

Elements vs Tags

An HTML Element consists of a starting tag, content, and an ending tag:

<p>This is paragraph content.</p>

Void (Self-Closing) Elements

Some elements do not have closing tags or text content because they insert external assets or line breaks directly:

  • <br>: Inserts a single line break.
  • <hr>: Inserts a thematic horizontal rule divider.
  • <img>: Embeds an image.
  • <input>: Renders an interactive form control.
  • <meta>: Declares document metadata.

Practice Exercises

Exercise 1: Practice Element Nesting

Easy

Create a paragraph containing bold text using <strong> and an italic emphasis word using <em>.

Starter Code:
<p>Learn <strong>PHP 8.4</strong> and master modern <em>web engineering</em>.</p>
💡 Hint: Ensure closing tags match their corresponding opening tags in reverse order.
Solution:
<p>Learn <strong>PHP 8.4</strong> and master modern <em>web engineering</em>.</p>