HTML Attributes

Introduction

In the previous lesson, you learned about HTML elements and how they form the building blocks of every webpage.

Elements define the structure and meaning of content. A heading element creates a heading, a paragraph element creates a paragraph, and an image element represents an image.

However, the element name alone is often not enough.

A link needs to know where it should navigate. An image needs to know which file it should display. A form control may need to know whether it is required, disabled, or ready to accept a particular type of data.

HTML attributes provide this additional information.

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

What are HTML Attributes?

HTML attributes provide additional information, settings, or configuration for HTML elements.

They can affect the behavior, meaning, accessibility, identification, or functionality of an element.

Attributes are written inside the opening tag or start tag of an HTML element.

<a>Visit Website</a>

This creates an anchor element, but it does not specify a destination.

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

The href attribute provides the destination that the link should navigate to.

<a href="https://example.com">Visit Website</a>
 │     │             │             │
 │     │             │             │
 ▼     ▼             ▼             ▼
Element Attribute   Value         Content

Why Do We Need Them?

HTML elements describe the type of content, but many elements require additional information before they can perform their intended purpose.

Real-World Analogy

Imagine a student in a school.

The student is the main object, similar to an HTML element. However, the school also stores additional information about that student.

Student                    ← HTML Element
│
├── Name                   ← Attribute
├── Roll Number            ← Attribute
├── Class                  ← Attribute
├── Photo                  ← Attribute
└── Admission Number       ← Attribute

The student remains the main object, while the additional details describe or configure information associated with that student.

HTML works in a similar way.

<img
    src="student.jpg"
    alt="Student Profile Photo"
    width="200"
>

img Element
│
├── src="student.jpg"
├── alt="Student Profile Photo"
└── width="200"

Attribute Syntax

Most HTML attributes are written as a name followed by an equals sign and a value.

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

The attribute appears inside the start tag before the closing angle bracket.

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

<a href="https://example.com">
    │             │
    │             │
    ▼             ▼
Attribute        Attribute
  Name             Value

Attributes Belong Inside the Start Tag

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

<!-- ❌ Incorrect -->

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

Parts of an Attribute

A typical attribute contains two main parts: an attribute name and an attribute value.

href="https://example.com"

1. Attribute Name

href="https://example.com"
 │
 ▼
Attribute Name

The attribute name identifies what additional information or setting is being provided.

2. Attribute Value

href="https://example.com"
         │
         ▼
   Attribute Value

The attribute value contains the actual information assigned to the attribute.

Example 1: Link Attribute

The anchor element creates a hyperlink.

The href attribute specifies the destination associated with that link.

<a href="https://www.google.com">Visit Google</a>

<a href="https://www.google.com">Visit Google</a>
 │    │              │              │
 │    │              │              │
 ▼    ▼              ▼              ▼
Anchor Attribute   Destination     Link Text
Element

Example 2: Image Attribute

The img element embeds an image into the document.

It commonly uses the src attribute to identify the image resource and the alt attribute to provide a text alternative.

<img src="nature.jpg" alt="Beautiful Nature">

img
│
├── src="nature.jpg"
│      │
│      └── Image resource
│
└── alt="Beautiful Nature"
       │
       └── Text alternative

Multiple Attributes

An HTML element can contain multiple attributes.

Attributes are separated from each other by whitespace inside the start tag.

<a
    href="https://www.bytecrest.com"
    target="_blank"
    title="Visit Bytecrest"
>
    Bytecrest
</a>

a Element
│
├── href="https://www.bytecrest.com"
│
├── target="_blank"
│
└── title="Visit Bytecrest"

Common HTML Attributes

HTML provides many attributes. Some are specific to particular elements, while global attributes can be used on most HTML elements.

href Attribute

<a href="/about">About Us</a>

The href attribute specifies the destination of a hyperlink.

src Attribute

<img src="photo.jpg" alt="Mountain View">

The src attribute identifies a resource to be loaded by supported elements.

alt Attribute

<img src="photo.jpg" alt="Snow-covered mountain">

The alt attribute provides a text alternative for an image.

id Attribute

<h1 id="main-title">Learn HTML</h1>

The id attribute assigns an identifier to an element. An id value should be unique within the document.

class Attribute

<article class="card featured">
    Featured Article
</article>

The class attribute assigns one or more class names to an element. Multiple elements can share the same class names.

Example 3: Multiple Attributes

The following image element uses several attributes together.

<img
    src="flower.jpg"
    alt="Pink flower in a garden"
    width="300"
    height="200"
    title="Beautiful Flower"
>

img
│
├── src="flower.jpg"
│
├── alt="Pink flower in a garden"
│
├── width="300"
│
├── height="200"
│
└── title="Beautiful Flower"

Boolean Attributes

Some HTML attributes represent a true-or-false state.

These are called boolean attributes.

For a boolean attribute, the presence of the attribute represents the true state, while its absence represents the false state.

<input type="text" disabled>

Because the disabled attribute is present, the input is disabled.

<input type="text">

Because the disabled attribute is absent, the input is not disabled by that attribute.

<input type="checkbox" checked>

<input type="text" readonly>

<input type="email" required>

<select>
    <option selected>India</option>
</select>

<!-- Still disabled because the attribute is present -->

<input type="text" disabled="false">


<!-- Not disabled by the disabled attribute -->

<input type="text">

Attribute Order

In general, the order of attributes inside a start tag does not change the meaning of the element.

<img
    src="flower.jpg"
    alt="Pink flower"
    width="300"
    height="200"
>

<img
    height="200"
    width="300"
    alt="Pink flower"
    src="flower.jpg"
>

Both examples contain the same attributes and values.

Browser Rendering Flow

When a browser processes an HTML element with attributes, it reads the element and its attributes as part of the document structure.

<img
    src="nature.jpg"
    alt="Green forest"
    width="400"
>

Read <img>
     │
     ▼
Identify Image Element
     │
     ▼
Read src, alt, and width
     │
     ▼
Create img Element in DOM
     │
     ▼
Use src to Request Resource
     │
     ▼
Use Other Attribute Information
     │
     ▼
Render Result

Real-World Applications

Attributes are used throughout real-world websites and web applications.

Advantages

Common Beginner Mistakes

<!-- ❌ Avoid -->

<img src=my holiday photo.jpg>


<!-- ✅ Correct -->

<img src="my-holiday-photo.jpg" alt="Holiday photo">

<!-- ❌ Incorrect -->

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


<!-- ✅ Correct -->

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

<!-- ❌ Incorrect -->

<img href="photo.jpg">


<!-- ✅ Correct -->

<img src="photo.jpg" alt="Description of photo">

<!-- ❌ Incorrect -->

<h2 id="section-title">First Section</h2>
<h2 id="section-title">Second Section</h2>


<!-- ✅ Better -->

<h2 id="first-section">First Section</h2>
<h2 id="second-section">Second Section</h2>

<!-- ❌ Still disabled -->

<input type="text" disabled="false">


<!-- ✅ Enabled -->

<input type="text">

Best Practices

<img
    src="/images/course-cover.jpg"
    alt="HTML course cover"
    width="640"
    height="360"
    class="course-cover"
>

Frequently Asked Questions

Key Takeaways

Summary

HTML attributes extend elements by providing additional information, settings, and configuration.

They are written inside element start tags and commonly use a name-value structure.

You learned how the href attribute specifies link destinations and how src identifies resources used by supported elements.

You also learned how the alt attribute provides a text alternative for images and why its value should depend on the purpose of the image.

Attributes such as id and class help identify and classify elements for use with HTML, CSS, and JavaScript.

An element can contain multiple attributes, and the order of those attributes generally does not change the meaning of the element.

You also learned about boolean attributes, where presence represents the true state and absence represents the false state.

Correct attribute usage is essential because attributes control destinations, resources, accessibility information, identifiers, classifications, form behavior, and many other parts of modern webpages.

In the next lesson, you will learn about HTML headings and how to create a clear hierarchy of page titles and section headings.