Module 1: First Page · Lesson 3 of 6
HTML Attributes Explained: src, alt, title and More
All lessons in Module 1
Goal: Use attributes to give an element extra information.
Learn
Tags can carry extra information called attributes. An attribute lives inside the opening tag and has a name, an equals sign and a value in quotes, following the attribute syntax of the HTML standard (opens in a new tab):
<p title="Fun fact">Cats sleep a lot.</p>
If an element is a parcel, its attributes are the labels stuck on it. Some of them change what the browser does. The <img> tag shows an image. Its src attribute says which file to show, and alt describes the picture for people who can't see it. You will practice both in the Images lesson.
<img src="cat.svg" alt="A black cat">
<img> has no closing tag, because it has no text content to wrap. Separate several attributes with spaces, and always put the value in quotes.
The short version
- Attributes add extra information to an element and always sit in the opening tag, after the tag name.
- The syntax is
name="value". Separate several attributes with spaces and always quote the value. <img>needssrc(which file to show) andalt(a text description), and it has no closing tag.- Some attributes change what the browser does. Others only add information:
title, for example, shows a tooltip.
Example
<h1 title="Hover over me">Our Cat</h1>
<img src="cat.svg" alt="A black cat with green eyes">
<p>She sleeps sixteen hours a day.</p>Your task
Make a mini pet page:
- Below the heading, add an
<img>withsrc="dog.svg". - Give the image an
altattribute that describes the dog. - Give the
<h1>atitleattribute with any text. Hover the heading in the preview to see it.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<p>Cats sleep a lot.</p title="Fun fact">Right
<p title="Fun fact">Cats sleep a lot.</p>Attributes only work in the opening tag. The browser ignores anything you put in a closing tag.
Wrong
<img src="cat.svg" alt=A black cat>Right
<img src="cat.svg" alt="A black cat">Without quotes the value stops at the first space, so alt ends up as A and the other words turn into meaningless attributes.
Go deeper
Some attributes work on every element. These global attributes (opens in a new tab) include id (a unique name for one element), class (a group name used by CSS), lang, title and hidden. Others belong to specific elements, like src on <img>.
A few attributes are boolean: their presence alone means yes. <input disabled> is disabled, and so is <input disabled="false">, because the browser only checks whether the attribute is there. To turn it off, remove it.
Browsers silently ignore attributes they do not recognize. That keeps old pages working. It also means a typo such as scr="cat.svg" fails without any error message, so when an attribute seems dead, check its spelling first.
You can also store your own information with data- attributes, for example data-price="4". They are valid on any element and the browser ignores them. That makes them a safe spot for data that JavaScript reads later.
Attribute names are not case-sensitive either. Write them in lowercase, like tag names. The global attributes reference lists every attribute that works on all elements.
Frequently asked questions
What are attributes in HTML?
Attributes are extra settings written inside an opening tag as name="value". They tell the browser things the content can't, such as which file an image shows (src), a text alternative for it (alt) or a tooltip (title). An element can have several attributes, separated by spaces, in any order.
Do HTML attribute values need quotes?
Not always. HTML accepts an unquoted value if it contains no spaces or special characters such as =, <, > or quotes. Quote anyway. Sooner or later a value gains a space and breaks. Double quotes are the convention. Single quotes work too, and they're handy when the value itself contains a double quote.
What is the difference between alt and title in HTML?
alt is the replacement text for an image. Screen readers read it aloud, browsers show it when the image fails to load, and search engines use it to understand the picture. Accessibility guidelines call it a text alternative (opens in a new tab). title is optional advice that appears as a tooltip when a mouse hovers. Touch screens never show it and screen readers don't read it reliably, so never use title in place of alt.
