HTML Attributes

HTML attributes provide additional information about elements.
They control how an element behaves or is described to the browser.

Attributes are always written inside the opening tag.

Basic Attribute Syntax

<tagname attribute="value">Content</tagname>

Example:

<p title="Paragraph tooltip">This is a paragraph.</p>
  • title → attribute name
  • "Paragraph tooltip" → attribute value

Multiple Attributes in One Element

An element can have more than one attribute.

<a 
  href="https://example.com"
  title="Visit example site"
  target="_blank"
  rel="noopener noreferrer">
  Visit Example
</a>

Attributes Explained

  • href → link destination
  • title → tooltip text
  • target → where link opens
  • rel → security and relationship

Global Attributes

Some attributes can be used on almost all HTML elements.

Common global attributes:

  • id
  • class
  • style
  • title
  • hidden
  • data-*

Example:

<p 
  id="intro"
  class="text highlight"
  title="Intro paragraph"
  data-type="description">
  Welcome to HTML.
</p>

Boolean Attributes

Boolean attributes do not require a value.

Example:

<input type="checkbox" checked disabled>
  • checked → selected by default
  • disabled → cannot be used

Attribute Order (Best Practice)

Attributes can be written in any order, but a clean order improves readability:

  1. id
  2. class
  3. name
  4. data-*
  5. src, href, type
  6. title, alt
  7. style

Example:

<img 
  id="logo"
  class="site-logo"
  src="logo.png"
  alt="Website logo"
  width="120"
  height="60"
  loading="lazy">

Important Notes

  • Attribute names are not case-sensitive
  • Always use quotes for values
  • Avoid inline style unless necessary
  • Use meaningful attribute values

Why Attributes Are Important

  • Add meaning to elements
  • Improve accessibility
  • Control behavior
  • Help with styling and scripting