HTML Attributes

HTML attributes provide additional information about elements, helping to modify their behavior, appearance, or functionality. Attributes are always included in the opening tag of an element and consist of a name-value pair.

Basic Structure

<tagname attribute="value">Content</tagname>

Try It Now

Example:

<a href="https://example.com">Visit Example</a>

Try It Now

Here:

a is the tag.
href is the attribute name.
"https://example.com" is the value.

Common Attributes

id
- Specifies a unique identifier for an element.
- Example:
```
<h1 id="main-title">Welcome</h1>
```
  Try It Now
class
- Used to group elements for styling or scripting purposes.
- Example:
```
<p class="highlight">This is a highlighted paragraph.</p>
```
  Try It Now

style

Adds inline CSS to an element.

Example:

<p style="color: blue; font-size: 16px;">Styled text</p>

Try It Now

title
- Provides additional information as a tooltip.
- Example:
```
<abbr title="HyperText Markup Language">HTML</abbr>
```
  Try It Now
src
- Specifies the source file for images, videos, or audio.
- Example:
```
<img src="image.jpg" alt="Example Image">
```
  Try It Now
alt
- Provides alternative text for images (important for accessibility and SEO).
- Example:
```
<img src="logo.png" alt="Company Logo">
```
  Try It Now
href
- Specifies the URL of a link.
- Example:
```
<a href="https://example.com">Visit Example</a>
```
  Try It Now
target
- Defines how a link opens.
- Common values:
  - _self (default): Opens in the same tab.
  - _blank: Opens in a new tab.
- Example:
```
<a href="https://example.com" target="_blank">Open in New Tab</a>
```
  Try It Now
type
- Specifies the type of input or button.
- Example:
```
<input type="text" placeholder="Enter your name">
```
  Try It Now
placeholder
- Displays a short hint in input fields.
- Example:
```
<input type="email" placeholder="Enter your email">
```
  Try It Now
disabled
- Disables an element.
- Example:
```
<button disabled>Click Me</button>
```
  Try It Now
readonly
- Makes an input field read-only.
- Example:
```
<input type="text" value="Read-only text" readonly>
```
  Try It Now
name
- Specifies a name for form elements.
- Example:
```
<input type="text" name="username">
```
  Try It Now
value
- Predefines the value of an input field.
- Example:
```
<input type="text" value="John Doe">
```
  Try It Now
lang
- Defines the language of the content.
- Example:
```
<html lang="en">
```
  Try It Now

Global Attributes

Global attributes can be used on almost any HTML element. Examples include:

id
class
style
title
lang

Practical Example

Here’s a practical example using multiple attributes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Attributes Example</title>
</head>
<body>
  <h1 id="main-title" class="highlight" style="text-align: center;">Welcome to HTML Attributes</h1>
  
  <p title="This is a tooltip" style="color: green;">
    Hover over this text to see a tooltip.
  </p>
  
  <a href="https://example.com" target="_blank" class="btn-link">Visit Example</a>
  
  <img src="example.jpg" alt="Example Image" style="width: 100px; height: auto;">
  
  <form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" placeholder="Enter your username" required><br><br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email" required><br><br>
    
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Try It Now

Key Tips for Beginners

Quotes:
- Always use double quotes (") for attribute values.
- Example:
```
<input type="text" placeholder="Enter your name">
```
  Try It Now
Avoid Duplicate IDs:
- Each id must be unique within a webpage.
Combine class for Styling:
- An element can have multiple classes.
- Example:
```
<div class="card highlight"></div>
```
  Try It Now
Accessibility:
- Use attributes like alt, title, and aria-label for better accessibility.

Common Mistakes to Avoid

Forgetting to Close Quotes:

Incorrect:
```
<img src=image.jpg alt=Example>
```
Try It Now
Correct:
```
<img src="image.jpg" alt="Example">
```
Try It Now

Using Spaces in Attribute Values:

Incorrect:

<a href=https://example.com/new user>Link</a>

Try It Now

Correct:

<a href="https://example.com/new_user">Link</a>

Try It Now

Interactive Exercise

Try this snippet in your browser to practice attributes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive HTML Attributes</title>
</head>
<body>
  <h1 class="highlight" style="color: purple;">Interactive Example</h1>
  <p title="Hover over me!">Hover your mouse to see a tooltip.</p>
  <a href="https://example.com" target="_blank">Visit Example in New Tab</a>
  <img src="https://via.placeholder.com/150" alt="Placeholder Image">
</body>
</html>

Try It Now