HTML Attributes
Learn how to add properties and behavior to HTML elements
🎯 What are HTML Attributes?
HTML attributes provide additional information about HTML elements. They are always specified in the start tag and come in name/value pairs.
<!-- Basic attribute syntax -->
<tag attribute="value">Content</tag>
<!-- Example with multiple attributes -->
<img src="image.jpg" alt="Description" width="300">
Common HTML Attributes
id
Unique identifier for an element
<div id="header">Header</div>class
CSS class name for styling
<p class="highlight">Text</p>style
Inline CSS styling
<h1 style="color: blue;">Blue</h1>title
Tooltip text on hover
<p title="More info">Hover me</p>🔹 Link Attributes
Attributes specific to anchor tags and links:
<!-- Basic link -->
<a href="https://example.com">Visit Example</a>
<!-- Link with target -->
<a href="page.html" target="_blank">Open in new tab</a>
<!-- Link with download -->
<a href="file.pdf" download>Download PDF</a>
<!-- Email link -->
<a href="mailto:[email protected]">Send Email</a>🔹 Image Attributes
Essential attributes for image elements:
<!-- Basic image -->
<img src="photo.jpg" alt="A beautiful sunset">
<!-- Image with dimensions -->
<img src="logo.png" alt="Company logo" width="200" height="100">
<!-- Responsive image -->
<img src="banner.jpg" alt="Banner" style="max-width: 100%;">Output:
Photo
Logo
Banner
🔹 Form Attributes
Attributes for form elements and input controls:
<!-- Form with action -->
<form action="/submit" method="post">
<!-- Text input -->
<input type="text" name="username" placeholder="Enter username" required>
<!-- Password input -->
<input type="password" name="password" minlength="8">
<!-- Submit button -->
<input type="submit" value="Login">
</form>