Attributes in HTML
? Attributes in HTML – A Quick Guide
HTML Attributes are used to provide additional information about HTML elements. They are always written in the opening tag, and usually follow this format:
<tagname attribute="value">Content</tagname>? Types of HTML Attributes
1. Core/Common Attributes
These are widely used across many tags.
| Attribute | Description | Example |
|---|---|---|
id | Unique identifier | <div id="header"> |
class | CSS/JavaScript styling and behavior | <p class="highlight"> |
style | Inline CSS | <h1 style="color:blue;">Hello</h1> |
title | Tooltip text | <abbr title="World Health Organization">WHO</abbr> |
2. Link and Media Attributes
| Attribute | Used With | Description | Example |
|---|---|---|---|
href | <a>, <link> | URL for hyperlink or resource | <a href="page.html">Link</a> |
src | <img>, <script>, <iframe> | Source file location | <img src="img.jpg"> |
alt | <img> | Alternate text for image | <img src="logo.png" alt="Logo"> |
target | <a> | Where to open the link | <a href="..." target="_blank"> |
3. Form Attributes
| Attribute | Used With | Description | Example |
|---|---|---|---|
type | <input> | Type of input field | <input type="text"> |
name | <input>, <form> | Form key name | <input name="email"> |
value | <input> | Default value | <input value="John"> |
placeholder | <input> | Hint text | <input placeholder="Enter name"> |
required | <input> | Makes input mandatory | <input required> |
disabled | <input>, <button> | Disables the field | <button disabled>Click</button> |
readonly | <input> | Read-only field | <input readonly value="1234"> |
4. Boolean Attributes
Boolean attributes are either present or not — they don’t need a value.
? Examples:
<input type="checkbox" checked><input type="text" required><button disabled>Submit</button>5. Global Attributes
These can be used with almost all elements:
idclassstyletitlehiddenlangdir(e.g.,ltrorrtl)tabindexaccesskeydraggablecontenteditable
6. Custom Data Attributes
Use data-* to store custom data.
<div data-user-id="42" data-role="admin">User</div>Can be accessed via JavaScript:
element.dataset.userId // "42"element.dataset.role // "admin"? Example Using Multiple Attributes
<a href="https://example.com" target="_blank" title="Go to Example Site"> Visit Example</a><input type="email" name="userEmail" placeholder="Enter your email" required>Would you like a downloadable cheat sheet or an HTML practice file for this?
