20 min read
Elements, Tags and Attributes
Opening and closing tags, empty elements, attributes such as href, src, id and class, nesting rules and comments.
The Anatomy of an Element
One elementHTML
<p class="welcome">Fresh tea every morning.</p>| Parts of an element | ||
|---|---|---|
Empty (Void) Elements
Some elements have no content, so they have no closing tag: <img>, <br> (line break), <hr> (horizontal line), <meta>, <link> and <input>. Everything they need is in their attributes.
Common Attributes
| Attributes you will use most | ||
|---|---|---|
Nesting
Elements go inside other elements — this is called nesting. The rule: close them in the reverse order you opened them, like boxes inside boxes.
Correct nestingHTML
<p>Try our <strong>love cake</strong> today.</p>What the browser shows
More lessons in HTML · Next: Headings, Paragraphs and Text Formatting · Previous: Your First Web Page
Comments
A commentHTML
What the browser shows
A comment starts with <!-- and ends with -->. Browsers ignore it. Use comments to label sections of your code — it helps you, your team, and the person marking your work.
index.html
What the browser shows
Practice
Choose all that apply.