Elements & Attributes
Attributes that configure elements, and the void elements that have no closing tag.
A tag on its own tells the browser what kind of element it is. But often you need to give it extra details: which page a link points to, which image to show, what language the page is in. You provide those details with attributes.
An attribute lives inside the opening tag and almost always looks like name="value":
<html lang="en">
<a href="https://wikipedia.org">Wikipedia</a>
<p class="intro">Welcome!</p>lang="en"— an attribute namedlangwith the valueenhref="..."— tells a link where to goclass="intro"— a label you'll later use to style this element with CSS
The value goes in double quotes. You can add several attributes to one tag, separated by spaces.
In <a href="/about">About</a>, what is href?
- AThe element's content
- BAn attribute that tells the link where to go
- CA closing tag
- DThe element's name
In the last lesson, every element had a closing tag. But a few elements describe content that has nothing inside — there is no text to wrap. These are called void elements, and they have no closing tag at all:
<img src="cat.jpg" alt="A sleeping cat">
<br>
<hr>
<input type="text"><img>— an image; the picture comes from thesrcattribute, so there is nothing to put between tags<br>— a single line break<hr>— a horizontal divider line<input>— a form field (Module 3)
Because a void element carries everything it needs in its attributes, writing </img> is invalid — there is no content to close around.
Which of these is a void element with no closing tag?
- A<p>
- B<div>
- C<img>
- D<button>
Two attributes deserve a special mention because you will use them on almost everything once you reach CSS: class and id.
<p class="warning">Careful!</p>
<div id="main-header">...</div>class— a reusable label. Many elements can share the same class, and you style them all at once.id— a unique label. Anidvalue should appear only once per page; it names one specific element.
You don't need them to see content, but they are the hooks CSS and JavaScript grab onto later. For now, just recognize them when you see them.
How many separate paragraphs does the browser show?
<p>First line.</p>
<br>
<p>Second line.</p>- AOne paragraph
- BTwo paragraphs with an extra blank line between them
- CThree paragraphs
- DNone — <br> breaks the code
Add the attribute that gives this image its accessible text description:
<img src="logo.png" ___="Company logo">- An attribute adds extra information to an element, written inside the opening tag as
name="value" - Values go in double quotes; you can list several attributes separated by spaces
- Void elements (
<img>,<br>,<hr>,<input>) carry everything in their attributes and have no closing tag classis a reusable label (many elements share it);idis a unique label (one element only) — both are hooks for CSS and JavaScript later
Next up: the standard skeleton that wraps every HTML page — <!DOCTYPE html>, <head>, and <body>.