HTML - Attributes List

HTML attributes provide additional configuration and properties for HTML elements. Below is an exhaustive, alphabetical A to Z reference directory of standard HTML and modern HTML5 attributes, along with their associated tags and functional descriptions.

Attribute	Associated Tag(s)	Description & Standard Usage
accept	`<form>`, `<input type="file">`	Specifies accepted MIME types or file extensions (e.g., `accept="image/*,.pdf"`).
accept-charset	`<form>`	Defines the character encoding standard for submitted form data (usually `UTF-8`).
accesskey	Global Attribute	Defines a keyboard shortcut key to activate or focus an element.
action	`<form>`	The target URL/script where form data is sent upon submission.
align	Legacy (`<img>`, `<p>`, `<table>`)	Deprecated in HTML5. Use CSS `text-align` or `float` instead.
alt	`<img>`, `<area>`, `<input type="image">`	Alternative text for accessibility (screen readers) and SEO ranking when images cannot render.
async	`<script>`	Downloads and executes the script asynchronously while HTML parsing continues.
autocomplete	`<form>`, `<input>`, `<textarea>`	Enables/disables browser auto-completion of form fields (`on` or `off`).
autofocus	`<input>`, `<button>`, `<select>`, `<textarea>`	Automatically focuses the specified input element when the webpage loads.
autoplay	`<audio>`, `<video>`	Plays the media file automatically as soon as it is buffered.
charset	`<meta>`, `<script>`	Specifies the character encoding for the HTML document (e.g., `<meta charset="UTF-8">`).
checked	`<input type="checkbox">`, `<input type="radio">`	Boolean attribute indicating the input element is pre-selected upon page load.
class	Global Attribute	Assigns one or more class names to an element for CSS styling and DOM selection.
cols	`<textarea>`	Defines the visible width (character count) of a multi-line text input.
colspan	`<td>`, `<th>`	Specifies the number of horizontal table columns a single cell spans.
content	`<meta>`	Supplies the text value associated with `http-equiv` or `name` meta directives.
controls	`<audio>`, `<video>`	Displays native browser media playback controls (play, pause, volume, timeline).
data-*	Global Attribute	Custom data attributes allowing developers to store arbitrary data in the DOM for JavaScript.
defer	`<script>`	Defers script execution until HTML parsing has completely finished.
disabled	`<button>`, `<input>`, `<select>`, `<textarea>`	Disables the input control, preventing user interactions and form submission.
download	`<a>`, `<area>`	Instructs the browser to download the target URL file rather than navigating to it.
enctype	`<form>`	Encoding type for form data. Use `multipart/form-data` when uploading files.
for	`<label>`, `<output>`	Binds a label to an input element via matching `id`, improving accessibility and click target area.
href	`<a>`, `<area>`, `<base>`, `<link>`	The destination hyperlink URL or linked external stylesheet resource.
id	Global Attribute	Specifies a unique document-wide identifier for an element.
loading	`<img>`, `<iframe>`	Controls lazy loading (`loading="lazy"`) to defer loading off-screen media, accelerating page speed.
max / min	`<input type="number\|date\|range">`	Specifies maximum and minimum acceptable numeric or date values.
maxlength	`<input>`, `<textarea>`	Restricts the maximum number of characters permitted in an input control.
method	`<form>`	HTTP method used when submitting form data (`GET` or `POST`).
multiple	`<input type="file\|email">`, `<select>`	Allows the user to select multiple files or enter multiple comma-separated values.
name	`<button>`, `<form>`, `<input>`, `<select>`, `<textarea>`	Specifies the field name sent to the server during form submissions.
pattern	`<input>`	Specifies a regular expression (regex) that input value must match to be valid.
placeholder	`<input>`, `<textarea>`	Short descriptive hint displayed inside an empty input control before entry.
readonly	`<input>`, `<textarea>`	Makes the input control immutable by the user while still submitting its value to the server.
rel	`<a>`, `<area>`, `<link>`	Relationship of the target resource (e.g., `stylesheet`, `nofollow`, `noopener`).
required	`<input>`, `<select>`, `<textarea>`	Mandates that the user fill out the field before submitting the form.
rowspan	`<td>`, `<th>`	Specifies the number of vertical table rows a single cell spans.
src	`<audio>`, `<embed>`, `<iframe>`, `<img>`, `<script>`, `<video>`	Source URL or local file path of the external resource to embed.
target	`<a>`, `<area>`, `<base>`, `<form>`	Specifies where to display the linked response (e.g., `_blank` for new tab).
title	Global Attribute	Advisory tooltip text shown on desktop mouse hover.
type	`<button>`, `<input>`, `<link>`, `<script>`	Defines the specific type of control or media MIME type.
value	`<button>`, `<input>`, `<option>`, `<param>`	Specifies the initial default or submitted value of an element.

Hands-on Practice Session for Students

Lab Assignment 5: Build a Registration Form Using Modern HTML5 Validation Attributes.

Problem Statement: Create an HTML form with fields for Full Name, Email, Password, and Mobile Number using attributes such as required, placeholder, minlength, pattern, and autofocus.

Solution Code:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student Form - Attributes Practice</title>
</head>
<body>
    <h2>BCA Student Online Portal Registration</h2>
    <form action="submit.php" method="POST" autocomplete="on">
        <label for="username">Full Name:</label><br>
        <input type="text" id="username" name="fullname" placeholder="Amit Sharma" required autofocus><br><br>

        <label for="email">Email Address:</label><br>
        <input type="email" id="email" name="useremail" placeholder="amit@example.com" required><br><br>

        <label for="phone">Mobile (10 digits):</label><br>
        <input type="tel" id="phone" name="usertel" pattern="[0-9]{10}" placeholder="9876543210" required><br><br>

        <button type="submit">Submit Application</button>
    </form>
</body>
</html>

Viva & University Exam Questions (BCA Exam Preparation)

Q1: What is the difference between defer and async script loading attributes?

Both load external scripts in the background without blocking HTML parsing. However, async executes the script immediately when downloaded (interrupting parsing if not done), whereas defer guarantees scripts execute in document order only after HTML parsing is completely finished.

Q2: What is the purpose of the loading="lazy" attribute?

The loading="lazy" attribute instructs browsers to defer downloading images and iframes until they are close to entering the visual viewport. This dramatically speeds up page loading and reduces mobile data consumption.

Q3: What is the difference between readonly and disabled attributes?

A readonly field cannot be modified by the user, but its value is still submitted with the form. A disabled field cannot be modified, does not receive focus, and its value is not submitted with the form data.

Frequently Asked Questions (FAQ)

Are legacy attributes like bgcolor and border still valid in HTML5?

While web browsers retain backwards compatibility to render legacy attributes like bgcolor and border, they are officially obsolete in HTML5. Modern web standards require separating content from presentation by using CSS properties (background-color, border).

Can I create my own custom attribute names in HTML5?

Yes, but you must prefix them with data- (e.g., data-college-id="2026"). This ensures strict HTML5 validation compliance and allows JavaScript to easily read them using the dataset property.