HTML Attributes

HTML (Hypertext Markup Language) attributes provide additional information about HTML elements and are used to modify the behavior or appearance of those elements. Attributes are always included in the opening tag of an HTML element and are written as name-value pairs. Here's a detailed overview of HTML attributes:

Syntax:

  • Attributes are added to an HTML tag with the following syntax: name="value".
  • They are placed within the opening tag of an element.

    • Common Global Attributes:
    1. class:
      • Assigns one or more class names to an element, allowing styling through CSS.
        • Example: 
        <div class="container">Content </div>
    2. id:
      • Provides a unique identifier for an element.
        • Example: 
        <p id="intro">Introduction </p>
    3. style:
      • Defines inline CSS styles for an element.
        • Example: 
        <p style="color: red; font-size: 16px;">Styled Text </p>
    4. title:
      • Adds supplementary information that is displayed as a tooltip.
        • Example: 
         <img src="image.jpg" alt="Description" title="Image Tooltip">
    5. lang:
      • Specifies the language of the element's content.
        • Example: 
        <html lang="en"> </html>


    Specific Attributes:
    1. src:
      • Specifies the source URL for elements like images (<img>) or iframes (<iframe>).
        • Example: 
        <img src="image.jpg" alt="Description">
    2. alt:
      • Provides alternative text for elements like images, which is displayed if the image cannot be loaded.
        • Example: 
        <img src="image.jpg" alt="Description">
    3. href:
      • Defines the hyperlink reference for anchor elements (<a>).
        • Example: 
        <a href="https://www.example.com">Visit Example Website</a>
    4. width and height:
      • Sets the width and height of elements like images.
        • Example: 
        <img src="image.jpg" alt="Description" width="300" height="200">
    5. disabled:
      • Disables user interaction with form elements.
        • Example: 
        <input type="text" disabled>
    6. readonly:
      • Makes form elements read-only.
        • Example: 
        <input type="text" value="Read-only" readonly>


      Data Attributes:
    1. data:
      • Allows the embedding of custom data attributes for scripting or styling.
        • Example: 
        <div data-info="custom data">Content</div>
    1. Boolean Attributes:
      • Certain attributes are boolean, meaning their presence implies true.
        • Example: 
          <input type="checkbox" checked>
    1. Event Attributes:
      • HTML supports event attributes for inline event handling.
        • Example: 
        <button onclick="alert('Button Clicked!')"<Click me</button>



    Example:- 
     <!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Attributes Example</title>

</head>
<body>
<h1 class="heading" id="main-heading" style="color: blue;">Welcome to My Website</h1>

 <img src="image.jpg" alt="Description of the image" width="500" height="300" title="Image Tooltip">

  <a href="https://www.example.com" target="_blank">Visit Example Website</a>

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

 <div data-info="custom data">Custom Data Example</div>

 <input type="checkbox" checked>
    
<button onclick="alert('Button Clicked!')">Click me</button>

</body>
</html>