HTML Attributes

What are HTML Attributes?

HTML attributes are additional details added to HTML elements to modify their behavior, appearance, or provide extra information. They are always included in the opening tag of an element and are written as name-value pairs.

Structure of Attributes

An HTML attribute consists of:

• Name: The attribute type (e.g., id, class, src)
• Value: The value assigned to the attribute, enclosed in single or double quotes.

Example:

  <img src="ImageName.jpg" alt="Image Not Found" >

• src: Specifies the image's source file.
• alt: Provides alternative text for accessibility or if the image fails to load.

Types of Attributes

1. Global Attributes

These can be applied to any HTML element:

• id:Unique identifier for an element.
• class:Specifies one or more class names for styling.
• style:Inline CSS to style the element.
• title:Additional information displayed as a tooltip.
• data:Custom attributes for embedding additional data.

  <div id="container" class="box" style="background-color: lightblue;" title="This is a box">
      TopFreeCourse
  </div>

2. Specific Attributes

These work with specific elements only:

• <img>: src, alt, width, height.
• <a>: href, target, rel.
• <input>: type, placeholder, value.

Example:

  <a href="https://topfreecourse.com" target="_blank">Visit Top Free Course</a>
  <input type="text" placeholder="Enter your name">

3. Boolean Attributes

Some attributes, like checked, disabled, and readonly, don’t need a value. Their mere presence implies "true."

Example:

  <input type="checkbox" checked>
  <button disabled>Submit</button>