Learning Objectives

After completing this tutorial, you will be able to:

• Understand what HTML attributes are.
• Learn where attributes are written.
• Read HTML code containing attributes.
• Prepare for links, images, forms, and CSS.

Table of Contents

1. Introduction
2. What Is an HTML Attribute?
3. Attribute Syntax
4. Common HTML Attributes
5. Real-World Example
6. Best Practices
7. Common Beginner Mistakes
8. Practice Exercise
9. Assignment
10. Summary
11. Frequently Asked Questions
12. Next Tutorial

Introduction

Until now, you've learned how to create HTML elements such as headings and paragraphs.

However, sometimes an HTML element needs extra information.

For example:

• Where should a link go?
• Which image should the browser display?
• What is the title of an element?
• Which CSS style should be applied?

To provide this extra information, HTML uses attributes.

Attributes make HTML elements more powerful and flexible.

What Is an HTML Attribute?

An attribute provides additional information about an HTML element.

Attributes are always written inside the opening tag.

General syntax:

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

Notice two important parts:

• Attribute Name
• Attribute Value

The value is usually written inside quotation marks.

Attribute Syntax

Look at the following example.

<p title="Welcome Message">Welcome to my website.</p>

Let's identify each part.

<p                → Opening tag

title             → Attribute name

"Welcome Message" → Attribute value

Welcome to my website. → Content

</p>              → Closing tag

The browser now has extra information about this paragraph.

Common HTML Attributes

Here are a few attributes you'll use throughout this course.

Attribute	Purpose
href	Specifies the destination of a link
src	Specifies the source of an image
alt	Alternative text for an image
title	Displays additional information on hover
id	Gives an element a unique identifier
class	Groups elements for CSS or JavaScript

Don't worry about learning all of them today.

We'll study each one in detail when we reach the relevant topic.

Real-World Example

Imagine your friend gives you a suitcase.

The suitcase is like an HTML element.

Now imagine attaching a luggage tag that says:

• Owner: Alex
• Destination: London
• Phone: 123456789

These labels don't change the suitcase itself, but they provide useful information.

HTML attributes work in exactly the same way.

They describe or add information to an element without changing its basic structure.

Best Practices

Always place attributes inside the opening tag.

✅ Correct

<p title="Introduction">Welcome!</p>

Always use quotation marks around attribute values.

Choose meaningful values that clearly describe the element.

Common Beginner Mistakes

Mistake 1

Placing the attribute outside the opening tag.

❌ Incorrect

<p> title="Hello"

Mistake 2

Forgetting quotation marks.

❌ Incorrect

<p title=Hello>

✅ Correct

<p title="Hello">

Mistake 3

Misspelling attribute names.

For example:

❌ titel

✅ title

Small spelling mistakes can prevent attributes from working correctly.

Practice Exercise

Read the following code.

<h1 title="Homepage">Welcome</h1>

Can you identify:

1. The element?
2. The attribute name?
3. The attribute value?

Assignment

Create the following HTML code.

<h1 title="My Portfolio">My Portfolio</h1>

<p title="Introduction">
Welcome to my first website.
</p>

Save your file.

Move your mouse over the heading and paragraph.

Depending on your browser, you may see the title text appear as a small tooltip.

Summary

In this tutorial, you learned that HTML attributes provide additional information about HTML elements. Attributes are written inside the opening tag and usually consist of a name and a value.

This concept is one of the most important parts of HTML because links, images, forms, multimedia, and many advanced features all depend on attributes.

Frequently Asked Questions

Can an element have more than one attribute?

Yes. An HTML element can contain multiple attributes.

Example:

<img src="photo.jpg" alt="Mountain" title="Beautiful Mountain">

Are attribute names case-sensitive?

HTML is generally case-insensitive for attribute names, but the best practice is to write them in lowercase.

Will every HTML element use attributes?

No. Some elements don't need attributes, while others rely on them. You'll learn their specific uses as you progress through the course.