BeingXpert Learn & Build Future

5. HTML Attributes

What you will learn

  • What an attribute is and where it goes
  • The attributes you will use most often
  • Why quotes and lowercase names matter

What is an attribute?

An attribute gives an element extra information. Attributes always go inside the opening tag and usually come as a name and a value pair.

Syntax

<tagname name="value">content</tagname>

A first example

Example

<a href="https://example.com">Visit Example</a>

Output

The href attribute tells the link where to go. Without it, the <a> element would not be a working link.

Common attributes

Attribute Used on What it does
href <a> The address the link points to
src <img> The file path or address of the image
alt <img> Text that describes the image
lang <html> The language of the page
title Most elements Extra advisory text, often shown as a tooltip
id Most elements A unique name for one element
class Most elements A shared name for a group of elements

The alt attribute

An image needs an alt attribute. Screen readers read it aloud to people who cannot see the image, and the browser shows it if the image fails to load.

Example

<img src="dog.jpg" alt="A brown dog running on a beach">

If the file dog.jpg is missing, the browser shows the alt text instead of the picture.

The title attribute

Example

<p title="Hypertext Markup Language">HTML</p>

Output

HTML (hover over this word to see the tooltip)

Touch screens and keyboard users usually cannot see tooltips. Never put essential information only in a title attribute.

Quotes and lowercase

  • Always put attribute values in double quotes: href="page.html".
  • If the value itself contains double quotes, wrap it in single quotes instead.
  • Write attribute names in lowercase. This is the common standard.

Several attributes at once

Separate attributes with a space. The order does not matter.

Example

<img src="logo.png" alt="BeingXpert logo" width="120" height="120">

The style attribute (a preview)

The style attribute can change how one element looks. You will learn CSS properly later, so treat this as a preview.

Example

<p style="color: blue;">This text is blue.</p>

Output

This text is blue.

For real projects, keep styling in a CSS file, not in style attributes.

Common mistakes

  • Forgetting the quotes around a value, especially when it contains spaces.
  • Putting attributes in the closing tag. They belong only in the opening tag.
  • Leaving out alt on images.
  • Misspelling an attribute name. The browser silently ignores it.

Exercise

Write a link to https://example.com with the text Example site and a title of Go to Example.

Show solution 
<a href="https://example.com" title="Go to Example">Example site</a>

Knowledge check

1. In which tag do attributes go?

The opening tag.

2. Which attribute describes an image for screen readers?

alt

3. Which attribute sets the address of a link?

href

Summary

  • Attributes add extra information to elements.
  • They go in the opening tag as name="value".
  • Always use quotes, and always give images an alt.

Next lesson: HTML Headings.

Scroll to Top