HTML Attributes

Attributes are extra pieces of information you put inside an opening tag, between the tag name and the closing angle bracket. They always follow the same pattern: a name, an equals sign, and a value wrapped in quotes. That value changes what the element does or what it shows.

Each tag understands its own set of attributes. The image tag needs src to know which file to display. The link tag needs href to know where to go. Without those attributes the elements do almost nothing, which is why beginners learn tags and attributes together.

Some attributes work on every element. The style attribute applies CSS directly to one element. The class and id attributes give elements names that CSS and JavaScript can target later. The title attribute shows a small tooltip on hover. A handful of universal attributes cover most of what you will write.

href and src, the classic pair

The two attributes you will meet first are href and src. The link tag uses href with a destination, and the image tag uses src with a file location. Both accept a full web address starting with https or a relative path to a file next to your page. Swap one for the other and the element quietly stops working.

<a href="https://example.com">Visit example</a>
<img src="photo.jpg" alt="A photo">

Quotes and clean syntax

Wrap attribute values in quotes. Double quotes are the standard and single quotes also work. Keep one space between attributes and do not repeat an attribute on the same tag, because the browser only honors the first one. A few attributes are boolean: they work by their presence alone, so the disabled attribute needs no value at all.

<img src="cat.jpg" alt="A sleeping cat" width="300">
<button disabled>Cannot click</button>

Syntax

<a href="https://htmlrunner.com">A link with attributes</a>

el.removeAttribute('disabled') // not el.setAttribute('disabled', false)