Tags say what something is. Attributes add the details: where a link goes, which picture to show and what that picture contains.
Attributes always go inside the start tag and are written as name="value". Without them most elements would be useless. A link with no address goes nowhere, and an image with no file shows nothing.
In this lesson you'll learn how to write attributes correctly, meet the ones you'll use on almost every page, and see how a special group called boolean attributes works.
How to write an HTML attribute
<a href="https://www.codevra.org">Learn to code</a>hrefis the attribute name."https://www.codevra.org"is the attribute value, written in quotes.- An element can have many attributes, separated by spaces, in any order.
Always put the value in double quotes. HTML sometimes works without them, but a value that contains a space, such as a list of two class names, will break if it isn't quoted.
The HTML attributes you'll use most
| Attribute | Used on | What it does |
|---|---|---|
href | <a> | Where the link goes |
src | <img>, <video>, <script> | The file to load |
alt | <img> | Text describing the image |
id | any | A unique name for one element |
class | any | A reusable label for styling |
title | any | Tooltip text on hover |
lang | any (usually <html>) | The language of the content |
style | any | Inline CSS (use sparingly) |
Attributes that work on every element, like id, class, title and lang, are called global attributes. Others only make sense on certain elements: href belongs on links, and src belongs on images, videos and scripts.
Boolean attributes
Some attributes are simply on or off. If the attribute is present, the answer is "yes":
<input type="checkbox" checked>
<button disabled>Can't click me</button>You don't need to write checked="true". In fact, disabled="false" still disables the button, because the browser only checks whether the attribute is there. To turn a boolean attribute off, remove it completely.
Why the alt attribute matters
The alt attribute on an image is easy to forget, but it does important work:
- Screen readers read it aloud to people who can't see the image.
- Browsers show it when the image fails to load.
- Search engines use it to understand what the picture shows.
Describe the image in a short sentence, such as alt="Golden retriever catching a frisbee". If an image is purely decorative, use an empty value, alt="", so screen readers skip it.
HTML Attributes Syntax
Attribute syntax
<tagname attribute="value" another="value">content</tagname>Always use double quotes. Attribute names are lowercase.
HTML Attributes Summary
- Attributes add extra information to an element and go inside the start tag.
- Write them as
name="value"and always quote the value. href,src,alt,idandclassare the attributes you'll use most often.- Global attributes such as
id,classandlangwork on any element. - Boolean attributes like
disabledandcheckedare on when present and off when removed.
HTML Attributes Examples
Each example runs in the page. Edit the code and press Run to see what changes.
Links, tooltips and images
Hover over the link in the result to see the title tooltip.
<h1>Weekend Hike</h1>
<p>
We're walking the
<a href="https://en.wikipedia.org/wiki/Snowdon" title="Opens Wikipedia">Snowdon trail</a>
this Saturday.
</p>
<img src="https://picsum.photos/id/1018/400/200" alt="Mountain valley with a river" width="400" height="200">Line-by-line explanation
- Line 4
hrefholds the destination.titleadds a tooltip shown on hover. - Line 7
srcis the image address,altdescribes it, andwidth/heightreserve space before it loads.
Boolean attributes
Run this and try to click each button. Then delete the word disabled and run again.
<button>Order pizza</button>
<button disabled>Sold out</button>
<p>
<input type="checkbox" checked> Extra cheese
</p>Line-by-line explanation
- Line 1A normal, clickable button.
- Line 2
disabledmakes the button grey and unclickable. No value needed. - Line 4
checkedticks the checkbox when the page loads.
Common HTML Attributes Mistakes
Forgetting the quotes
<img src=my cat.jpg alt=My cat><img src="my-cat.jpg" alt="My cat">Without quotes, the value stops at the first space. The browser thinks cat.jpg and cat are separate (meaningless) attributes.
Putting attributes in the end tag
<a>Home</a href="/"><a href="/">Home</a>Attributes only ever go in the start tag.
HTML Attributes in Real Projects
Attributes power the whole web
Every link you click uses href. Every image uses src and alt. Search engines read alt to understand pictures, and screen readers read it aloud to blind users. CSS uses class and id to style things, and JavaScript uses them to find elements. Get attributes right and everything else gets easier.
HTML Attributes Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
Complete the image so it loads sunset.jpg and describes it.
<img ="sunset.jpg" ="Orange sunset over the sea">src points to the file; alt describes it in words.Where do attributes go?
What happens with this button?
<button disabled="false">Send</button>The link should go to https://example.com and show the tooltip "Example site", but it's broken. Fix it.
<a title=Example site>Visit</a href="https://example.com">- The link has the right
href - The tooltip is "Example site"
- The link text is "Visit"
HTML Attributes Quiz
4 questions to check what you learned.
Which attribute tells a link where to go?
- src
- href
- link
- go
Which attribute describes an image for screen readers?
- alt
- title
- src
- describe
Which of these is a boolean attribute?
- href
- class
- required
- src
What is a "global attribute"?
- An attribute that can be used on any element, like
idorclass - An attribute that only works on
<html> - An attribute that affects every page on a site
- An attribute written in capital letters
- An attribute that can be used on any element, like
HTML Attributes Challenge
Label everything
Improve this plain HTML using attributes:
- Make the link go to
https://www.nasa.govand give it the tooltipNASA website. - Give the image the source
https://picsum.photos/id/1002/300/200and a meaningfulalt. - Disable the "Launch" button.
<h1>Space Club</h1>
<p>Read the latest news on <a>NASA</a>.</p>
<img>
<button>Launch</button>- Link goes to https://www.nasa.gov
- Link tooltip is "NASA website"
- Image has the right
src - Image has a meaningful
alt(3+ characters) - The button is disabled
<a href="…" title="…">.