Khusboo Tayal
In HTML, attributes provide additional information about an element. They define properties, behavior, or settings of HTML tags and are always specified in the opening tag.
<tagname attribute="value">Content</tagname>
| Attribute | Description | Example |
|---|---|---|
| id | Uniquely identifies an element | <p id="intro"> |
| class | Assigns a class name to one or more elements | <div class="container"> |
| style | Adds inline CSS styling | <h1 style="color:blue;"> |
| title | Provides tooltip text on hover | <img title="Logo"> |
| href | Specifies the URL in anchor tags | <a href="https://example.com"> |
| src | Specifies the source path for images/videos/audio | <img src="image.jpg"> |
| alt | Alternative text for images | <img alt="My Photo"> |
| width, height | Specifies dimensions of elements | <img width="300" height="200"> |
| target | Specifies where to open linked documents | <a href="#" target="_blank"> |
| value | Specifies the initial value of input elements | <input value="Name"> |
| disabled | Disables a form field | <button disabled> |
| readonly | Makes an input field read-only | <input readonly> |
| placeholder | Adds placeholder text to input fields | <input placeholder="Your name"> |
1. href and target in <a> Tag
<a href="https://www.google.com" target="_blank">Visit Google</a>
Explanation: Opens Google in a new tab.
2. src and alt in <img> Tag
<img src="photo.jpg" alt="My Profile Picture">
Explanation: Displays an image with fallback text if it doesn't load.
3. style for Inline CSS
<h2 style="color: green; font-size: 20px;">Hello World</h2>
Explanation: Changes the text color and size directly in HTML.
4. id and class Attributes
<div id="main-section" class="wrapper"></div>
Explanation: Used for styling or scripting with CSS and JavaScript.
These attributes can be used with any HTML element:
| Attribute | Description |
|---|---|
| id | Unique identifier |
| class | Class name for grouping elements |
| style | Inline CSS styling |
| title | Tooltip text |
| hidden | Hides the element from view |
| tabindex | Defines keyboard navigation order |
Learn how to use AI to build, market and grow your business. Subscribe our newsletter to get AI tips, tools and prompts in your inbox to power your marketing, sales and business.
Tags- #htmlattributes #learnhtml #htmlbasics #webdevelopment #htmltags #htmltutorial #seo #beginnerhtml
