HTML: Attributes

What you will learn

Attributes provide extra information about HTML elements — they go inside the opening tag. You will also learn how links and images use attributes to work.

Common attributes

<a href="https://example.com" target="_blank">Click here</a>
<img src="photo.jpg" alt="A sunny landscape" width="600" height="400">
<p class="intro" id="first-paragraph">Hello</p>

Attribute reference

Attribute	Used on	What it does
`href`	`<a>`, `<link>`	Specifies the destination URL
`src`	`<img>`, `<script>`, `<video>`	Source file URL
`alt`	`<img>`	Alternative text (accessibility)
`class`	All elements	CSS class for styling (can repeat)
`id`	All elements	Unique identifier (must be unique per page)
`target`	`<a>`, `<form>`	Where to open the link (`_blank` = new tab)
`width` / `height`	`<img>`, `<video>`	Dimensions in pixels

Link behavior

<!-- Opens in same tab (default) -->
<a href="https://example.com">Example</a>

<!-- Opens in new tab -->
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<!-- Link to an email address -->
<a href="mailto:[email protected]">Email me</a>

Always add rel="noopener" when using target="_blank" for security.

Common mistakes

Using class when you need id — use class for repeating styles, id for unique elements (JavaScript hooks, anchor links).
Forgetting that id must be unique on the page — duplicate IDs cause JavaScript bugs.
Omitting alt on images — screen readers cannot describe the image without it.
Leaving href empty on an <a> tag — it creates a link to the current page (confusing).

Quick check below!