Elements & Tags
An HTML element is a piece of content wrapped in tags that say what it is. Understanding how elements are written, how they nest, and which ones have no closing tag is the foundation for everything else in HTML.
Anatomy of an element
<p class="intro">Hello, world!</p>
<p class="intro">— the opening tag: the element name in angle brackets, optionally with attributes (lesson 05).Hello, world!— the content.</p>— the closing tag: the same name with a forward slash.
Together, opening tag + content + closing tag make one element. People often say "tag" and "element" interchangeably, but strictly the tags are the markers and the element is the whole thing.
Nesting
Elements can contain other elements. Inner elements must be closed before their parent closes — tags must not overlap:
<p>This is <strong>wrong <em>because the tags</strong> overlap</em>.</p>
In the second example, <em> opens inside <strong> but closes outside it. Browsers try to repair this, but the result may not be what you meant. A helpful habit: indent nested blocks so the structure is visible:
<article> <h2>Weekend plans</h2> <ul> <li>Visit the <strong>farmers' market</strong></li> <li>Finish my book</li> </ul> </article>
Void elements
Some elements can't have content, so they have no closing tag. These are called void elements:
| Element | Purpose |
|---|---|
<br> | Line break |
<hr> | Thematic break (horizontal rule) |
<img> | Image |
<input> | Form field |
<meta>, <link> | Metadata, linked resources |
<source>, <track>, <wbr>, <col>, <area>, <embed> | Others you'll meet later |
You may see void elements written with a trailing slash, like <br />. That style comes from XHTML; in HTML the slash is allowed but ignored. Either is fine — just be consistent.
Block and inline elements
Elements fall into two broad display groups. Block elements (<p>, <h1>, <div>, <ul>) start on a new line and stretch across the available width. Inline elements (<a>, <strong>, <em>, <span>) flow within a line of text. Lesson 21 explores this in detail.
Empty elements and whitespace
HTML collapses runs of spaces and line breaks into a single space. To force a line break, use <br>; for preformatted text that keeps its spacing, use <pre> (lesson 07).
Case and closing
- Write tag names in lowercase.
- Close every non-void element, even where HTML technically allows you to omit the closing tag (like
</p>or</li>). It avoids surprises. - Elements that aren't recognised (typos like
<paragraph>) are treated as unknown inline elements with no special meaning.