0% completed
In this lesson, we will explore the most commonly used HTML attributes and their purposes. Below is a reference table containing common HTML attributes, their descriptions, and examples to help you understand their usage.
| Attribute | Description | Example |
|---|---|---|
id | Specifies a unique identifier for an element. | <div id="main-container">This is a container</div> |
class | Specifies one or more class names for an element, used for styling. | <p class="highlight">This is a paragraph</p> |
style | Adds inline CSS to an element. | <div style="color: red; background-color: yellow;">Styled Content</div> |
title | Adds a tooltip text that appears when the user hovers over the element. | <span title="Tooltip text">Hover over me</span> |
src | Specifies the URL of the source for an image, video, or iframe. | <img src="logo.png" alt="DesignGurus Logo" /> |
alt | Provides alternative text for an image if it cannot be displayed. | <img src="image.jpg" alt="Alternative Text" /> |
href | Specifies the URL of the page the link goes to. | <a href="https://designgurus.io">Visit DesignGurus</a> |
target | Specifies where to open the linked document (_self, _blank, etc.). | <a href="https://designgurus.io" target="_blank">Open in New Tab</a> |
type | Specifies the type of input element (e.g., text, password, checkbox). | <input type="text" name="username" /> |
value | Specifies the initial value of an input field. | <input type="text" value="Default Text" /> |
name | Specifies the name of an input element for form data submission. | <input type="text" name="username" /> |
placeholder | Provides a short hint describing the expected value in an input field. | <input type="text" placeholder="Enter your name" /> |
maxlength | Specifies the maximum number of characters allowed in an input field. | <input type="text" maxlength="20" /> |
checked | Specifies that an input element (checkbox or radio) should be preselected. | <input type="checkbox" checked /> |
readonly | Specifies that an input field is read-only. | <input type="text" value="Read-only text" readonly /> |
disabled | Disables an input element, making it unclickable. | <button disabled>Click Me</button> |
required | Specifies that an input field must be filled out before submitting a form. | <input type="text" required /> |
min and max | Specifies the minimum and maximum values for numeric input fields. | <input type="number" min="1" max="10" /> |
step | Specifies the interval for numeric input fields. | <input type="number" step="2" /> |
cols and rows | Specifies the visible width and height of a <textarea> element. | <textarea cols="30" rows="5">Default Text</textarea> |
multiple | Allows multiple values to be selected in a drop-down list or file input. | <select multiple><option>Option 1</option></select> |
autofocus | Specifies that an input field should automatically focus when the page loads. | <input type="text" autofocus /> |
action | Specifies the URL to send form data when a form is submitted. | <form action="/submit-form"><input type="text" /></form> |
method | Specifies the HTTP method to use when submitting form data (GET or POST). | <form method="POST"><input type="text" /></form> |
for | Specifies which form element a <label> is bound to. | <label for="username">User Name:</label><input type="text" id="username" /> |
srcset | Specifies multiple image resources for responsive images. | <img src="small.jpg" srcset="large.jpg 1024w" alt="Responsive Image" /> |
alt | Provides alternative text for an image. | <img src="logo.png" alt="Company Logo" /> |
lang | Specifies the language of the document or element. | <html lang="en"> |
charset | Specifies the character encoding for the document. | <meta charset="UTF-8" /> |
content | Provides metadata values for the <meta> element. | <meta name="description" content="Learn HTML with DesignGurus"> |
rel | Specifies the relationship between the current document and linked resource. | <link rel="stylesheet" href="style.css" /> |
async | Loads a script asynchronously. | <script src="script.js" async></script> |
defer | Defers loading of a script until after the HTML document has been parsed. | <script src="script.js" defer></script> |
controls | Adds play, pause, and volume controls to media elements. | <audio controls><source src="audio.mp3" type="audio/mpeg"></audio> |
loop | Specifies that the media should start over again when it is finished. | <video src="video.mp4" loop></video> |
autoplay | Specifies that the media should start playing as soon as it is ready. | <audio src="song.mp3" autoplay></audio> |
muted | Specifies that the media should be muted by default. | <video src="video.mp4" muted></video> |
draggable | Specifies whether an element is draggable or not. | <div draggable="true">Drag Me</div> |
.....
.....
.....