HTML attributes provide additional information about elements in an HTML document. They are always defined in the opening tag of an element and usually consist of a name-value pair (e.g., name="value"). Here's an overview of HTML attributes:
Basic Syntax
<tagname attribute="value">Content</tagname>
Common HTML Attributes
1. Global Attributes
These attributes can be applied to almost any HTML element:
class: Specifies one or more class names for the element (used for CSS or JavaScript).<div class="container"></div>id: Defines a unique identifier for the element.<h1 id="main-heading">Hello</h1>style: Inline CSS styles for the element.<p style="color: red;">This is red text.</p>title: Provides additional information, typically displayed as a tooltip on hover.<button title="Click me">Hover me</button>lang: Specifies the language of the element's content.<html lang="en"></html>data-*: Custom data attributes for JavaScript.<div data-user-id="12345"></div>
2. Event Attributes
These are used to handle events such as clicks, hovers, and more:
onclick: Executes JavaScript when an element is clicked.<button onclick="alert('Button clicked!')">Click Me</button>onmouseover: Executes JavaScript when the mouse hovers over an element.<div onmouseover="console.log('Mouse over')">Hover here</div>
3. Input-Specific Attributes
Attributes commonly used with <input> elements:
type: Specifies the type of input (e.g., text, password, email).<input type="text" />placeholder: Displays placeholder text inside the input.<input placeholder="Enter your name" />value: Sets the default value of the input.<input value="Default Value" />required: Makes the input mandatory.<input type="email" required />
4. Link and Media Attributes
For <a> and <img> elements:
href: Specifies the URL of a link.<a href="https://example.com">Visit Example</a>target: Specifies where to open the link.<a href="https://example.com" target="_blank">Open in new tab</a>src: Specifies the source of an image or script.<img src="image.jpg" alt="Description" />alt: Provides alternative text for an image.<img src="image.jpg" alt="A beautiful scenery" />
5. Table Attributes
For table elements like <table>, <th>, and <td>:
colspan: Merges columns in a table.<td colspan="2">Merged Column</td>rowspan: Merges rows in a table.<td rowspan="2">Merged Row</td>
6. Boolean Attributes
These attributes don’t need a value; their presence implies true:
checked: Preselects a checkbox or radio button.<input type="checkbox" checked />disabled: Disables an element.<button disabled>Can't Click Me</button>readonly: Makes an input field read-only.<input type="text" value="Read-only" readonly />
This is just a summary of the most commonly used HTML attributes. If you'd like, I can provide more examples or elaborate on specific ones!
No comments:
Post a Comment