pelicin › web › HTML

Global HTML Attributes

Global attributes are attributes common to all HTML elements. They can be used on all elements, although they may have no effect on some elements.

This list will exclude ARIA and event handler attributes.

Common Attributes

id=[...]

Unique ID of element (for selection with CSS or JS).

class=[...]

Space-separated list of classes (for selection with CSS or JS).

data-*=[...]

Reserved for custom attributes.

You can put anything for *, e.g. data-chunk-id.

style=[...]

Defines inline CSS rule(s) for an element.

<p style="color: red">Hello world!</p>
preview

Hello world!

hidden

Hides the element. The browser will not render such element.

Attributes Related to Localization

dir=[...]

Marks directionality of text.

  • ltr — Marks the text left-to-right, like English
  • rtl — Marks the text right-to-left, like Arabic
  • auto — Let the browser decide

lang=[...]

Defines the language of an element.

Use BCP47 format, e.g. en or en-US.

translate=[...]

Controls if the text content of an element should be translated (e.g. by Google Translate). Specify yes or no.

<!-- Do not translate the company's name -->
<footer>
  <small>© 2020 <span translate="no">BrandName</span></small>
</footer>

Attributes Related to UI and Accessibility

Keyboard navigation may not work as intended on Mac's Firefox. You may first need to enable it from System Preferences.

accesskey=[...]

Customizes keyboard shortcut for the current element.

The way to activate the shortcut depends on the browser and the OS (see here). For starters, you can try Alt + Shift + [accesskey] or Control + Shift + [accesskey].

<button accesskey="s" onclick="alert('Hello')">
  Try "Alt + Shift + S"
</button>
Preview

autocapitalize=[...]

Controls how text input is automatically capitalized as it is entered by the user.

  • off or none — Don't auto capitalize
  • on or sentences — Capitalize the first letter of each sentence
  • word — Capitalize the first letter of each word
  • characters — Capitalize everything

contenteditable=[...]

Indicates if the element should be editable by the user.

  • true or empty string — element must be editable
  • false — element must not be editable
<blockquote contenteditable="true">
  You can edit this quote!
</blockquote>
Preview
You can edit this quote!

draggable=[...]

Indicates if the element should be draggable using the Drag and Drop API. Specify true or false.

enterkeyhint=[...]

Hints what action label/icon to present for the enter key on virtual keyboards.

  • enter — expected behavior: inserts newline
  • done — expected behavior: closes keyboard (nothing else to do)
  • go — expected behavior: brings user to the typed item
  • next — expected behavior: focus on the next field that accepts text
  • previous — expected behavior: focus on the previous field that accepts text
  • search — expected behavior: brings user to the search result
  • send — expected behavior: sends typed item to the target
<input enterkeyhint="search">
Preview

spellcheck=[...]

Controls spellcheck enabled or disabled for the element. Specify true or false.

tabindex=[...]

Marks that the element can be focused.

  • negative value — the element should be focusable, but should not be reachable via sequential keyboard navigation
  • 0 — the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention
  • positive value — the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the tabindex
preview
One

title=[...]

Advisory text to display (usually as a tooltip).

<abbr title="HyperText Transfer Protocol">HTML</abbr> is poop.
preview
HTML is poop.

Attributes Related to Web Components (Shadow DOM, etc.)

is=[...]

Make standard HTML element to behave like a registered custom built-in element. (The custom built-in element would be defined in JavaScript.)

<!-- Defining custom built-in element: `word-count` -->
<script>
  class WordCount extends HTMLParagraphElement {
    ...
  }
  customElements.define('word-count', WordCount, { extends: 'p' });
</script>

<!-- This is a `word-count` custom element -->
<!-- its implementation is defined in the JS above, -->
<!-- and it extends the regular <p> element -->
<p is="word-count"></p>

part=[...]

TODO

exportparts=[...]

TODO

slot=[...]

TODO

Attributes Related to Microdata Feature

From HTML Living Standard: Sometimes, it is desirable to annotate content with specific machine-readable labels, e.g. to allow generic scripts to provide services that are customized to the page.

For this purpose, authors can use the microdata features described in this section. Microdata allows nested groups of name-value pairs to be added to documents, in parallel with the existing content.

At the high level, microdata consists of a group of name-value pairs. The groups are called items, and each name-value pair is a property.

itemscope

Defines a microdata item.

itemtype=[...]

Specifies the URL of the vocabulary that will be used to define item properties.

Google and other major search engines support the schema.org vocabulary for structured data (MDN).

<!-- See https://schema.org/Product -->
<!-- for defined values of `itemprop=[...]` -->
<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="brand">ACME</span>
  <span itemprop="name">Executive Anvil</span>
</div>

itemprop=[...]

Defines a property of an item.

When the property value is a URL, it is expressed using:

  • the <a> element and its href attribute,
  • the <img> element and its src attribute, or
  • other elements that link to or embed external resources.

When a string value is in some machine-readable format unsuitable for human consumption, it is expressed using:

  • the <data> element and its value attribute (with the human-readable version given in the element's content).
<div itemscope>
 <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
  <img itemprop="image" src="google-logo.png" alt="Google">
</div>

<h1 itemscope>
 <data itemprop="product-id" value="9678AOU879">The Instigator 2000</data>
</h1>

itemref=[...]

Space-separated id's of elements whose properties are to be associated with this item. (Used when said elements are not descendants of this item.)

<!-- Associate 'a' and 'b' with this item. -->
<!-- It will inherit property `name` and `band`. -->
<div itemscope id="amanda" itemref="a b"></div>

<!-- Definition of 'a' elsewhere -->
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<!-- Definition of 'b' elsewhere -->
<div id="b" itemprop="band" itemscope itemref="c"></div>

itemid=[...]

Gives unique identifier to an item. The value should be a URL or a URN. (itemscope and itemtype must be defined for such item.)

<dl itemscope
  itemtype="http://vocab.example.net/book"
  itemid="urn:isbn:0-330-34032-8">
  ...
</dl>

References