Introduction to HTML5 forms and new attributes. How to use HTML5 data attributes Global html attributes
Attributes provide additional information about an element, and they are always defined in the start tag, regardless of whether it is a paired tag or a single tag.
There are a number of attributes in HTML that universal and can be applied to almost any tag, which is why the attributes included in this group are called global attributes.
Global attributes will be often encountered in the examples of this tutorial; I suggest you quickly review the attributes that we have already reviewed and familiarize yourself with the global attributes that will be discussed in upcoming articles:
Questions and tasks on the topic
Before moving on to the next topic, complete the practice assignment:
Tip: Don't forget to define the language of the page content and elements where required. After you complete the exercise, inspect the page code by opening the example in a separate window to make sure you completed it correctly.
To see a description and example of using the global attribute you are interested in, click on it or scroll down the page to its description.
accesskey
The accesskey attribute is used by browsers as a guide to create a keyboard shortcut that activates an element or gives it focus.
Note: Before HTML5, the accesskey attribute could only be used with the following tags: ,
The value of the accesskey attribute must be a character that can be entered by pressing a single key. Whitespace characters are not allowed as attribute values.
The keyboard shortcuts for the accesskey attribute depend on the browser you are using:
Using the accesskey attribute on different elements with the same value causes the attribute to be ignored.
class
The class attribute is used to later access elements (via the class name) in CSS and JavaScript.
In the class attribute, you can specify not one, but several classes as a value; in this case, the class names must be separated by spaces; the order of the class names does not matter:
If declaration blocks of different classes use the same CSS properties with different values, then the value that is defined lower than the others in the CSS code will be applied to the property. Therefore, the order of the class names in the attribute value does not matter, since in this case the cascading mechanism is triggered.
contenteditable
The contenteditable attribute specifies whether the content of this element can be edited by the user. The attribute can take one of the following values:
- true or empty string ("") - the contents of the element can be edited
- false - content editing is prohibited
draggable
The draggable attribute determines whether the user can drag an element using the drag-and-drop API. The attribute can take one of three values:
- true - indicates that the element can be dragged
- false - indicates that the element is not dragged
- auto - specifies that dragging of an element will depend on the default value set in the browser.
Using the id attribute, you can create links to a specific element, and not just to the page as a whole. Such links can lead either to a section of this page or to a section of another page. To create a link to an element, you need to add an id attribute to the sky. The link itself, in this case, will have to contain the name of the identifier of the element to which it refers, which must be preceded by the # symbol. If the link leads to a section of the current page, then only the identifier name can be specified as the address; if the link leads to a section of another page, then the identifier name is indicated at the very end of the address:
lang
The lang attribute allows you to specify what language is used for the text inside the element. Language codes are used as the attribute value:
Text in English: "Hello world!".
Using this attribute helps browsers correctly display some national characters, speech programs determine the language of the text, and check the text for spelling and grammar checking programs.
The lang attribute can also be used to improve the quality of search results that are based on the user's linguistic preferences.
spellcheck
The spellcheck attribute specifies whether the element's contents can be checked for spelling errors. The attribute can take one of the following values:
- true - indicates that the content of the element should be checked for spelling errors if possible.
- false - indicates that the element should not be checked for spelling errors.
The spellcheck attribute is an enumerable attribute. This means that an explicit attribute value is required. Adding an attribute without a value is prohibited:
The spellcheck attribute specifies only a browser recommendation: browsers should not be able to check for spelling errors. Typically, non-editable elements are not checked for errors, even if the attribute is set to true and the browser supports checking.
style
The style attribute is used to add CSS styles to an element. Styles added using the style attribute take precedence over styles located within the element