HTML Attributes

HTML Attributes – Add Meaning to HTML Elements

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>

Example:

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

Here:

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

Common Attributes

  1. id
    • Specifies a unique identifier for an element.
    • Example: 
      <h1 id="main-title">Welcome</h1>
  2. class
    • Used to group elements for styling or scripting purposes.
    • Example: 
      <p class="highlight">This is a highlighted paragraph.</p>
  3. style
    • Adds inline CSS to an element.
    • Example: 
      <p style="color: blue; font-size: 16px;">Styled text</p>
  4. title
    • Provides additional information as a tooltip.
    • Example: 
      <abbr title="HyperText Markup Language">HTML</abbr>
  5. src
    • Specifies the source file for images, videos, or audio.
    • Example: 
      <img src="image.jpg" alt="Example Image">
  6. alt
    • Provides alternative text for images (important for accessibility and SEO).
    • Example: 
      <img src="logo.png" alt="Company Logo">
  7. href
    • Specifies the URL of a link.
    • Example: 
      <a href="https://example.com">Visit Example</a>
  8. 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>
  9. type
    • Specifies the type of input or button.
    • Example: 
      <input type="text" placeholder="Enter your name">
  10. placeholder
    • Displays a short hint in input fields.
    • Example: 
      <input type="email" placeholder="Enter your email">
  11. disabled
    • Disables an element.
    • Example: 
      <button disabled>Click Me</button>
  12. readonly
    • Makes an input field read-only.
    • Example: 
      <input type="text" value="Read-only text" readonly>
  13. name
    • Specifies a name for form elements.
    • Example: 
      <input type="text" name="username">
  14. value
    • Predefines the value of an input field.
    • Example: 
      <input type="text" value="John Doe">
  15. lang
    • Defines the language of the content.
    • Example: 
      <html lang="en">

Global Attributes

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

  1. id
  2. class
  3. style
  4. title
  5. 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

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

Common Mistakes to Avoid

  1. Forgetting to Close Quotes:
    • Incorrect: 
      <img src=image.jpg alt=Example>
    • Correct: 
      <img src="image.jpg" alt="Example">
  2. Using Spaces in Attribute Values:
    • Incorrect: 
      <a href=https://example.com/new user>Link</a>
    • Correct: 
      <a href="https://example.com/new_user">Link</a>

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