HTML Attributes provide additional information about an element. They are always specified in the opening tag and usually come in name/value pairs like
name="value". Essential HTML Attributes
Attributes can be categorized into Global Attributes (which can be used on almost any tag) and Element-Specific Attributes.
1. Global Attributes
These are the most common attributes you will use to identify or style your elements.
-
id: Provides a unique identifier for an element. No two elements on the same page should have the sameid. It’s often used for linking to specific sections or targeting with JavaScript. -
class: Used to group multiple elements together. Unlikeid, many elements can share the sameclass. This is primarily used for CSS styling. -
title: Adds extra information that appears as a "tooltip" when a user hovers their mouse over the element. -
style: Used to add "Inline CSS" directly to an element (e.g.,style="color: red;").
<p id="abc">Lorem Ipsum is a dummy text.</p>
<p class="pqr">Lorem Ipsum is a dummy text.</p>
<p title="xyz">Lorem Ipsum is a dummy text.</p>
<p style="color:red">Lorem Ipsum is a dummy text.</p>
2. Element-Specific Attributes
Some tags require specific attributes to function at all.
-
href(Anchor tag): Specifies the URL the link goes to. -
src(Image/Script tag): Specifies the path to the image or file. -
alt(Image tag): Provides "alternative text." If the image fails to load, this text is displayed. It is also vital for screen readers (Accessibility). -
widthandheight: Defines the size of images or videos in pixels.
<a href="https://example.com">Visit Site</a>
<img decoding="async" src="photo.jpg">
<img decoding="async" src="photo.jpg" alt="A beautiful sunset">
<img loading="lazy" decoding="async" src="photo.jpg" alt="A beautiful sunset" width="500" height="400">
The Syntax Rules
To avoid errors, follow these three golden rules for attributes:
-
Always in the Opening Tag: Never put an attribute in the closing tag
</p>. -
Lowercase is Best: While HTML is not case-sensitive, the industry standard is to write attribute names in lowercase (e.g.,
class, notCLASS). -
Quote Your Values: Always wrap your values in double quotes (
""). -
Duplicate IDs: Never use the same
idtwice on one page. Useclassinstead if you need to repeat properties.
Attribute Comparison Table
| Attribute | Category | Description |
|---|---|---|
id | Global | Unique identifier for targeting with JS/CSS. |
class | Global | Group identifier for shared styling. |
href | Link | Specifies the link destination. |
src | Media | Specifies the source file (image/video/script). |
alt | Media | Text description for screen readers/broken images. |
hidden | Global | Hides the element from view. |
data-* | Custom | Allows you to store your own private data (e.g., data-user-id="123"). |
Quick Summary Table
| Attribute | Used In | Purpose |
|---|---|---|
href | <a> | The destination URL of a link. |
src | <img>, <script> | The source path of a file. |
alt | <img> | Descriptive text for accessibility. |
target | <a> | _blank opens a link in a new tab. |
placeholder | <input> | Temporary hint text inside a form field. |
value | <input> | The actual data stored in a form field. |