HTML — Attributes

What attributes are

Attributes give elements extra information. They live inside the opening tag, written as name="value" pairs:

<a href="https://wikipedia.org">Go to Wikipedia</a>
<img src="photo.jpg" alt="Sunset over the mountains" width="300">

Here href, src, alt and width are attributes.

Anatomy of one:

<a  href="https://wikipedia.org" > Go to Wikipedia </a>
    └────┬─────┘
    name = "value"

The four rules

1. Attributes always go in the opening tag — never the closing one
2. Values go in quotes — double quotes by convention
3. Multiple attributes are separated by spaces, in any order
4. Names are case-insensitive; lowercase is standard

<!-- All equivalent, but only the first is conventional -->
<a href="page.html">Link</a>
<a HREF="page.html">Link</a>
<a href=page.html>Link</a>   <!-- works, but unquoted values break with spaces -->

Common mistake: class=special without quotes. It sometimes works, then mysteriously breaks later. Always quote values — it costs nothing.

The attributes you'll use constantly

href — where a link goes

<a href="https://google.com">External site</a>
<a href="about.html">Another page on my site</a>
<a href="#top">Jump to top of this page</a>

src and alt — images

<img src="images/logo.png" alt="Company logo">

• src — path to the image file
• alt — text description shown if the image fails, read aloud by screen readers, used by search engines

width and height — dimensions

<img src="cat.jpg" alt="Sleeping cat" width="400" height="300">

Values are pixels by default. Setting both prevents layout jumping while images load.

class and id — hooks for CSS/JavaScript

<div class="card featured">...</div>
<footer id="site-footer">...</footer>

	class	id
Reusable?	Yes — many elements can share it	No — unique per page
Typical use	Styling groups of things	One specific element (JS, anchors)

<!-- Three cards share styling through one class -->
<div class="card">HTML</div>
<div class="card">CSS</div>
<div class="card">JS</div>

Boolean attributes

Some attributes need no value — their presence is the value:

<input type="checkbox" checked>
<button disabled>Can't click me</button>

A complete example

<a href="https://developer.mozilla.org"
   target="_blank"
   rel="noopener"
   title="Opens in a new tab">
   MDN Web Docs
</a>

Four attributes on one element: destination, new-tab behavior, security, and a hover tooltip. This is normal HTML — elements often carry several attributes.

Mini Practice

Build profile.html:

1. Add an <img> with real src and meaningful alt
2. Add two <div>s sharing the class "box"
3. Give one of them an id of "first-box"
4. Add title="hover me" to any element and hover over it in the browser

Next: headings — organizing content into an outline →