Getting Started›Core· 35 min read

HTML Attributes

Extra information you add to tags — like where a link goes or what an image shows. Attributes are everywhere.

What you will learn

Explain what an attribute is and its name="value" form
Use the most common attributes
Follow the rules: lowercase names and quoted values

What is an attribute?

An attribute gives extra information about an element. It lives inside the opening tag and is written as name="value".

href is an attribute of the <a> tag

<a href="https://trainingatcodingclave.com">Visit us</a>

Here href is the attribute name and "https://..." is its value. One tag can have several attributes, separated by spaces.

The attributes you will use most

Attribute	Used on	What it does
`href`	links	Where the link goes
`src`	images, media	The file to load
`alt`	images	Text description of an image
`width` / `height`	images, media	Size in pixels
`style`	any element	Inline CSS (colour, size...)
`title`	any element	Tooltip text on hover
`lang`	<html>	Language of the content
`id` / `class`	any element	Names for CSS and JavaScript

One image, four attributes

<img src="https://picsum.photos/220/120"
     alt="A sample landscape photo"
     width="220"
     title="Hover over me!">

Live preview

This single <img> tag carries four attributes, each name="value" and separated by spaces: src says which image file to load, alt describes it in words, width="220" makes it 220 pixels wide, and title shows a little tooltip when you hover. One tag, four instructions.

Two simple rules

Write attribute names in lowercase (href, not HREF).
Always wrap values in double quotes ("like this").

Watch out: Watch out for curly/smart quotes (“ ”) that sneak in when copying from Word or chat apps. HTML needs straight quotes ("). Curly quotes silently break attributes.

Q. In <img src="cat.jpg" alt="A cat">, what is "alt"?

Answer: alt is an attribute name; "A cat" is its value. Both live inside the <img> opening tag.

✍️ Practice

Add a title attribute to a heading and hover over it to see the tooltip.
Create an image with src, alt and width attributes, all properly quoted.

🏠 Homework

List five different attributes you have seen and write one sentence on what each does.