Elements

An HTML element is content wrapped in tags. A tag opens and (usually) closes:

<p>This whole thing is an element.</p>

• <p> — opening tag
• </p> — closing tag
• The text in the middle — content
• All three together — an element

Void Elements

Some elements don’t wrap anything — they ARE the content. They don’t have a closing tag.

<img src="/photo.jpg" alt="A cat" />
<br />
<hr />
<input type="text" />

The trailing /> is optional in HTML5 (<img> works the same as <img />), but many people include it for clarity. Common void elements: <img>, <br>, <hr>, <input>, <meta>, <link>.

Nesting

Elements can nest inside other elements:

<p>This is a paragraph with <strong>bold text</strong> inside.</p>

Nest properly — open and close in the right order:

<!-- ✓ correctly nested -->
<p>Hello <strong>world</strong></p>

<!-- ✗ overlapping — broken -->
<p>Hello <strong>world</p></strong>

Browsers are forgiving and try to fix broken nesting, but the result is unpredictable. Just nest correctly.

Block vs Inline (Quick Mental Model)

Some elements take a whole line; some flow inline with text.

CSS can change the default — display: block / display: inline — but the categories are a useful starting model.

Case Doesn’t Matter — But Lowercase Wins

<P> works, but everyone writes <p>. Lowercase is the universal convention.

Up Next

Attributes — the name="value" pairs that add detail to elements.