HTML Attributes

Learn what HTML attributes are, how they are written, and how they provide additional information to HTML elements.

What are HTML Attributes?

HTML attributes provide additional information about an HTML element.

Attributes are written inside the opening tag of an element. They normally consist of an attribute name and an attribute value.

Basic Syntax:

attribute="value"

Basic Attribute Syntax

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

Example

<p id="intro">
    Welcome to HTML.
</p>

Part	Example	Meaning
Element	`p`	Paragraph element.
Attribute Name	`id`	Defines the attribute.
Attribute Value	`"intro"`	The value assigned to the attribute.

The id Attribute

The id attribute identifies a specific HTML element with a unique value within the document.

<h1 id="main-title">
    Welcome to CIIT Institute
</h1>

Here, main-title is the value of the id attribute.

Welcome to CIIT Institute

Important: An id is generally intended to identify a specific element uniquely.

The class Attribute

The class attribute is used to assign one or more class names to an HTML element.

Classes are commonly used with CSS and JavaScript.

<p class="message">
    Welcome to HTML.
</p>

Welcome to HTML.

The href Attribute

The href attribute specifies the destination of a hyperlink created using the <a> element.

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

Visit Website

The src Attribute

The src attribute specifies the location or source of external content such as images.

<img src="image.jpg" alt="Sample Image">

The browser uses the value of src to locate the image resource.

The alt Attribute

The alt attribute provides alternative text for an image.

<img src="student.jpg"
     alt="Student learning HTML">

Best Practice: Use meaningful alternative text for images to improve accessibility and provide useful information when an image cannot be displayed.

The title Attribute

The title attribute can provide additional advisory information about an HTML element.

<p title="HTML Introduction">
    Learn HTML step-by-step.
</p>

Hover over this text to see the title information.

The style Attribute

The style attribute can be used to apply inline CSS directly to an HTML element.

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

This is a blue paragraph.

Multiple Attributes

An HTML element can contain more than one attribute.

<img src="student.jpg"
     alt="Student"
     class="profile-image"
     id="studentPhoto">

In this example, the image element contains multiple attributes:

src
alt
class
id

Common HTML Attributes

Attribute	Used With	Purpose	Example
`id`	Most HTML elements	Identifies an element.	`id="header"`
`class`	Most HTML elements	Assigns class names.	`class="box"`
`href`	`<a>`	Defines a link destination.	`href="page.html"`
`src`	Images and media elements	Defines the source resource.	`src="image.jpg"`
`alt`	`<img>`	Defines alternative text.	`alt="Logo"`
`title`	Most HTML elements	Provides additional information.	`title="Information"`
`style`	Most HTML elements	Applies inline CSS.	`style="color:red;"`

Boolean Attributes

Some HTML attributes are boolean attributes. Their presence represents a true state.

<input type="checkbox" checked>

<input type="text" disabled>

checked

Indicates that a checkbox or similar control is selected.

disabled

Indicates that a form control is disabled.

Important Rules for Attributes

Attributes are written inside the opening tag.
Attribute names should be written correctly.
Attribute values are commonly placed inside quotes.
Multiple attributes are separated by spaces.
Different elements support different attributes.

Complete Example

<!DOCTYPE html>

<html>

<head>

    <title>HTML Attributes Example</title>

</head>

<body>

    <h1 id="main-title"
        class="heading">

        CIIT Institute

    </h1>

    <p class="description"
       title="HTML Course">

        Learn HTML step-by-step.

    </p>

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

        Learn More

    </a>

</body>

</html>

Practice Exercise

Create a heading with an id attribute.
Add a paragraph with a class attribute.
Create a link using the href attribute.
Add an image using src and alt.
Add a title attribute to an element.
Add an inline style attribute to a paragraph.

Summary

HTML attributes provide additional information about HTML elements. They are written inside opening tags and normally use the format attribute="value". Common attributes include id, class, href, src, alt, title, and style.

← Previous: HTML Elements Next: Headings →