HTML Tags & Elements — How HTML Actually Works

Tag vs Element

These words are often confused. Here's the clear distinction:

• A tag is the keyword in angle brackets: <p> or </p>
• An element is the complete unit: opening tag + content + closing tag

<p>This is a paragraph.</p>
 ^          ^              ^
Opening  Content        Closing tag
 tag

The whole thing = one element

Anatomy of an HTML Tag

<a href="https://google.com" target="_blank">Visit Google</a>
 ^   ^                        ^               ^
tag  attribute name           attribute value  content

Void (Self-Closing) Elements

Some elements have no content and no closing tag:

<img src="logo.png" alt="Company logo">
<br>       <!-- line break -->
<hr>       <!-- horizontal divider -->
<input type="text" placeholder="Search...">
<meta charset="UTF-8">

In HTML5, self-closing slashes like <br /> are optional. <br> works fine.

Nesting — Elements Inside Elements

<div>
  <h2>iPhone 15 Pro</h2>
  <p>A <strong>powerful</strong> phone with a <em>titanium frame</em>.</p>
  <p>Price: <strong>Rs.1,34,900</strong></p>
</div>

Golden rule: always close the innermost tag first.

<!-- WRONG -->
<b><i>text</b></i>

<!-- CORRECT -->
<b><i>text</i></b>

Most Important Tags to Know

HTML Comments

<!-- This is a comment. Users will not see this. -->
<p>This paragraph IS visible.</p>

Practice

Build a product card using proper nesting:

<div>
  <h2>OnePlus 12</h2>
  <p>Flagship killer with <strong>Snapdragon 8 Gen 3</strong>.</p>
  <p>Price: <strong>Rs.64,999</strong></p>
  <a href="#">Buy Now</a>
</div>

Try making 3 different product cards. This is exactly how e-commerce sites structure product grids.