HTML attributes are special words used inside the opening tag of an HTML element to control the element's behavior or provide additional information about the element. Here’s a list of commonly used HTML attributes along with examples and explanations:
1. class
- Description: Specifies one or more class names for an element (used for CSS and JavaScript).
Example:
<p class="intro">This is an introductory paragraph.</p>
Explanation: The `class` attribute is used to assign a CSS class to the element. Multiple classes can be separated by spaces.
2. id
Description: Specifies a unique id for an element.
Example:
<div id="header">This is the header</div>
Explanation: The `id` attribute assigns a unique identifier to an element, which can be used for styling, scripting, or navigation.
3. style
Description: Specifies an inline CSS style for an element.
Example:
<h1 style="color:blue;">This is a blue heading</h1>
Explanation: The `style` attribute allows you to apply CSS rules directly to an element.
4. title
Description: Specifies extra information about an element (displayed as a tooltip).
Example:
<abbr title="Hypertext Markup Language">HTML</abbr>
Explanation: The `title` attribute provides additional information about an element, often displayed as a tooltip when the mouse hovers over the element.
5. src
Description: Specifies the URL of an external resource (e.g., images).
Example:
<img src="image.jpg" alt="Sample Image">
Explanation: The `src` attribute defines the path to the image file.
6. href
Description: Specifies the URL of a linked document.
Example:
<a href="https://www.example.com">Visit Example.com</a>
Explanation: The `href` attribute defines the destination URL for an anchor tag.
7. alt
Description: Specifies alternative text for an image.
Example:
<img src="image.jpg" alt="Description of the image">
Explanation: The `alt` attribute provides alternative text for an image if it cannot be displayed.
8.type
Description: Specifies the type of an element.
Example:
<button type="button">Click Me!</button>
Explanation: The `type` attribute is used to define the type of an element, commonly used with form inputs and buttons.
9. value
Description: Specifies the initial value of an input element.
Example:
<input type="text" value="Default Text">
Explanation: The `value` attribute defines the initial value of an input field.
10. name
Description: Specifies the name of an element.
Example:
<input type="text" name="username">
Explanation: The `name` attribute is used to reference form data after a form is submitted.
11. placeholder
Description: Specifies a short hint that describes the expected value of an input field.
Example:
<input type="text" placeholder="Enter your name">
Explanation: The `placeholder` attribute provides a hint to the user of what can be entered in the field.
12. disabled
Description: Specifies that an input element should be disabled.
Example:
<input type="text" disabled>
Explanation: The `disabled` attribute prevents the user from interacting with the input element.
13. readonly
Description: Specifies that an input field is read-only.
Example:
<input type="text" value="Read only text" readonly>
Explanation: The `readonly` attribute makes the input field unmodifiable by the user but still allows them to copy its content.
14. maxlength
Description: Specifies the maximum number of characters allowed in an input field.
Example:
<input type="text" maxlength="10">
Explanation: The `maxlength` attribute limits the number of characters the user can enter in the input field.
15. required
Description: Specifies that an input field must be filled out before submitting the form.
Example:
<input type="text" required>
Explanation: The `required` attribute makes the input field mandatory to fill out.
16. checked
Description: Specifies that an input element (checkbox or radio button) should be pre-selected.
Example:
<input type="checkbox" checked>
Explanation: The `checked` attribute pre-selects the checkbox or radio button.
17. action
Description: Specifies where to send the form-data when a form is submitted.
Example:
<form action="/submit_form">
Explanation: The `action` attribute defines the URL to which the form data will be sent upon submission.
18. method
Description: Specifies the HTTP method to use when sending form-data.
Example:
<form action="/submit_form" method="post">
Explanation: The `method` attribute determines how the form data is sent (e.g., "get" or "post").
19. target
Description: Specifies where to open the linked document.
Example:
<a href="https://www.example.com" target="_blank">Open in new tab</a>
Explanation: The `target` attribute specifies where to display the linked URL (e.g., `_blank` to open in a new tab).
20. rel
Description: Specifies the relationship between the current document and the linked document.
- Example:
<link rel="stylesheet" href="styles.css">
Explanation: The `rel` attribute defines the relationship between the current document and the external resource.
These are some of the most commonly used HTML attributes. Each attribute adds specific functionality or additional information to the HTML elements, enhancing the capabilities and interactivity of a webpage.