Lesson Outcomes

After completing this lesson, learners will be able to:

• Define HTML attributes.
• Explain the purpose of attributes in HTML elements.
• Identify common HTML attributes.
• Understand how attributes are written in HTML tags.
• Apply attributes to enhance HTML elements.

Overview

HTML attributes provide additional information about HTML elements. They are used to modify or enhance the behaviour and appearance of elements on a web page.

Attributes are always included in the opening tag of an element and are written as name-value pairs.

Understanding attributes is important because they allow developers to:

• Add links to elements
• Display images correctly
• Control styling and behaviour
• Provide extra information to browsers

1. What are HTML Attributes?

HTML attributes are used to define additional properties of HTML elements.

They:

• Provide extra information about an element
• Modify how an element behaves
• Help customise content display

Attributes are always written inside the opening tag.

2. Structure of Attributes

Attributes follow a specific format.

Syntax

<tag attribute="value">Content</tag>

Example

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

In this example:

• href is the attribute
• "https://example.com" is the value

Key Points

• Attributes are written in the opening tag
• Values are usually placed inside quotation marks
• Multiple attributes can be added to one element

3. Common HTML Attributes

There are many attributes used in HTML.

3.1 href Attribute

Used in links.

Example:

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

Purpose:

• Specifies the destination of a link

3.2 src Attribute

Used in images.

Example:

<img src="image.jpg">

Purpose:

• Specifies the source of the image

3.3 alt Attribute

Used in images.

Example:

<img src="image.jpg" alt="A description">

Purpose:

• Provides alternative text if the image cannot be displayed
• Improves accessibility

3.4 class Attribute

Used for styling and grouping elements.

Example:

<p class="intro">Welcome</p>

Purpose:

• Applies styles using CSS
• Groups elements together

3.5 id Attribute

Used to uniquely identify elements.

Example:

<h1 id="main-title">Title</h1>

Purpose:

• Identifies a specific element
• Used in styling and scripting

4. Multiple Attributes

An element can have more than one attribute.

Example:

<img src="image.jpg" alt="Image" width="300" height="200">

This example includes:

• src → image source
• alt → description
• width and height → size

5. Importance of Attributes

Attributes are important because they:

• Add functionality to elements
• Improve accessibility
• Help structure and organise content
• Enable styling and interaction

Without attributes, HTML elements would be very limited in functionality.

Key Notes

• Attributes provide additional information about HTML elements.
• They are written inside opening tags.
• Attributes use name-value pairs.
• Common attributes include href, src, alt, class, and id.
• Multiple attributes can be used in a single element.
• Attributes improve functionality, accessibility, and structure.