We said that a tag is a sandwich that wraps content. Actually, a tag can do one more thing. Adding a “little setting” to a tag—that’s the star of this lesson, the attribute. The name sounds a bit stiff, but the idea is simple.
The shape of an attribute
For example, a link that jumps to another page when you click it. You make this by adding a setting for “where to jump” to a tag called <a>.
<a href="https://www.youtube.com/">To YouTube</a>Broken apart, it looks like this.
| Part | Meaning |
|---|---|
a | The tag name (here, a link) |
href | The attribute name. “This is the destination address” |
"https://www.youtube.com/" | The attribute value. The actual destination |
The name="value" set is telling it “the destination is here.” The tag handles “what it is,” and the attribute handles “what setting it has”—this teamwork is the basis of HTML.
You only write it “inside the opening tag”
An attribute is always written inside the opening tag. You don’t write it in the closing tag (</a>).
And you can add as many attributes as you like. When you add two or more, separate them with a space.
<img src="shima.png" alt="A photo of Shima">This is an image tag. “Which image (src)” and “what image it is (alt)“—two settings, lined up and separated by a space.
The attributes you’ll meet from here
For reference, let me give a little preview of the attributes that show up in the coming lessons. They’re all the same name="value" shape.
| Attribute | Meaning | Where it appears |
|---|---|---|
href | A link’s destination | The link <a> lesson |
src | The location of the image to display | The image <img> lesson |
alt | The image’s description | The image <img> lesson |
target | How the link opens (a new tab, etc.) | The link <a> lesson |
Even when the kind of tag differs, the way you write attributes stays the same. Learn this one shape today, and you’ll be able to read every attribute from here on.
Summary of this lesson
- An attribute is a “setting” you add to a tag, in the shape
name="value" - You write it only inside the opening tag (as many as you like, separated by spaces)
- You don’t need to memorize the names—noticing “this is an attribute” is enough