Introduction

HTML element attributes customize the behavior of elements. Different attributes lead to different behaviors. Attributes are written as “key-value pairs” inside HTML tags.
For example:

1
<html lang="en">

In this code, lang="en" within the <html> tag is an attribute of the html element. The attribute name is lang, and its value is en.

Attribute names, like tag names, are case-insensitive. lang and LANG refer to the same attribute.

Attribute names and values are connected by an equals sign (=). Values can be enclosed in single or double quotes, but double quotes are recommended. Some attribute values can be used without quotes, but this practice is discouraged.

Some attributes are boolean, meaning they only have two states: “on” or “off”. For these, you can simply include the attribute name to turn it on, without specifying a value.

For example:

1
<input type="text" required>

Here, required is a boolean attribute of the <input> tag. Its presence indicates it’s turned on, while its absence means it’s off.

Global Attributes

Global attributes can be used with any HTML element. While you can add these attributes to any element, they may not have a meaningful effect on all elements.

Here are some common global attributes:

id

The id attribute provides a unique identifier for an element within a webpage. For instance:

1
2
3
<p id="p1"></p> 
<p id="p2"></p> 
<p id="p3"></p>

Each <p> tag has a different id, allowing them to be distinguished. id values must be unique within a page and cannot contain spaces.

You can also use an id as an anchor in a URL by prefixing it with #. For example, https://foo.com/index.html#bar will automatically scroll the page to the element with id="bar".

class

The class attribute categorizes elements. Elements with the same class value are considered to be of the same type:

1
2
3
<p class="para"></p> 
<p></p> 
<p class="para"></p>

Here, the first and third <p> elements are of the same class.

An element can have multiple classes, separated by spaces:

1
<p class="p1 p2 p3"></p>

This <p> element has three classes: p1, p2, and p3.

title

The title attribute adds supplementary information to an element. In most browsers, this appears as a tooltip when the mouse hovers over the element:

1
2
3
<div title="Copyright notice"> 
  <p>This site's content is under a Creative Commons license and free to use.</p> 
</div>

In the code above, the title attribute explains the purpose of this section of content. When the mouse hovers over it, the browser displays a tooltip. Once the mouse moves away, the tooltip disappears.

tabindex

Web pages are typically operated with a mouse, but in some cases, users may prefer or only have the option to use a keyboard. Therefore, browsers allow navigation through web page elements using the Tab key. This means that by continuously pressing the Tab key, the focus of the web page shifts from one element to another. Once an element is focused, users can proceed with actions such as pressing Enter to follow a link or directly entering text into an input field.
However, a question arises: how does the browser determine the order when Tab is pressed? HTML addresses this with the tabindex attribute, which resolves this issue. Its name signifies the order (index) in which Tab should navigate.
The tabindex attribute takes an integer value that determines the sequence in which focus shifts when users press the Tab key. Different values of this attribute have different meanings.

The tabindex attribute determines the order in which elements are focused when using the Tab key to navigate a webpage. It’s particularly useful for keyboard accessibility. Its values have different meanings:

  • Negative integer (usually -1): The element can receive focus (e.g., via JavaScript’s focus() method) but doesn’t participate in sequential keyboard navigation.
  • 0: The element participates in sequential keyboard navigation, in an order determined by the browser (usually based on the element’s position in the document).
  • Positive integer: The element participates in sequential keyboard navigation, with its order defined by the tabindex value (lowest to highest).
1
<p tabindex="0">This text can receive focus.</p>

In the code above, the <p> tag has a tabindex of 0, which means this element can receive focus and can also be navigated using the Tab key, with the order determined by its position in the source code.

Generally, it’s best to set the tabindex attribute to 0 for most cases, allowing natural sequential navigation that aligns with user expectations, unless the webpage has a specific layout requirement. If no elements on the webpage have a tabindex set, only those default navigable elements (like links and input fields) can be navigated using the Tab key, with the order determined by their position in the source code. Therefore, in practice, setting the tabindex attribute is only necessary for elements that cannot naturally receive focus, such as <span> or <div>.

accesskey

The accesskey attribute specifies a keyboard shortcut to focus on an element. Its value must be a single printable character:

1
<button accesskey="s">Submit</button>

In the code above, the <button> element has a shortcut key of ‘s’, allowing it to receive focus when the shortcut key is pressed.

The accesskey attribute’s character key must be pressed together with a modifier key to take effect. This means the shortcut key is a combination of “modifier key + character key”. Different browsers and operating systems use different modifier keys. For instance, in Chrome on Windows and Linux systems, the shortcut key is Alt + character key, while on Mac systems, it is Ctrl + Alt + character key.

It’s important to note that if accesskey conflicts with system-level or browser-level shortcuts, it will not function.

style

The style attribute allows inline CSS styling:

1
<p style="color: red;">hello</p>

The above code specifies that the text color is red.

hidden

The hidden attribute is a boolean attribute that indicates an element is not currently relevant and should not be rendered:

1
<p hidden>This sentence won't appear on the page.</p>

In the code above, this <p> element will not appear on the webpage.

Note that CSS visibility settings take precedence over the hidden attribute. If CSS makes the element visible, the hidden attribute will be ignored.

lang and dir

The lang attribute specifies the language of an element’s content:

1
2
<p lang="en">hello</p> 
<p lang="zh">你好</p>

In the code above, the lang attribute of the first <p> element indicates that the text is in English, while the lang attribute of the second <p> element indicates that the text is in Chinese.

The value of the lang attribute must comply with the BCP47 standard. Here are some common language codes:

  • zh: Chinese
  • zh-Hans: Simplified Chinese
  • zh-Hant: Traditional Chinese
  • en: English
  • en-US: American English
  • en-GB: British English
  • es: Spanish
  • fr: French

The dir attribute indicates the text direction:

  1. ltr: left-to-right (e.g., English)
  2. rtl: right-to-left (e.g., Arabic, Persian, Hebrew)
  3. auto: browser decides based on content

translate

The translate attribute indicates whether the element’s content should be translated:

1
2
3
4
<p> 
  <span translate="no">Wien</span> 
  named world's most liveable city (again)! 
</p>

In the example above, translate="no" is used to instruct the translation software not to translate the text within the <span> element.

If translate is set to “yes,” it tells the translation software to translate the text.

contenteditable

By default, HTML web content is not editable by users. The contenteditable attribute allows users to modify the content and can have two possible values:

  • true or an empty string: The content is editable.
  • false: The content is not editable.

In the code snippet below, clicking on the sentence will enter edit mode, allowing users to change the text. However, unless the changes are submitted to the server, refreshing the page will revert to the original content.

1
<p contenteditable="true"> Click this sentence to edit its content. </p>

The contenteditable attribute is an enumerated attribute, not a boolean one, so it’s best to include the attribute value explicitly.

spellcheck

Browsers typically include a built-in spell check feature, which underlines misspelled words with a red, wavy line. The spellcheck attribute determines whether spell check is enabled.
It has two possible values:

  • true: Enables spell check.
  • false: Disables spell check.

In the example below, the word “seperate” will be underlined to indicate it’s misspelled:

1
2
3
<p contenteditable="true" spellcheck="true">
The English word "separate" is often mistakenly written as "seperate".
</p>

Note that the spellcheck attribute only takes effect when the content is editable, which is why the contenteditable attribute is included. Clicking on the text will allow you to edit it and see the spell check suggestions. Spell check will not be active if the content is not editable. For non-editable elements, the spellcheck attribute has no effect.

Although the spellcheck attribute appears to be boolean, it is actually an enumerated attribute, so it’s best to always specify its value. If the attribute is not set, the browser will decide whether to enable spell check on its own.

data- attributes

The data- attribute is used to store custom data. If there is no other suitable attribute or element to hold the data, you can use data-.
For example:

1
<a href="#" class="tooltip" data-tip="this is the tip!">Link</a>

In this code, data-tip holds the tooltip text for the link.

Since data- attributes are only accessible through CSS or JavaScript, they won’t be covered in detail here. Below are examples of how to use them with CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* HTML code:
<div data-role="mobile">
Mobile only content
</div>
*/
div[data-role="mobile"] {
  display:none;
}

/* HTML code:
<div class="test" data-content="This is the div content">test</div>
*/
.test {
  display: inline-block;
}
.test:after {
  content: attr(data-content);
}

Event Handler Attributes

Global attributes also include event handler attributes that respond to user actions. These attributes take JavaScript code as their value. For a complete list and usage details, please refer to a JavaScript tutorial.

onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting

Link to original article:
https://wangdoc.com/html/attribute