Tags, Elements and Attributes
Every HTML page, however large, is built from one repeating shape. Once you can see that shape, you can read any page's source and spot mistakes such as a missing closing tag straight away.
The rule
Open, content, close; extra details ride in the opening tag.
An element has three parts:
<p class="note">Bring an umbrella.</p><p class="note">is the opening tag. The element's name,p, sits right after<.Bring an umbrella.is the content.</p>is the closing tag: same name, with a slash.
The class="note" part is an attribute. Attributes add information about the element and always follow the pattern name="value". They go only in the opening tag, separated by spaces. Quote your values with double quotes; it is the most common style and it avoids trouble when a value contains spaces.
Elements can hold other elements. This is called nesting, and the rule is that the last one opened is the first one closed:
<p>This is <strong>very</strong> important.</p>Some elements have no content at all, so they have no closing tag. These are void elements, for example <img>, <br>, <hr>, <input> and <meta>:
<img src="cat.jpg" alt="A ginger cat asleep on a chair">A few attributes are boolean: their presence alone means "yes". <input disabled> is disabled; there is no need to write a value.
The shortcut
Read an element like a sandwich: find the name, check the attributes, match the close.
Find the name
<a href="/help" target="_blank">Help</a>: the name isa, a link.
The trap is crossed nesting such as <p><em>text</p></em>. Matching closes in reverse order catches it: em opened last, so it must close first.
People often use "tag" and "element" as if they meant the same thing, and in casual talk that is fine. When precision matters, remember the difference: tags are the markers you type, and the element is the whole thing they create, content included. You write tags; the browser builds elements.
Drills
Answer fast — trust the rule.
In <img src="logo.png" alt="Pebells logo">, what is alt?
Which line is correctly nested?
Where can an attribute appear?
Which of these is a void element that never has a closing tag?
What does <button disabled>Send</button> do?
Remember
- Element = opening tag + content + closing tag; attributes live in the opening tag as
name="value". - Shortcut: find the name, check the attributes, match the close, in reverse order when nested.
- Trap: crossed nesting, and giving void elements like
<img>a closing tag.