HTML Elements

What is an HTML Element?

Beginners often use the words "tag" and "element" interchangeably — but they mean different things. A tag is just the angle-bracket notation: <p> or </p>. An element is the full structure: the opening tag, the content inside, and the closing tag together.

<!-- This is a TAG (opening) -->
<p>

<!-- This is a complete ELEMENT -->
<p>Hello, world!</p>

Every element has a content model — a set of rules about what it is allowed to contain. Some elements can hold text and other elements. Some can only hold specific child elements. Some hold nothing at all. Understanding content models is what separates valid HTML from broken HTML.

Block vs Inline Elements

Every HTML element has a default display behaviour. The two most important categories are block-level and inline.

Void (Self-Closing) Elements

Some elements have no content and no closing tag. These are called void elements (or self-closing elements). They cannot wrap text or child elements — they represent a single piece of content or metadata on their own.

<!-- HTML5 syntax — no closing slash needed -->
<img src="photo.jpg" alt="A scenic view">
<br>
<hr>
<input type="text" name="email">

<!-- XHTML style (trailing slash) — valid but unnecessary in HTML5 -->
<img src="photo.jpg" alt="A scenic view" />

Nesting Rules

HTML elements can be placed inside other elements — this creates parent, child, and sibling relationships. The element that contains another is the parent. The element inside is the child. Two elements at the same level sharing a parent are siblings.

The golden rules of nesting:

<!-- WRONG — block inside inline -->
<p>
  <div>This is invalid HTML.</div>
</p>

<!-- CORRECT — inline inside block -->
<p>
  This paragraph has <strong>important text</strong> inside it.
</p>

<!-- CORRECT — block inside block -->
<div>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</div>

The Most Common HTML Elements

HTML has over 100 elements, but you'll use about 30 of them for 95% of all web pages. Here's a quick reference:

Semantic vs Generic Elements

Generic elements like <div> and <span> are just boxes with no built-in meaning. They're perfectly valid for layout and styling hooks, but they tell browsers, screen readers, and search engines nothing about what the content actually is.

Semantic elements carry meaning. When you write <nav>, you're declaring "this block contains navigation links." When you write <article>, you're saying "this block is a self-contained piece of content." That meaning matters in three important ways:

<!-- Generic — technically works, but meaningless -->
<div class="nav">
  <div class="nav-item">Home</div>
</div>

<!-- Semantic — immediately clear what this is -->
<nav>
  <a href="/">Home</a>
</nav>