Elements and attributes
Tags, content, attributes, and the difference between void elements and containers — the vocabulary everything else builds on.
Anatomy of an element
An element is usually an opening tag, content, and a closing tag. Everything between the tags is its children.
<p class="intro">Learn <strong>HTML</strong> step by step.</p>
<!-- tag: p attributes: class="intro" content: text + <strong> -->| Part | Example | Notes |
|---|---|---|
| Opening tag | <p> | May carry attributes |
| Content | Learn HTML | Text, or other elements |
| Closing tag | </p> | Same name with a slash |
| Attribute | class="intro" | name="value", always quoted in practice |
Void elements have no closing tag
A few elements cannot contain anything, so they have no closing tag. Writing <img></img> is invalid.
| Element | Purpose |
|---|---|
<img> | Embed an image |
<br> | Line break |
<hr> | Thematic break |
<input> | Form control |
<meta> | Document metadata |
<link> | External resource (CSS, icons) |
<source> | Media resource variants |
Global attributes worth knowing
class— a styling/scripting hook; an element may have several, space-separated.id— unique within the page; prefer classes for styling.data-*— your own custom data, readable viaelement.dataset.hidden,disabled,required— boolean attributes; their mere presence means true.aria-*— accessibility semantics for assistive technology.lang,dir,tabindex,title— internationalization and focus behavior.
<input disabled="false"> still disables the input. Remove the attribute to turn it off.Nesting rules
Tags must close in reverse order of opening — properly nested, never overlapping. Browsers silently auto-correct bad nesting, which is why invalid markup still 'works' but behaves unpredictably.
<!-- correct -->
<p>Learn <em>HTML <strong>now</strong></em></p>
<!-- wrong: tags overlap -->
<p>Learn <em>HTML <strong>now</em></strong></p>There is one historical restriction that trips people up: a block-level <p> element cannot contain another block element. The parser ends the paragraph automatically if it meets one.
FAQ
Should I use single or double quotes for attributes?
Can I invent my own tags?
div/span with a class, or a proper custom element if you really need new behavior.Related
HTML: getting started Headings, paragraphs and text
Last refreshed 2026-09-17.