HTML Attributes: How to Use Them to Add Detail to Tags

Note: This page is part of the Complete HTML Guide for Beginners. Check the main index for an overview of all topics.

---

HTML
Attributes

HTML ATTRIBUTES: WHAT THEY ARE AND HOW TO USE THEM

We saw in the previous article that HTML tags are like the instructions we give the browser to define the structure of a web page (like: "this is a heading," "this is a paragraph").

But sometimes, these basic instructions aren't enough. We need to provide additional information about a specific element. This is where HTML attributes come into play.

WHAT ARE HTML ATTRIBUTES?

Think of tags like nouns in a sentence (e.g., "dog"). Attributes are like the adjectives or specifics we add to that noun (e.g., "black dog," "dog named Fido").

Basically, attributes are extra pieces of information we insert directly into the opening tag of an HTML element. They serve to better specify its characteristics, behavior, or provide data necessary for its function.

Important: Attributes always go in the opening tag, never in the closing tag!

THE SYNTAX: HOW ARE THEY WRITTEN?

The structure of an attribute is almost always the same:

name="value"

Let's break it down:

1. name: This is the name of the attribute, defining the type of information we're adding (e.g., href, src, alt, lang, id, class...). Each HTML tag supports specific attributes, although some (called "global" attributes) can be used on most tags.
2. =: The equals sign connects the attribute name to its value.
3. "value": This is the specific value we assign to that attribute, always enclosed in double quotes (" "). This value provides the concrete information (e.g., a link's address, an image's path, a unique identifier).

If a tag has multiple attributes, you list them one after another in the opening tag, separated by a space:

<tag name1="value1" name2="value2">Content</tag>

PRACTICAL AND COMMON EXAMPLES

Let's look at a couple of classic examples right away to understand better:

1. The href attribute for links (<a>): The <a> tag creates a hyperlink (a link). On its own, however, it doesn't know where the link should point. We need the href attribute (which stands for "Hypertext Reference") to specify the destination URL.

   <p>Visit my favorite search engine: <a href="https://www.google.com">Google</a>.</p>

   • a is the tag.
   • href is the name of the attribute.
   • "https://www.google.com" is the value of the attribute (the web address).
2. The src and alt attributes for images (<img>): The <img> tag is used to insert an image. It's a self-closing tag (it doesn't have a closing </img> tag). It needs at least two fundamental attributes:
   • src (source): Specifies the path (the address) of the image file to display.
   • alt (alternative text): Provides alternative text that describes the image. This text is crucial: it's shown if the image doesn't load, read by screen readers for visually impaired users, and helps search engines understand what the image is about.

   <img src="images/logo-blog.png" alt="My Skill Vault blog logo">

These were just the first examples, but the name="value" mechanism is the key to giving HTML tags more power. Once you understand this, you've added a fundamental tool to your toolbox for building web pages!

---