HTML Attributes
🔍 What Are HTML Attributes?
HTML attributes provide additional information about elements. They are always included in the opening tag and are written as name="value" pairs.
>>“Attributes bring elements to life by giving them identity, style, and behavior.” 🌟
⚙️ Basic Syntax
An attribute is placed inside the opening tag of an HTML element:
Attribute Syntax
<elementName attributeName="attributeValue">Content</elementName>For example:
Example
<a href="https://example.com">Visit Site</a>Note
💡 An element can have multiple attributes, separated by spaces.
📋 Common HTML Attributes
| Attribute | Used In | Description |
|---|---|---|
| href | <a> | Specifies the URL of a link |
| src | <img> | Specifies the path to an image |
| alt | <img> | Alternative text for an image |
| title | Any element | Gives extra information as a tooltip |
| id | Any element | Defines a unique identifier |
| class | Any element | Assigns a class name (used for CSS/JS) |
🧪 Example: Attributes in Action
HTML Attributes Example
<img src="logo.png" alt="Company Logo" title="Our Brand" />
<a href="https://example.com" target="_blank" rel="noopener">Visit Us</a>
<p id="intro" class="highlight">Welcome to our site!</p>🔐 Special Attributes
- target="_blank" – Opens the link in a new tab
- rel="noopener noreferrer" – Improves security for external links
- disabled – Disables form elements
- readonly – Makes input fields non-editable
- required – Marks form fields as mandatory
Note
🧠 Some attributes are boolean attributes, meaning they don’t require a value. Example: <input disabled>
🧼 Best Practices
- ✅ Use double quotes around attribute values
- 🧾 Keep attribute names lowercase (HTML is not case-sensitive but best practices matter)
- 🛠 Use semantic attributes like alt and title for accessibility
📚 Learn More
>>“Attributes turn plain elements into powerful tools.” 🔧