HTML attributes provide additional information about an HTML element. They are written in the opening tag and allow developers to specify properties such as an element's identity, destination, source file, language, state, or other behavior.
For example, an anchor element uses the href attribute to specify where a link should lead, while an image uses src to identify the image resource and alt to provide a text alternative.
Attributes are an important part of everyday HTML development. They connect HTML elements with resources, CSS rules, JavaScript code, user input, accessibility information, and other parts of a website.
In this guide, we will understand how HTML attributes are written, how their values work, the difference between global and element-specific attributes, and how to use commonly required attributes correctly.
An HTML attribute is a property written inside an element's opening tag. It supplies information that is not represented by the element name alone.
An attribute normally has a name followed by an equals sign and a value. The value is commonly written inside quotation marks.
<a href="https://example.com">
Visit Website
</a>
Here, href is the attribute name and the URL is its value. The <a> element identifies the content as a hyperlink, while href tells the browser which resource the hyperlink points to.
Attributes are placed inside the opening tag, immediately after the element name or after another attribute.
<element attribute="value">
Content
</element>
<p class="intro">
Welcome to CSE Gyan.
</p>
In this example, class is the attribute name and intro is its value.
An element can contain more than one attribute when the attributes are appropriate for that element.
<img
src="student.jpg"
alt="Student studying computer science"
width="300"
>
The image element above contains three attributes: src, alt, and width.
Most HTML attributes are easier to understand when divided into two parts: the attribute name and its value.
| Part | Meaning |
|---|---|
| Attribute Name | Identifies the property being specified. |
| Attribute Value | Provides the particular value associated with that property. |
<img src="logo.png" alt="CSE Gyan Logo">
In this example:
Using quotation marks around attribute values is the normal and recommended style because it makes HTML easier to read and avoids ambiguity when values contain spaces or special characters.
<p class="course-description">
Learn HTML from basics.
</p>
Double quotation marks are commonly used in HTML. Single quotation marks can also be used when appropriate.
<p class='course-description'>
Learn HTML from basics.
</p>
For consistency, it is good practice to choose one quotation style and use it consistently throughout a project.
Global attributes are attributes defined by HTML that can be used on most HTML elements. They provide information or functionality that is not limited to one particular element type.
Some global attributes are used very frequently, while others are intended for particular situations.
| Attribute | Purpose |
|---|---|
| id | Identifies an element with a document-unique identifier. |
| class | Associates an element with one or more class names. |
| style | Contains CSS declarations directly on the element. |
| title | Provides advisory information about an element. |
| lang | Specifies the language of the element's content. |
| dir | Specifies text direction. |
| data-* | Stores custom data associated with an element. |
The id attribute gives an element a specific identifier. An id is intended to identify one particular element within an HTML document.
The value can be used by CSS, JavaScript, and fragment links to target that element.
<h2 id="sql-section">
SQL Tutorial
</h2>
<a href="#sql-section">
Go to SQL Tutorial
</a>
When the link is selected, the browser can navigate to the element whose id is sql-section.
An id should be unique within the document. If several elements need to share a common identifier for styling or scripting, the class attribute is generally more appropriate.
The class attribute assigns one or more class names to an element. The same class can be used by many elements.
Classes are commonly used as hooks for CSS styling and JavaScript operations.
<p class="note">
Practice SQL queries regularly.
</p>
<p class="note">
Review database concepts before the interview.
</p>
Both paragraphs belong to the note class, so a CSS rule can target both elements.
<div class="card featured">
HTML Course
</div>
The element above has two class names: card and featured.
The style attribute allows CSS declarations to be written directly on an HTML element. This technique is called inline CSS.
<p style="font-size: 20px;">
HTML Attributes
</p>
The declaration inside the style attribute applies only to that particular element.
Inline styles can be useful for a small, isolated change or for dynamically generated styles. For larger websites, keeping most presentation rules in CSS files or reusable classes usually makes the code easier to maintain.
The title attribute provides advisory information associated with an element. Browsers may show this information as a tooltip when a user points to the element.
<button title="Save your changes">
Save
</button>
The title value can provide additional context, but it should not be used as the only way to communicate important information because tooltip behavior varies between devices and browsers.
The lang attribute identifies the language used by the content of an element. It is especially useful when applied to the root <html> element.
<html lang="en">
Here, en identifies English content.
| Code | Language |
|---|---|
| en | English |
| hi | Hindi |
| fr | French |
| es | Spanish |
Correct language information can help browsers, search engines, translation tools, and assistive technologies interpret webpage content more accurately.
The dir attribute specifies the direction in which text should be displayed.
| Value | Meaning |
|---|---|
| ltr | Left-to-right text. |
| rtl | Right-to-left text. |
| auto | Allows the browser to determine the direction from the content. |
<p dir="rtl">
مرحبا
</p>
The attribute is useful when working with languages and content that require right-to-left presentation.
The data-* mechanism allows developers to attach custom data to an HTML element. The name must begin with data- followed by a custom name.
<button data-course-id="105">
View Course
</button>
Here, data-course-id stores custom information associated with the button.
const button = document.querySelector("button");
console.log(button.dataset.courseId);
Custom data attributes are useful when a webpage needs to associate small pieces of application-specific information with particular elements.
Boolean attributes represent an on/off state. Their presence generally means that the feature is enabled.
Unlike ordinary attributes, a boolean attribute does not need a value such as true or false.
<input type="text" required>
The presence of required indicates that the field must contain a value before the form can be submitted normally.
| Attribute | Common Use |
|---|---|
| required | Indicates that a form control is required. |
| disabled | Prevents interaction with a form control. |
| readonly | Prevents normal editing of an input's value. |
| checked | Indicates that a checkbox or radio button is initially selected. |
| multiple | Allows multiple values where supported. |
| autofocus | Requests initial focus for an eligible control. |
<input type="email" required> <input type="checkbox" checked>
For boolean attributes, writing the attribute itself is the important part. Values such as required="true" should not be used as a substitute for understanding boolean attribute behavior.
Some attributes have a particular meaning for specific HTML elements. These attributes should be used according to the element and feature they belong to.
| Attribute | Common Element | Purpose |
|---|---|---|
| href | <a> | Specifies the destination of a hyperlink. |
| src | <img>, <script>, <iframe> | Identifies an external resource. |
| alt | <img> | Provides alternative text for an image. |
| target | <a> | Controls the browsing context used for a link. |
| action | <form> | Specifies where submitted form data is sent. |
| method | <form> | Specifies the HTTP method used when submitting form data. |
| placeholder | <input>, <textarea> | Displays a temporary input hint. |
The href attribute specifies the destination of a hyperlink. It is most commonly associated with the <a> element.
<a href="https://example.com">
Visit Website
</a>
The browser uses the value of href to determine the resource that should be opened when the link is activated.
<a href="html-tags.php">
Learn HTML Tags
</a>
<a href="#contact">
Contact Us
</a>
A fragment link can move the user to an element that has the corresponding id.
The src attribute identifies the location of an external resource that an element needs to load.
<img
src="images/html-logo.png"
alt="HTML logo"
>
The browser uses the path in src to locate the image file.
The same concept appears in other elements, although the exact behavior depends on the element. For example, a script element can use src to load an external JavaScript file.
<script src="script.js"></script>
The alt attribute provides a text alternative for an image. It is particularly important for accessibility and should describe the image's purpose or meaningful content when appropriate.
<img
src="computer-lab.jpg"
alt="Students working in a computer laboratory"
>
If an image cannot be loaded, the alternative text can help communicate its intended information. Screen readers can also use the alternative text when presenting the image to users.
If an image is purely decorative and does not add information, an empty alt value is often appropriate.
<img src="border-design.png" alt="">
The correct alt text should describe the purpose of the image rather than simply repeating words such as "image" or "picture."
The target attribute specifies the browsing context in which a linked resource should be opened.
| Value | Meaning |
|---|---|
| _self | Opens the resource in the current browsing context. |
| _blank | Opens the resource in a new browsing context, commonly a new tab. |
| _parent | Uses the parent browsing context when applicable. |
| _top | Uses the top-level browsing context. |
<a
href="https://example.com"
target="_blank"
>
Open Website
</a>
When using target="_blank", consider the security and privacy implications of opening external content in a new browsing context. Modern browsers provide protections, and developers should still use appropriate link attributes and practices for their application.
The <input> element supports many attributes that determine the type of control, the information it accepts, and how users interact with it.
| Attribute | Purpose |
|---|---|
| type | Specifies the kind of input control. |
| name | Provides the name used when form data is submitted. |
| placeholder | Displays a temporary hint about expected input. |
| value | Specifies the control's value. |
| required | Marks the control as required for normal form validation. |
| readonly | Prevents normal editing while keeping the control usable for many purposes. |
| disabled | Disables the control. |
<input
type="email"
name="email"
placeholder="Enter your email"
required
>
The <form> element uses attributes that define how and where form information is submitted.
| Attribute | Purpose |
|---|---|
| action | Specifies the URL that processes the submitted form. |
| method | Specifies the HTTP method used for submission. |
| autocomplete | Controls whether the browser may provide autocomplete suggestions. |
| novalidate | Requests that the browser skip its built-in constraint validation during submission. |
<form action="submit.php" method="post">
<input
type="text"
name="student_name"
required
>
<button type="submit">
Submit
</button>
</form>
The form above sends its submitted data to submit.php using the POST method.
Tags and attributes work together, but they provide different kinds of information.
| HTML Tags | HTML Attributes |
|---|---|
| Define the type or structure of an HTML element. | Provide additional information about an element. |
| Written using angle brackets. | Written inside the opening tag. |
| Example: <img> | Example: src="photo.jpg" |
| Identify an HTML element. | Configure or describe that element. |
<img
src="photo.jpg"
alt="Student Photo"
>
Here, <img> identifies the element, while src and alt provide additional information about it.
The following example demonstrates how several attributes can work together in a small webpage section.
<section id="course-section" class="course-card">
<h2>
HTML Course
</h2>
<img
src="html-course.jpg"
alt="HTML course illustration"
width="300"
>
<p class="description">
Learn HTML fundamentals with practical examples.
</p>
<a
href="html-tags.php"
title="Learn about HTML Tags"
>
Learn HTML Tags
</a>
</section>
| Attribute | Used On | Purpose |
|---|---|---|
| id | section | Provides a unique identifier. |
| class | section and paragraph | Associates elements with CSS or JavaScript selectors. |
| src | image | Specifies the image resource. |
| alt | image | Provides alternative text. |
| width | image | Specifies the image width. |
| href | link | Specifies the link destination. |
| title | link | Provides additional advisory information. |
Beginners often make small syntax or usage mistakes while working with attributes. Some common problems are listed below.
Incorrect:
<img> src="photo.jpg"
Correct:
<img src="photo.jpg" alt="Photo">
Although HTML has some parsing rules that may allow unquoted values in limited situations, quotation marks are recommended because they make the markup clearer and safer to maintain.
An id is intended to identify an individual element within a document. Use classes when the same styling or behavior needs to apply to multiple elements.
Writing alt="image" provides little useful information. The alternative text should communicate the image's relevant purpose or content.
Large amounts of inline styling can make HTML difficult to maintain. Reusable CSS classes are generally a better approach for site-wide presentation.
Boolean attributes represent presence or absence. For example, use disabled rather than relying on a string such as disabled="false".
HTML attributes are part of the page markup, so values that come from users or external systems should be handled carefully by the application generating the HTML.
Developers should also avoid assuming that an HTML attribute automatically provides security. For example, form validation attributes such as required and type="email" can improve client-side validation, but server-side validation is still necessary when processing submitted data.
Similarly, attributes that affect links, resources, scripts, or embedded content should be selected according to the security and performance requirements of the application.
| Attribute | Typical Use |
|---|---|
| id | Unique element identification. |
| class | Reusable CSS or JavaScript selection. |
| style | Inline CSS declarations. |
| title | Additional advisory information. |
| lang | Content language. |
| dir | Text direction. |
| data-* | Custom element data. |
| href | Hyperlink destination. |
| src | External resource location. |
| alt | Alternative image text. |
| target | Link browsing context. |
| required | Required form control. |
| disabled | Disabled form control. |
| placeholder | Input hint. |
| name | Form control name. |
| action | Form submission destination. |
| method | Form submission method. |
An HTML attribute is additional information written inside an element's opening tag. It can describe, configure, identify, or provide functionality for that element.
Attributes are written inside the opening tag of an HTML element.
<a href="index.php">
Home
</a>
Yes. An element can have multiple attributes when those attributes are valid and useful for that element.
<img
src="logo.png"
alt="Website Logo"
width="200"
>
An id identifies a particular element within a document, whereas a class can be shared by multiple elements.
Global attributes are HTML attributes that can be used on most HTML elements. Examples include id, class, lang, and title.
A boolean attribute represents an enabled or disabled state through its presence or absence. Examples include required, disabled, and checked.
The alt attribute provides a text alternative for an image and can make image information more accessible to users who cannot see the image.
Yes. CSS can select elements using attributes such as class and id, while JavaScript can read or modify many attributes through the DOM.
HTML attributes extend HTML elements by supplying additional information or configuration. They are written inside opening tags and commonly consist of an attribute name and value.
Some attributes, such as id, class, lang, and data-*, are broadly applicable. Others, including href, src, alt, and form-related attributes, are associated with particular elements and features.
A good HTML developer does more than memorize attribute names. The important skill is understanding what information an attribute represents, when it should be used, and how it affects accessibility, maintainability, and browser behavior.
HTML attributes are an essential part of writing useful and meaningful HTML. They allow developers to identify elements, connect resources, create links, describe images, configure forms, store custom data, and communicate additional information to browsers and assistive technologies.
Learning attributes becomes much easier when they are studied according to their purpose instead of memorizing a long list. Start with commonly used attributes such as id, class, href, src, and alt, then gradually move to form attributes, boolean attributes, and custom data attributes.