Attributes #

An attribute provides additional information to its element.

An attribute is written as name="value" inside the opening tag of an element.

Attribute names and enumerated attribute values are case-insensitive, but it is recommended to use lowercase.
Non-enumerated attribute values are case-sensitive.

An enumerated attribute accepts a predefined set of values.

<input type="text" />
<input type="password" />
<input type="email" />

HTML data-* ⇄ JavaScript HTMLElement.dataset

<div data-weight="100">Box</div>

const div = document.querySelector<HTMLDivElement>("div");
console.log(div?.dataset.weight); // "100"

A boolean attribute is determined solely by its presence or absence. When the attribute is present, it is considered true; when it is absent, it is considered false. The actual value assigned does not matter.

<!--All checkboxes will be checked-->
<input type="checkbox" checked />
<input type="checkbox" checked="" />
<input type="checkbox" checked="true" />
<input type="checkbox" checked="false" />

HTML Attributes are reflected in corresponding JavaScript properties.

Examples #

• id

  Elements cannot share the same id value.

• class

  Elements can share the same class value and have multiple class values.

  HTMLCopy

  <div class="common"></div>
  <div class="common another"></div>

• title

  For a mouse hovering tooltip.

• rel
  rel="noopener"

  rel="noreferrer"

  Contains rel="noopener".

aria-*
• aria-hidden
• aria-pressed
• aria-sort
role