HTML Attributes

HTML attributes are used to add information to HTML elements to modify their behavior, appearance, or provide extra details. They act like settings or instructions that fine-tune the elements within your web page.

  1. Placement: Attributes are placed within the opening tag of an element, after the element’s name.
  2. Syntax: They are written as name-value pairs, separated by an equals sign (=), and enclosed in quotation marks.
  3. Types of Attributes:
    • Global attributes: Applicable to almost all HTML elements (e.g., idclassstyletitle).
    • Element-specific attributes: Unique to certain elements (e.g., src for images, href for links, type for forms).


<img src="image.jpg" alt="A descriptive image" width="300" height="200">

In this example, src, alt, width, and height are attributes of the <img> element. A name-value pair in this example is width as the name and “200” as the value.

  • id: Assigns a unique identifier to an element for styling, scripting, or linking.
  • class: Assigns one or more classes to an element for styling or grouping.
  • style: Applies inline CSS styles to an element.
  • title: Provides additional information as a tooltip when hovering over an element.
  • src: Specifies the source of an external resource (e.g., image, video, script).
  • href: Defines the link destination for anchor tags (<a>).
  • alt: Provides alternative text for images, crucial for accessibility.
  • width and height: Set the dimensions of images or other visual elements.
  • type: Specifies the type of input element in forms.
  • Customization: They enable you to tailor elements to your specific needs and designs.
  • Interactivity: Attributes like href and onclick make elements interactive and clickable.
  • Accessibility: Attributes like alt and title provide essential information for users with disabilities or screen readers.
  • SEO: Search engines use attributes like alt and title to understand content better.

Key Points:

  • Use attributes correctly to ensure valid HTML and prevent unexpected behavior.
  • Choose attributes that enhance the functionality, accessibility, and searchability of your web content.