All HTML Attributes List by Type

HTML attributes provide additional information about HTML elements. They control behavior, appearance, accessibility, SEO, media, forms, links, and browser interactions. This guide covers the most commonly used HTML attributes organized by category with practical examples and best practices.

What Are HTML Attributes?

HTML attributes are special properties added to HTML elements. They provide additional information about how an element should behave, display content, interact with users, or communicate with browsers and search engines.

<a href="/tutorials/html/" title="HTML Tutorial | PHPKINGDOM">
  Learn HTML
</a>

In the example above, href and title are HTML attributes.

HTML Attribute Syntax

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

Most attributes contain a name and value pair. Some attributes are boolean and become active simply by being present.

<input type="email" required />

HTML Attributes Categories Cheatsheet

Category	Common Attributes	Usage
Global Attributes	id, class, style, title, lang, hidden	Available on most HTML elements.
Link Attributes	href, target, rel, download	Control hyperlink behavior.
Image Attributes	src, alt, width, height, loading	Configure image rendering and accessibility.
Form Attributes	action, method, name, required	Control form submission and validation.
Input Attributes	type, placeholder, value, autocomplete	Configure form controls.
Media Attributes	controls, autoplay, muted, loop	Configure audio and video playback.
Accessibility Attributes	aria-label, aria-describedby, role	Improve accessibility.
SEO Attributes	alt, hreflang, rel, content	Help search engines understand content.
Custom Attributes	data-*	Store custom application data.
Scripting Attributes	defer, async, crossorigin	Control JavaScript loading.

Global HTML Attributes

Global attributes can be used on most HTML elements.

Attribute	Purpose	Example
`id`	Unique identifier.	`id="hero"`
`class`	Groups elements.	`class="card"`
`style`	Inline CSS.	`style="color:red"`
`title`	Tooltip information.	`title="More info \| PHPKINGDOM"`
`lang`	Language declaration.	`lang="en"`
`hidden`	Hide element.	`hidden`
`tabindex`	Keyboard navigation order.	`tabindex="0"`
`draggable`	Enable drag and drop.	`draggable="true"`

<section
  id="features"
  class="container"
  lang="en"
>
  Content
</section>

HTML Link Attributes

Attribute	Purpose	Used With
`href`	Link destination.	<a>
`target`	Open location.	<a>
`rel`	Relationship to destination.	<a>, <link>
`download`	Download file.	<a>
`hreflang`	Language of destination page.	<a>

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

HTML Image Attributes

Attribute	Purpose	SEO Impact
`src`	Image file path.	No
`alt`	Alternative text.	High
`width`	Image width.	Indirect
`height`	Image height.	Indirect
`loading`	Lazy loading.	Performance
`decoding`	Image decode strategy.	Performance
`srcset`	Responsive images.	Performance
`sizes`	Responsive image sizes.	Performance

<img
  src="/images/html.png"
  alt="HTML Tutorial"
  width="800"
  height="450"
  loading="lazy"
/>

HTML Form Attributes

Attribute	Purpose	Used With
`action`	Submission URL.	<form>
`method`	Submission method.	<form>
`enctype`	Encoding type.	<form>
`novalidate`	Disable validation.	<form>
`autocomplete`	Browser autofill.	<form>

<form
  action="/submit"
  method="post"
  autocomplete="on"
>
</form>

HTML Input Attributes

Attribute	Purpose
`type`	Input type.
`name`	Field identifier.
`value`	Default value.
`placeholder`	Helper text.
`required`	Required field.
`readonly`	Read-only input.
`disabled`	Disable input.
`min`	Minimum value.
`max`	Maximum value.
`pattern`	Validation pattern.
`autocomplete`	Autofill suggestions.
`autofocus`	Auto focus input.

Audio and Video Attributes

Attribute	Used With	Purpose
`controls`	audio, video	Show media controls.
`autoplay`	audio, video	Play automatically.
`muted`	audio, video	Mute media.
`loop`	audio, video	Repeat playback.
`poster`	video	Video thumbnail.
`preload`	audio, video	Preload strategy.

Accessibility Attributes

Accessibility attributes help assistive technologies understand page content.

Attribute	Purpose
`aria-label`	Accessible label.
`aria-labelledby`	Reference another label.
`aria-describedby`	Reference descriptive text.
`aria-hidden`	Hide from screen readers.
`role`	Define semantic role.

<button aria-label="Open menu">
  ☰
</button>

SEO-Important HTML Attributes

Attribute	SEO Benefit
`alt`	Image SEO and accessibility.
`href`	Internal and external linking.
`rel="canonical"`	Prevents duplicate content.
`hreflang`	International SEO.
`content`	Meta descriptions and metadata.
`lang`	Language targeting.

Custom Data Attributes

Custom data attributes store application-specific information.

<button
  data-user-id="101"
  data-role="admin"
>
  View User
</button>

const button = document.querySelector("button");

console.log(button.dataset.userId);
console.log(button.dataset.role);

JavaScript Script Attributes

Attribute	Purpose
`src`	Script file location.
`defer`	Load after HTML parsing.
`async`	Load independently.
`type`	Script type.
`crossorigin`	Cross-origin requests.

<script
  src="/app.js"
  defer
></script>

HTML Attribute Best Practices

Use lowercase attribute names.
Always quote attribute values.
Use descriptive alt text.
Use unique id values.
Prefer CSS classes over inline styles.
Use loading="lazy" for non-critical images.
Use accessibility attributes where appropriate.
Use semantic and meaningful values.
Use rel="noopener noreferrer" with external links.
Validate forms using proper input attributes.

Common HTML Attribute Mistakes

Missing image alt attributes.
Using duplicate IDs.
Using inline styles excessively.
Using target="_blank" without rel.
Forgetting name on form fields.
Using meaningless class names.
Missing accessibility labels.
Not using lazy loading for large image-heavy pages.

Key Takeaways

HTML attributes provide additional information about elements.
Attributes are categorized into global, form, image, link, media, accessibility, SEO, and scripting groups.
Global attributes such as id and class are used most frequently.
Accessibility attributes improve usability for assistive technologies.
SEO-friendly attributes help search engines understand content.
Using attributes correctly improves performance, accessibility, maintainability, and user experience.

Pro Tip

If you master just 15 attributes—id, class, href, src, alt, title, name, type, value, placeholder, required, loading, lang, aria-label, and rel—you can build most modern websites.