HTML Dog
Skip to navigation

Global Attributes

The generalists. You can use any of these attributes with any HTML tag.

Core

AttributeDescriptionPossible values
idIdentifies a unique element. The value of id can be used by CSS or JavaScript to reference that element. Links can also point directly to an element with a specific id.Text, excluding spaces.
The value of the id attribute must be unique.
classUsed to reference elements, by CSS, for example. Any number of elements can have the same value (unlike id).Text.
Multiple classes can be applied by separating them with spaces.
title Adds additional advisory information to an element.Text.
styleApplies inline CSS.CSS delclarations.

Example


<style>
    .question { color: blue }
    #global { color: red }
</style>

<!-- stuff -->

<p class="question"><a href="#global">What are global attributes?</a></p>

<!-- more stuff -->

<p id="global">Attributes that can be used with all <abbr title="HyperText Markup Language">HTML</abbr> tags.</p>

Internationalization

AttributeDescriptionPossible values
langThe language of text in an element.Language code (such as en or es).
dirThe direction of text in an element.
  • ltr (left-to-right)
  • rtl (right-to-left)
  • auto
translateIf text should be translated when a document is localized.
  • yes
  • no

Example


<p dir="ltr" translate="no">Blackadder: <q lang="de">Schnell! Schnell! Kartoffelkopf.</q></p>

User Interaction

AttributeDescriptionPossible values
accesskeyAssociates a keyboard shortcut to an element.Space-separated list of characters.
tabindexExplicitly specifies where an element appears in the tab order of the page.Integer.
hiddenStates that an element is not relevant to the page. Typically used in conjunction with JavaScript to programatically hide or show elements depending on user action.No value required.
contenteditableStates if the content of an element is editable by the user or not.
  • true
  • false
spellcheckSpecifies if the spelling of user-inputted text should checked or not.
  • true
  • false
draggableStates if an element is draggable, typically used to facilitate drag and drop. Should always be accompanied by a title attribute as an accessibility consideration.
  • true
  • false
  • none (auto)
dropzoneSpecifies that when something is dragged and dropped onto the element, it should copy the data, move the data to its location, or link to the data. Not widely supported.
  • copy
  • move
  • link

Example


<ul>
    <li><a tabindex="2" accesskey="h" href="here/">Here </a></li>
    <li><a tabindex="3" accesskey="t" href="there/">There</a></li>
    <li><a tabindex="1" accesskey="b" href="butHereFirst/">But here first</a></li>
    <li hidden><a href="notHereThough/">Not here though</a></li>
</ul>

<p contenteditable="true" spellcheck="true">Hey, man, fiddle with my content.</p>

Menus

AttributeDescriptionPossible values
contextmenuExplicitly assigns a context menu to the element. The value associates the element to a menu element with the corresponding id. Not widely supported.Text.

Example


<form>
    <label>JG Ballard: <input contextmenu="ballard"></label>
    <menu type="popup" id="ballard">
        <menuitem label="High Rise">
        <menuitem label="Concrete Island">
        <menuitem label="The Drowned World">
    </menu>
</form>