HTML Attributes

In the last session you learned that elements are built from tags and content. Attributes give those tags extra information. Without attributes, many elements cannot do their real job — for example, a link needs an address, and an image needs a file path.

What is an HTML attribute?

An HTML attribute is a name and value placed inside an element’s start tag. It tells the browser something about that element that is not the same as the visible text content between tags.

Direct answer

Attributes use a simple pattern: name="value". They belong in the opening tag, before the closing >. Common examples include href for links and src plus alt for images. The next sessions will use attributes often, so learn the pattern once here.

Reading the example

• On the link, href stores the destination URL
• The visible link text is still the content between <a> and </a>
• On the image, src points to the image file
• alt provides alternative text when the image cannot load or for accessibility
• Both attributes sit inside the start tag

Syntax rules to remember

1. Put attributes in the start tag only — not in the end tag
2. Separate the attribute name from its value with =
3. Wrap most values in quotes: href="https://example.com"
4. You can place more than one attribute in the same start tag, separated by spaces
5. Attribute names are usually written in lowercase in modern HTML

Here href sets the address and title can provide extra advisory text (often shown as a tooltip in desktop browsers). You do not need every optional attribute on every tag — use the ones the element needs.

Attributes vs content

Content is what sits between a start tag and an end tag, such as the words inside a paragraph. Attributes live on the start tag and configure the element. Mixing them up causes bugs: putting a URL in the link text alone does not create a working link; the URL belongs in href.

A note on empty elements

Empty elements such as img still use attributes, even though they have no separate end tag. That is normal: attributes describe the element; they are not the same thing as wrapped content.

Try it yourself

1. Open a basic HTML page in your editor
2. Add a link with an href attribute to a real or example URL
3. Add an img with src and meaningful alt text (use any practice image path you have, or keep a placeholder name for learning the syntax)
4. Save and open the page in your browser
5. Click the link and check that the image markup is present in the page source even if the image file is missing

Common mistakes

• Writing attributes on the closing tag
• Forgetting quotes around values that need them
• Using the wrong attribute for the job (for example putting a URL in src on a link instead of href)
• Leaving alt empty on informative images
• Assuming attribute text always appears as visible page content — many attributes configure behavior or accessibility instead

Summary

• Attributes add extra information inside a start tag
• The usual form is name="value"
• Links need href; images commonly need src and alt
• Content is between tags; attributes configure the tag
• You can combine multiple attributes on one start tag
• Later lessons reuse this pattern for headings, forms, media, and more