HTML Attributes

HTML attributes provide additional information about HTML elements. They are always specified in the opening tag of an element and usually come in name-value pairs. Here's a breakdown of HTML attributes with examples:

Basic Structure

Attributes are written as a name-value pair in the form:

name="value"

Examples

1. href Attribute (Used in <a> tag)

   • Purpose: Specifies the URL of the page the link goes to.
   • Example:

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

2. src Attribute (Used in <img> tag)

   • Purpose: Specifies the URL of the image.
   • Example:

     <img src="image.jpg" alt="A description of the image">
     

3. alt Attribute (Used in <img> tag)

   • Purpose: Provides alternative text for an image if it cannot be displayed.
   • Example:

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

4. class Attribute

   • Purpose: Specifies one or more class names for an element. This can be used for styling with CSS or for JavaScript interactions.
   • Example:

     <div class="container">
       <p class="text-bold">Hello, World!</p>
     </div>
     

5. id Attribute

   • Purpose: Provides a unique identifier for an element. This is useful for targeting specific elements with CSS or JavaScript.
   • Example:

     <div id="main-content">
       <p>Content goes here.</p>
     </div>
     

6. style Attribute

   • Purpose: Provides inline CSS styles for an element.
   • Example:

     <p style="color: red; font-size: 20px;">This is styled text.</p>
     

7. type Attribute (Used in <input> tag)

   • Purpose: Specifies the type of input element to display.
   • Example:

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

8. placeholder Attribute (Used in <input> tag)

   • Purpose: Provides a hint to the user of what to enter in the input field.
   • Example:

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

Notes

• Attribute names are case-insensitive, but values are usually case-sensitive.
• Some attributes can be used without a value, in which case the presence of the attribute itself is sufficient to activate its effect (e.g., checked in checkboxes).

Each HTML element has its own set of attributes that can be used to control its behavior and appearance.