Attributes of web elements

Introduction

Attributes of web elements can customize the behavior of an element, and different attributes can cause an element to behave differently. Element attributes are written as "key-value pairs" inside HTML tags.

<html lang="en"></html>

In the above code, the key-value pair lang="en" inside the <html> tag is called an attribute of the html element. The attribute name is lang and the attribute value is en.

The attribute name is case-insensitive, like the tag name, and lang and LANG are the same attribute.

The attribute name is connected to the attribute value by the equal sign =. Attribute values can be enclosed in single or double quotes, and it is recommended that double quotes be used consistently. Some property values can be written without quotation marks, but it is recommended that they not be written that way.

Some properties are Boolean properties, i.e., the property value is a Boolean value that is only "on" or "off". In this case, the attribute value can be omitted, and the attribute name can be added to indicate that the attribute is turned on.

<input type="text" required />

In the above code, required is the boolean attribute of the <input> tag. If this attribute is added, it means that it is on, and if it is not, it is off.

Global attributes

Global attributes are attributes that can be used by all elements. That is, you can add the following attributes to any page element, although some of them may not make sense for some elements.

Here are some common global attributes.

id

The id attribute is a unique identifier for an element within a web page. For example, a web page may contain multiple <p> tags, and the id attribute can specify a unique identifier for each <p> tag.

<p id="p1"></p>
<p id="p2"></p
<p id="p3"></p>

In the above code, the three <p> tags have different id attributes and are therefore distinguishable.

The value of the id attribute must be globally unique, and there cannot be two identical id attributes on the same page. In addition, the value of the id attribute must not contain spaces.

The value of the id attribute can also be prefixed with # at the top and placed in the URL as an anchor point to locate the element within the page. For example, when a user visits the URL https://foo.com/index.html#bar, the browser will automatically scroll the page to the position of bar, so that the user can see this part at first glance.

class

The class attribute is used to categorize web page elements. If different elements have the same value for the class attribute, it means they are of the same class.

<p class="para"></p>
<p></p>
<p class="para"></p>

In the above code, the first <p> and the third <p> are of one class because they have the same class attribute.

Elements can have multiple classes at the same time, separated by spaces.

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

The p element above has three classes p1, p2, and p3 at the same time.

title

The title attribute is used to add additional description to the element. In most browsers, the title attribute value is displayed as a floating hint when the mouse is hovered over the element.

<div title="Copyright notice">
  <p>Content on this site is free to use under a Creative Commons license.</p>
</div>

In the code above, the title attribute explains the purpose of this piece of content. When the mouse is hovered over, the browser displays a floating hint. Once the mouse is moved away, the hint disappears.

tabindex

Web pages are usually operated using the mouse, but in some cases the user may wish to use the keyboard, or only the keyboard may be used. Therefore, browsers allow the Tab key to be used to traverse the elements of a web page. In other words, if you keep pressing the Tab key, the focus of the page will shift from one element to another, and once the focus element is selected, you can take the next step, such as pressing the Enter key to visit a link, or typing text directly into an input box.

HTML provides the tabindex attribute to solve this problem. Its name means the order of the tabs (index).

The value of the tabindex attribute is an integer that indicates the order in which the focus of the page shifts when the user presses the Tab key. Different values of the property have different meanings.

  • Negative integer: The element can get focus (e.g. using JavaScript's focus() method), but does not participate in the Tab key's traversal of the page's elements. This value is usually -1.
  • 0: The element participates in the Tab traversal in the order specified by the browser, usually according to its position inside the page.
  • Positive integer: the element participates in the Tab key traversal in the order from smallest to largest (1, 2, 3, ......). If multiple elements have the same tabindex attribute, they are traversed in the order in which they appear inside the web page's source code.
<p tabindex="0">This text gets the focus.</p>

In the above code, the <p> tag has a tabindex of 0, meaning that the element can get focus and can also be traversed by the Tab key, in the order it appears in the source code.

In general, it is better to set the tabindex attribute to 0 and traverse in the natural order, which is more in line with the user's expectation, unless the page has a special layout. If tabindex is not set for all elements of the page, then only those elements that can be traversed by default (such as links, input boxes, etc.) can participate in the traversal of the Tab key, and the order is determined by their position in the source code. So in practice, only elements that do not have access to the focus (e.g. <span>, <div>) need to be traversed and it is only necessary to set the tabindex property.

accesskey

The accesskey attribute specifies a shortcut key for the page element to get focus, and the value of this attribute must be a single printable character. As soon as the shortcut key is pressed, the element will get focus.

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

In the code above, the shortcut key for <button> is s, and the element gets focus as soon as the shortcut key is pressed.

The character key of the accesskey attribute must be pressed together with the function key for it to take effect. In other words, the shortcut key is a combination of "function key + character key". The function keys are different for different browsers and different operating systems. For example, the shortcut key for Chrome on Windows and Linux is Alt + character key and on Mac is Ctrl + Alt + character key.

Note that accesskey will not work if it conflicts with an OS or browser-level shortcut.

style

The style property is used to specify the CSS style of the current element. See the CSS tutorial for details on how to set this.

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

The above code specifies that the text color is red.

hidden

hidden is a boolean attribute that indicates that the current page element is no longer relevant to the page, so the browser will not render the element, so it will not be seen in the page.

<p hidden>This sentence will not be displayed on the page. </p

In the code above, this p element will not appear on the page.

Note that CSS visibility is set higher than the hidden attribute. If CSS is set to make the element visible, the hidden attribute will not be valid.

lang, dir

The lang attribute specifies the language used by the web page element.

<p lang="en">hello</p
<p lang="zh">hello</p

In the above code, the lang attribute of the first <p>, indicates the use of English, and the lang attribute of the second <p>, indicates the use of Chinese.

The value of the lang attribute, must conform to the BCP47 standard. Here are some common language codes.

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

The dir attribute indicates the reading direction of the text and has three possible values.

  • ltr: read from left to right, e.g. English.
  • rtl: reads from right to left, Arabic, Persian, and Hebrew all fall into this category.
  • auto: the browser decides for itself, depending on the result of content parsing.

contenteditable

The content of HTML pages is not editable by the user by default, the contenteditable attribute allows the user to modify the content. It has two possible values.

  • true or the empty string: the content is editable
  • false: not editable
<p contenteditable="true">
  Mouse click, content of this sentence is modifiable.
</p>

In the code above, mouse-clicking on the sentence puts it into an editable state, where the user can change the content of the sentence. Of course, unless it is submitted to the server, refreshing the page still shows the original content.

This property is an enumeration property, not a boolean property, and the norm is to write it with the property value.

spellcheck

Browsers usually come with a spellcheck feature that shows a red wavy line under the misspelled words when editing content. The spellcheck attribute indicates whether spellchecking is turned on.

It has two possible values.

  • true: spellcheck is turned on
  • false: spellcheck is turned off
<p contenteditable="true" spellcheck="true">
  The English word separate is easily misspelled as seperate.
</p>

In the code above, there is a hint under seperate that it is misspelled.

Note that since this attribute only works when editing, this example must have the contenteditable attribute added to indicate that the paragraph is editable. A mouse click will bring you to the editable state, and only then will you see the spelling hint. In the uneditable state, spelling errors are not prompted to be displayed. For those elements that are not editable, this property is not valid.

This property looks like a Boolean property, but is actually an enumeration property, so it is best not to omit its value. If this attribute is not specified, the browser will decide for itself whether to turn on spell checking.

The data- attribute

The data- attribute is used to place custom data. If no other attribute or element is suitable for placing data, it can be placed in the data- attribute.

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

In the code above, data-tip is used to place the tip text of the link.

Since the data- attribute can only be utilized via CSS or JavaScript, it is not described in detail here. Here is an example of CSS.

/* The HTML code is as follows
<div data-role="mobile">
Mobile only content
</div>
*/
div[data-role="mobile"] {
  display: none;
}

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

Event handler properties

In addition to the above properties, the global properties also include event handler properties, which are used to respond to user actions. The values of these properties are JavaScript code, please refer to the JavaScript tutorial, only a list of these properties are listed here. Translated with www.DeepL.com/Translator (free version)

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