HTML - Attributes

An HTML Attribute is an associated property or modifier of an HTML element used to extend its capabilities, define its configuration, or alter its default behavior. Attributes are always specified in the opening tag and usually come in name/value pairs like name="value". For example, the src attribute on an image specifies its file path, while href on an anchor tag specifies the destination URL.

Attribute	Applies To	Primary Function
alt	`<img>`, `<area>`	Alternative descriptive text displayed if the image fails to load; essential for screen readers and Google Image SEO.
style	Global (all elements)	Applies inline CSS styling rules directly to the element (e.g., color, fonts, margins).
href	`<a>`, `<link>`	Specifies the destination hyperlink URL or linked resource location.
src	`<img>`, `<script>`, `<iframe>`, `<audio>`, `<video>`	Specifies the exact source URL or local path of the embedded media file.
id	Global (all elements)	Assigns a unique identifier to a single element on the webpage for CSS styling and JavaScript targeting.

Syntax Rule: In standard HTML5, attribute names are case-insensitive, but industry best practice and W3C guidelines mandate using lowercase names. Furthermore, attribute values should always be enclosed within double quotes ("value") to prevent parsing errors when values contain spaces.

Detailed Code Examples

1. The 'alt' Attribute (Image Alternative Text)

The alt attribute specifies alternative text if an image cannot be displayed. It is also read aloud by screen readers for visually impaired visitors and is indexed by Google image bots.


<img src="logo.png" alt="Veewom Learning Portal Official Logo">

2. The 'style' Attribute (Inline CSS)

The style attribute allows you to inject inline CSS styling properties directly into any individual element.


<p style="color: blue; font-size: 18px; font-weight: bold;">
    This text is styled with an inline CSS attribute.
</p>

3. The 'href' Attribute (Hyperlink Destination)

The href (hypertext reference) attribute specifies the target destination address when a user clicks the anchor link.


<a href="https://veewom.com" target="_blank" rel="noopener noreferrer">Visit Veewom Homepage</a>

4. The 'src' Attribute (Media Source)

The src attribute points the browser to the exact image or script file location.


<img src="images/banner.jpg" width="600" height="300" alt="Veewom Web Design Banner">

5. The 'id' and 'class' Attributes

The id attribute gives a strictly unique identity to one element on the page, while class can be shared across multiple elements.


<div id="main-navigation" class="navbar navbar-default">
    <p class="nav-item">Home</p>
    <p class="nav-item">Tutorials</p>
</div>

Categories of HTML Attributes

HTML5 attributes are divided into four main categories:

Category	Description	Common Attributes
Global Attributes	Attributes that can be legally specified on ANY HTML element.	`id`, `class`, `title`, `style`, `hidden`, `tabindex`, `lang`, `dir`
Element-Specific	Attributes reserved exclusively for particular elements.	`href` (anchor), `src` (img/script), `action` (form), `type` (input)
Boolean Attributes	Attributes that represent true/false states. Their presence alone implies a true value; no value assignment is needed.	`required`, `disabled`, `readonly`, `checked`, `autofocus`
Custom Data Attributes	Attributes prefixed with `data-*` used to store private, custom page metadata accessible via JavaScript.	`data-user-id="101"`, `data-price="499"`, `data-role="admin"`

Crucial SEO Tip for Bloggers: When placing outbound links to external sites or affiliate sponsors, always use the rel attribute: rel="nofollow" or rel="sponsored" tells Google not to pass PageRank to paid endorsements, protecting your blog from Google link spam penalties!

Hands-on Practice Session for Students

Lab Assignment 4: Build a Product Card with Multiple Attribute Types.

Problem Statement: Create an HTML product showcase card that uses global attributes (id, class, title), media attributes (src, alt, width), a boolean attribute (disabled on an out-of-stock button), and a custom data attribute (data-product-id).

Solution Code:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product Card - Attributes Practice</title>
</head>
<body>
    <div id="product-101" class="card" title="HTML5 Handbook" data-product-id="BCA-2026">
        <h2>HTML5 & Web Design Masterclass</h2>
        <img src="images/mini.png" alt="HTML5 Book Cover" width="150" height="150">
        <p>Price: <strong>₹499</strong></p>
        <button type="button" disabled>Out of Stock (Disabled)</button>
        <p><a href="attributes-list.htm" title="Click to view full attributes list">Explore Complete Attributes List &rarr;</a></p>
    </div>
</body>
</html>

Viva & University Exam Questions (BCA Exam Preparation)

Q1: What is the difference between the id and class attributes in HTML?

An id must be unique within the entire HTML document; no two elements may share the same ID. A class can be assigned to multiple elements across the document. In CSS, an ID is targeted with a hash (#my-id), whereas a class is targeted with a period (.my-class).

Q2: What are Boolean attributes? How are they written in HTML5?

Boolean attributes represent binary true/false values. If the attribute is present on the tag, its value is true; if absent, its value is false. In HTML5, writing <input required> is equivalent to writing <input required="required">.

Q3: What is the purpose of the title attribute?

The title attribute provides supplementary advisory information about an element. In desktop web browsers, the content of the title attribute is displayed as a helpful tooltip when the user hovers their mouse pointer over the element.

Frequently Asked Questions (FAQ)

Can an element have more than one class attribute?

An element can have multiple class names, but they must all be written within a single class attribute separated by spaces (e.g., class="btn btn-primary active"). Writing multiple class="" attributes on the same tag is invalid HTML.

Where can I find the complete list of all HTML attributes?

We have compiled an exhaustive, alphabetical directory of every standard HTML attribute. Please visit our dedicated HTML Attributes Complete List guide.