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:
     Plain text

     Copy to clipboard

     Open code in new window

     EnlighterJS 3 Syntax Highlighter

     <h1 id="main-title">Welcome</h1>

     <h1 id="main-title">Welcome</h1>

     <h1 id="main-title">Welcome</h1>
     

2. class
   • Used to group elements for styling or scripting purposes.
   • Example:
     Plain text

     Copy to clipboard

     Open code in new window

     EnlighterJS 3 Syntax Highlighter

     <p class="highlight">This is a highlighted paragraph.</p>

     <p class="highlight">This is a highlighted paragraph.</p>

     <p class="highlight">This is a highlighted paragraph.</p>
     

3. style
   • Adds inline CSS to an element.
   • Example:
     Plain text

     Copy to clipboard

     Open code in new window

     EnlighterJS 3 Syntax Highlighter

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

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

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

4. title
   • Provides additional information as a tooltip.
   • Example:
     Plain text

     Copy to clipboard

     Open code in new window

     EnlighterJS 3 Syntax Highlighter

     <abbr title="HyperText Markup Language">HTML</abbr>

     <abbr title="HyperText Markup Language">HTML</abbr>

     <abbr title="HyperText Markup Language">HTML</abbr>
     

5. src
   • Specifies the source file for images, videos, or audio.
   • Example:
     Plain text

     Copy to clipboard

     Open code in new window

     EnlighterJS 3 Syntax Highlighter

     <img src="image.jpg" alt="Example Image">

     <img src="image.jpg" alt="Example Image">

     <img src="image.jpg" alt="Example Image">
     

6. alt
   • Provides alternative text for images (important for accessibility and SEO).
   • Example:
     Plain text

     Copy to clipboard

     Open code in new window

     EnlighterJS 3 Syntax Highlighter

     <img src="logo.png" alt="Company Logo">

     <img src="logo.png" alt="Company Logo">

     <img src="logo.png" alt="Company Logo">
     

7. href
   • Specifies the URL of a link.
   • Example:
     Plain text

     Copy to clipboard

     Open code in new window

     EnlighterJS 3 Syntax Highlighter

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

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

     <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:
     Plain text

     Copy to clipboard

     Open code in new window

     EnlighterJS 3 Syntax Highlighter

     <a href="https://example.com" target="_blank">Open in New Tab</a>

     <a href="https://example.com" target="_blank">Open in New Tab</a>

     <a href="https://example.com" target="_blank">Open in New Tab</a>
     

9. type
   • Specifies the type of input or button.
   • Example:
     Plain text

     Copy to clipboard

     Open code in new window

     EnlighterJS 3 Syntax Highlighter

     <input type="text" placeholder="Enter your name">

     <input type="text" placeholder="Enter your name">

     <input type="text" placeholder="Enter your name">
     

10. placeholder
    • Displays a short hint in input fields.
    • Example:
      Plain text

      Copy to clipboard

      Open code in new window

      EnlighterJS 3 Syntax Highlighter

      <input type="email" placeholder="Enter your email">

      <input type="email" placeholder="Enter your email">

      <input type="email" placeholder="Enter your email">
      

11. disabled
    • Disables an element.
    • Example:
      Plain text

      Copy to clipboard

      Open code in new window

      EnlighterJS 3 Syntax Highlighter

      <button disabled>Click Me</button>

      <button disabled>Click Me</button>

      <button disabled>Click Me</button>
      

12. readonly
    • Makes an input field read-only.
    • Example:
      Plain text

      Copy to clipboard

      Open code in new window

      EnlighterJS 3 Syntax Highlighter

      <input type="text" value="Read-only text" readonly>

      <input type="text" value="Read-only text" readonly>

      <input type="text" value="Read-only text" readonly>
      

13. name
    • Specifies a name for form elements.
    • Example:
      Plain text

      Copy to clipboard

      Open code in new window

      EnlighterJS 3 Syntax Highlighter

      <input type="text" name="username">

      <input type="text" name="username">

      <input type="text" name="username">
      

14. value
    • Predefines the value of an input field.
    • Example:
      Plain text

      Copy to clipboard

      Open code in new window

      EnlighterJS 3 Syntax Highlighter

      <input type="text" value="John Doe">

      <input type="text" value="John Doe">

      <input type="text" value="John Doe">
      

15. lang
    • Defines the language of the content.
    • Example:
      Plain text

      Copy to clipboard

      Open code in new window

      EnlighterJS 3 Syntax Highlighter

      <html lang="en">

      <html lang="en">

      <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>

Key Tips for Beginners

1. Quotes:
   • Always use double quotes (") for attribute values.
   • Example:
     Plain text

     Copy to clipboard

     Open code in new window

     EnlighterJS 3 Syntax Highlighter

     <input type="text" placeholder="Enter your name">

     <input type="text" placeholder="Enter your name">

     <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:
     Plain text

     Copy to clipboard

     Open code in new window

     EnlighterJS 3 Syntax Highlighter

     <div class="card highlight"></div>

     <div class="card highlight"></div>

     <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:
     Plain text

     Copy to clipboard

     Open code in new window

     EnlighterJS 3 Syntax Highlighter

     <img src=image.jpg alt=Example>

     <img src=image.jpg alt=Example>

     <img src=image.jpg alt=Example>
     

   • Correct:
     Plain text

     Copy to clipboard

     Open code in new window

     EnlighterJS 3 Syntax Highlighter

     <img src="image.jpg" alt="Example">

     <img src="image.jpg" alt="Example">

     <img src="image.jpg" alt="Example">
     

2. Using Spaces in Attribute Values:
   • Incorrect:
     Plain text

     Copy to clipboard

     Open code in new window

     EnlighterJS 3 Syntax Highlighter

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

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

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

   • Correct:
     Plain text

     Copy to clipboard

     Open code in new window

     EnlighterJS 3 Syntax Highlighter

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

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

     <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>