1.3 Links, Images, and Attributes

So far our tags have just "wrapped text." But the web is called a "web" because it can link to other places and embed images. Both rely on a new concept: the attribute.

What is an attribute

An attribute is a "setting" written inside the opening tag to configure the element. The format is always name="value":

<img src="cat.jpg" alt="An orange cat" width="200">

Here <img> has three attributes — src, alt, width — separated by spaces. Attributes let the same tag behave differently: the same <img> shows a different image when src changes.

The "attribute editor" below lets you switch between <img>, <a>, and <input>, change their attributes, and watch the code and result update live.

Links: the <a> tag

<a> (anchor) creates a hyperlink. Its most important attribute is href, which sets "where a click goes":

<a href="https://example.com">Visit example.com</a>
<a href="about.html">This site's About page</a>
<a href="https://example.com" target="_blank">Open in a new tab</a>

• href can be a full URL or a relative path within the site.

• Adding target="_blank" opens the link in a new tab.

Images: the <img> tag

<img> embeds an image. It's self-closing (no </img>), with these key attributes:

<img src="photo.jpg" alt="Sunset by the sea" width="300" height="200">

• src (source): the image's address — required.

• alt (alternative text): the image's text alternative. Shown when the image fails to load and read aloud by screen readers.

• width / height: width and height in pixels.

General rules for attributes

• Attributes always go in the opening tag, never the closing tag.

• Multiple attributes are separated by spaces, in any order.

• Values are wrapped in quotes (single or double; double is conventional).

• Some attributes are "boolean" — just writing the name turns them on, like <input disabled>.