Attributes, Links, and Images

Most HTML elements do their job with nothing but a tag name. But some elements need additional information to work at all — a link without a destination is useless; an image with no source cannot load. That extra information lives in attributes.

What attributes are

An HTML attribute sits inside the opening tag and provides configuration for the element. The syntax is always name="value":

<a href="https://example.com">Visit Example</a>
<img src="logo.png" alt="Company logo">
<input type="email" name="user-email" required>

Attributes never appear in closing tags. An element can have many attributes; order does not matter. Values are almost always quoted (double quotes are conventional), though quotes are technically optional when the value contains no spaces.

Boolean attributes have no value — their presence alone switches the feature on:

<input type="checkbox" checked>
<button disabled>Cannot click</button>
<input type="text" required>

checked, disabled, and required are all boolean attributes. Writing disabled="disabled" or disabled="true" is redundant but not wrong.

The anchor element

<a> (anchor) creates a hyperlink. The href attribute sets the destination — it is the only required attribute.

<a href="https://developer.mozilla.org">MDN Web Docs</a>

Absolute vs relative URLs

An absolute URL includes the scheme and host — it works from anywhere:

<a href="https://example.com/about">About</a>

A relative URL is resolved against the current page's address:

<!-- Same folder -->
<a href="contact.html">Contact</a>

<!-- Parent folder -->
<a href="../index.html">Home</a>

<!-- Root-relative (starts with /) — safe on any page of the same site -->
<a href="/blog/first-post">First Post</a>

Use relative URLs for links within your own site — they keep working when the domain changes and are shorter to read.

Fragment links

A #id fragment scrolls the browser to the element with that id:

<!-- Somewhere on the page -->
<h2 id="installation">Installation</h2>

<!-- Link that jumps there -->
<a href="#installation">Jump to Installation</a>

<!-- Link on another page that jumps to a section there -->
<a href="/docs/setup#installation">Setup: Installation</a>

Fragment links are how table-of-contents navigation works. The id must be unique on the page.

Opening in a new tab

target="_blank" opens the link in a new tab:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  External site
</a>

Always add rel="noopener noreferrer" when using target="_blank". Without it, the new page can access window.opener in JavaScript — a minor but real security issue. Most linters will warn you if you forget.

The image element

<img> embeds an image. It is a void element — no closing tag. Two attributes are effectively required:

• src — the URL of the image file
• alt — a text description of the image

<img src="/photos/mountain-lake.jpg" alt="A still mountain lake at sunrise, mist rising from the water">

Writing good alt text

Alt text is what screen readers announce when a user reaches the image. It is also what appears in the browser if the image fails to load, and what search engines index instead of the image itself.

Good alt text describes what the image conveys in context:

<!-- Descriptive — tells you what the image communicates -->
<img src="chart.png" alt="Bar chart showing Q3 revenue up 22% year-on-year">

<!-- Vague — tells you nothing -->
<img src="chart.png" alt="Chart">

<!-- Redundant with surrounding text — adds noise -->
<p>Revenue rose 22% year-on-year.</p>
<img src="chart.png" alt="Chart showing revenue rose 22% year-on-year">

Think about what a reader would miss if the image were not there. Describe that.

Decorative images

When an image is purely decorative — a background flourish, a divider line, a generic stock photo that adds no information — tell assistive technology to skip it entirely with an empty alt:

<!-- The empty alt="" explicitly says "this image is decorative" -->
<img src="divider.svg" alt="">

Omitting alt entirely is different: the screen reader may announce the file name instead, which is worse than nothing.

Width and height

Specifying width and height lets the browser reserve space for the image before it loads, preventing the layout from jumping as images arrive:

<img src="photo.jpg" alt="A red barn in a snow-covered field" width="800" height="600">

The values should match the image's intrinsic dimensions. CSS can override the displayed size; these attributes are about layout hints to the browser.

Where to go next

Links and images both rely heavily on attributes. Next: Forms and Inputs — the web's primary mechanism for collecting user input, built entirely on semantic elements and the attributes that connect them.