HTML attributes provide additional information about HTML elements. They help define properties such as appearance, behavior, and functionality. Attributes always appear within the opening tag of an element and follow the format:

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

Below is a well-explained guide to all the important HTML attributes, categorized based on their usage.

1. Global Attributes

Global attributes can be used with all HTML elements.

a) id

• Defines a unique identifier for an element.
• Used in CSS and JavaScript to target specific elements.

<p id="intro">This is an introduction.</p>

b) class

• Assigns one or more class names to an element.
• Used in CSS and JavaScript for styling and functionality.

<p class="highlight">This paragraph has a highlight.</p>

c) style

• Adds inline CSS styling.

<p style="color: red; font-size: 18px;">This text is red.</p>

d) title

• Provides additional information as a tooltip.

<p title="Hello!">Hover over this text.</p>

e) data-

• Custom attributes used to store extra data for JavaScript.

<button data-product-id="123">Add to Cart</button>

f) lang

• Specifies the language of an element.

<p lang="en">This is in English.</p>

g) dir

• Defines text direction (ltr for left-to-right, rtl for right-to-left).

<p dir="rtl">مرحبا بالعالم</p>

2. Attributes for Links (<a> Tag)

a) href

• Specifies the URL of the linked page.

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

b) target

• Defines where to open the link.
  • _self (default) → opens in the same tab.
  • _blank → opens in a new tab.
  • _parent → opens in the parent frame.
  • _top → opens in the full body of the window.

<a href="https://example.com" target="_blank">Open in new tab</a>

c) rel

• Defines the relationship between the linked document and the current page.

<a href="https://example.com" rel="nofollow">No Follow Link</a>

d) download

• Enables file download when clicking the link.

<a href="file.pdf" download="myfile.pdf">Download PDF</a>

3. Attributes for Images (<img> Tag)

a) src

• Specifies the image source.

<img src="image.jpg" alt="Description of image">

b) alt

• Provides alternative text for accessibility.

<img src="logo.png" alt="Company Logo">

c) width & height

• Defines the dimensions of an image.

<img src="photo.jpg" width="300" height="200">

d) loading

• Specifies how images are loaded (lazy for deferred loading).

<img src="large-image.jpg" loading="lazy">

4. Attributes for Forms (<form>, <input>, <textarea>, <select> Tags)

a) action

• Defines the URL where form data is sent.

<form action="submit.php">

b) method

• Specifies how form data is sent.
  • GET → Data is sent in the URL.
  • POST → Data is sent securely in the request body.

<form action="submit.php" method="post">

c) placeholder

• Provides a hint inside input fields.

<input type="text" placeholder="Enter your name">

d) value

• Sets a predefined value for an input field.

<input type="text" value="John Doe">

e) required

• Makes an input field mandatory.

<input type="email" required>

f) readonly

• Prevents input modification.

<input type="text" value="Fixed Value" readonly>

g) disabled

• Disables an input field.

<input type="text" disabled>

h) maxlength & minlength

• Sets character limits.

<input type="text" maxlength="10" minlength="3">

i) pattern

• Specifies a regular expression for input validation.

<input type="text" pattern="[A-Za-z]+">

j) multiple

• Allows multiple file or email selections.

<input type="file" multiple>

5. Table Attributes (<table>, <th>, <td> Tags)

a) border

• Defines table border width.

<table border="1">

b) colspan

• Merges multiple columns.

<td colspan="2">Merged Columns</td>

c) rowspan

• Merges multiple rows.

<td rowspan="2">Merged Rows</td>

6. Audio & Video Attributes (<audio>, <video> Tags)

a) src

• Specifies the media file.

<audio src="music.mp3" controls></audio>

b) controls

• Displays playback controls.

<video src="movie.mp4" controls></video>

c) autoplay

• Starts playback automatically.

<video src="clip.mp4" autoplay></video>

d) loop

• Repeats playback.

<video src="loop.mp4" loop></video>

e) muted

• Starts muted.

<video src="silent.mp4" muted></video>

7. Button Attributes (<button> Tag)

a) type

• Specifies button behavior.
  • submit → Submits form.
  • reset → Resets form.
  • button → Regular button.

<button type="submit">Submit</button>

b) disabled

• Disables the button.

<button disabled>Cannot Click</button>

8. Accessibility Attributes (ARIA Attributes)

a) aria-label

• Provides a label for assistive technologies.

<button aria-label="Close">X</button>

b) role

• Defines the role of an element.

<div role="alert">Warning Message</div>

9. JavaScript-Specific Attributes

a) onclick

• Executes JavaScript on click.

<button onclick="alert('Hello!')">Click Me</button>

b) onmouseover

• Triggers when the mouse hovers.

<p onmouseover="this.style.color='blue'">Hover to change color.</p>

HTML attributes enhance elements by adding interactivity, styling, and functionality. Understanding these attributes allows developers to build efficient, accessible, and user-friendly websites.