List of HTML5 Global Attributes
Global attributes are attributes with all HTML elements can be used.
Global Attributes in HTML5
Apart from attributes that are specific to individual elements, HTML5 introduces several attributes that are applicable to all elements. These attributes can be utilized
across all elements, although there are exceptions where their relevance does not apply, such as within elements located in the document's <head> section,
for example, <base>, <script>, <title>, and others.
| Attribute | Value | Description |
|---|---|---|
accesskey |
shortcut key | Specifies a keyboard shortcut to activate or focus the element. |
class |
classname | Assigns a class name or space-separated list of class names to an element. |
contenteditable |
truefalse |
Indicates whether the content of an element is editable by the user or not. |
contextmenu |
menu-id | Specifies a context menu for an element. A context menu is a menu that appears when the user clicks the right mouse button on the element. |
data-* |
data | Specified on any HTML element, to store custom data specific to the page. |
dir |
ltrrtl |
Specifies the base direction of directionality of the element's text. |
draggable |
truefalse |
Specifies whether an element is draggable or not. |
dropzone |
copymovelink |
Specifies whether the dragged data is copied, moved, or linked, when dropped. |
hidden |
hidden |
Indicates that the element is not yet, or is no longer, relevant. |
id |
name | Specifies a unique identifier (ID) for an element which must be unique in the whole document. |
lang |
language code | Specifies the primary language for the element's text content. |
spellcheck |
truefalse |
Specifies whether the element may be checked for spelling errors or not. |
style |
style | Specifies inline style information for an element. |
tabindex |
number | Specifies the tabbing order of an element. |
title |
text | Provides advisory information related to the element. It would be appropriate for a tooltip. |
translate |
yesno |
Specifies whether the text content of an element should be translated or not. |
xml:lang |
language code | Specifies the primary language for the element's text content, in XHTML documents. |
FAQ
What is the purpose of the class attribute in HTML?
The class attribute is used to assign one or more CSS classes to an HTML element. It allows you to group multiple elements together and apply styles or JavaScript interactions to them collectively. CSS classes defined using the class attribute can be reused across multiple elements, providing a convenient way to style or target them consistently.
How can you specify a unique identifier for an HTML element using the id attribute?
The id attribute is used to assign a unique identifier to an HTML element. This identifier must be unique within the entire document. You can assign an id to an element by specifying it as the attribute value, like id="unique-id". Once assigned, you can reference that element using JavaScript or CSS by using the # selector followed by the id value.
What is the purpose of the style attribute in HTML?
The style attribute allows you to apply inline CSS styles directly to an HTML element. You can specify various visual properties such as color, size, font, background, positioning, and more. The styles defined in the style attribute override any external or internal CSS rules applied to the element, making it useful for making specific one-off styling adjustments.
How can you add additional information or metadata about an HTML element using the data-* attributes?
The data-* attributes provide a way to add custom data or metadata to an HTML element. They follow a specific naming convention where * can be replaced with any name you choose. For example, data-info="additional information". These attributes can be accessed and manipulated using JavaScript or CSS, making it useful for storing additional information that may be needed for scripting or styling purposes.
What does the title attribute do in HTML? How is it different from the alt attribute?
The title attribute is used to provide additional information about an HTML element. When a user hovers over an element with a title attribute, a tooltip is typically displayed, showing the specified information. It is not specific to images and can be used with any HTML element. On the other hand, the alt attribute is specifically used with image (<img>) elements to provide alternative text that is displayed when the image cannot be loaded or is inaccessible. It serves as a text description of the image for visually impaired users or when the image cannot be displayed.
How can you provide text alternatives for images using the alt attribute?
To provide text alternatives for images, you can use the alt attribute within the <img> element. The alt attribute should contain a concise and accurate description of the image content. This text is displayed when the image cannot be loaded or accessed, and it is also used by screen readers to describe the image to visually impaired users. The alt attribute is important for accessibility and search engine optimization (SEO).
What is the purpose of the lang attribute in HTML?
The lang attribute is used to specify the language of the content within an HTML element. It helps browsers and assistive technologies understand the language used in the content, enabling them to apply appropriate language-specific rules, spell checking, hyphenation, and translations. It is especially important for multilingual websites where different parts of the page may be in different languages.
How can you specify the keyboard shortcut for an HTML element using the accesskey attribute?
The accesskey attribute is used to specify a keyboard shortcut for an HTML element. By assigning a specific key or combination of keys to the accesskey attribute, you can allow users to quickly navigate to or activate the associated element. When the user presses the corresponding key or key combination, the element can receive focus or trigger a specified action, depending on the element type and browser implementation.
What is the purpose of the tabindex attribute in HTML?
The tabindex attribute is used to specify the tabbing order of elements when navigating through a web page using the keyboard. By default, elements are included in the tab order based on their position in the HTML source code. However, by assigning specific values to the tabindex attribute, you can control the order in which elements receive focus when the user presses the "Tab" key. This can be useful for improving the accessibility and usability of web pages, allowing users to navigate through interactive elements in a logical sequence.
How can you specify the target window or frame for a hyperlink using the target attribute?
The target attribute is used in hyperlink (<a>) elements to specify the target window or frame where the linked document should be displayed. By default, hyperlinks open in the same window or tab. However, by specifying a target value, such as _blank for a new window or _self for the same window, you can control how the linked content is displayed. This attribute provides flexibility in terms of opening links in new windows, frames, or specific targets within a frameset.
What does the disabled attribute do in HTML? How is it used?
The disabled attribute is used to disable an HTML element. When an element is disabled, it becomes unresponsive to user interactions and appears grayed out. It is commonly used with form elements such as <input>, <select>, and <button> to indicate that they are not currently usable or selectable. Disabled elements cannot be focused, edited, or submit form data until they are enabled again.
How can you make an HTML element read-only using the readonly attribute?
The readonly attribute is used to make an HTML element read-only, meaning that its value cannot be modified by the user. This attribute is commonly used with form elements like <input> and <textarea> to prevent users from editing the content. Read-only elements can still receive focus and allow users to select and copy text but not make any changes.
What is the purpose of the hidden attribute in HTML?
The hidden attribute is used to hide an HTML element from being displayed on the web page. When an element is marked as hidden, it is not rendered or visible to the user. This attribute is commonly used in combination with JavaScript or CSS to dynamically show or hide elements based on certain conditions or user interactions.
How can you specify the maximum number of characters allowed in an input field using the maxlength attribute?
The maxlength attribute is used to specify the maximum number of characters allowed in an input field. By adding maxlength="n" to an <input> element, where n represents the maximum number of characters, you can restrict the user from entering more characters than the specified limit. This attribute can be useful for enforcing character limits in text fields like usernames, passwords, or form inputs with length restrictions.
What does the required attribute do in HTML? How is it used?
The required attribute is used to specify that an input field must be filled out before submitting a form. When an input element is marked as required (required="required"), the browser's form validation mechanism ensures that the user provides a value before allowing the form to be submitted. If a required field is left empty, an error message is displayed, prompting the user to provide the necessary information.
How can you specify the minimum and maximum values for an input field using the min and max attributes?
The min and max attributes are used to specify the minimum and maximum values for an input field, respectively. These attributes are commonly used with input types such as number, date, time, range, and datetime-local. By setting the min attribute to a specific value, you can enforce that the user enters a value greater than or equal to that minimum. Similarly, by setting the max attribute, you can enforce that the user enters a value less than or equal to that maximum. These attributes work together with the browser's built-in form validation to ensure that the user enters valid and acceptable values within the specified range.
What is the purpose of the placeholder attribute in HTML?
The placeholder attribute is used to provide a short hint or example of the expected value in an input field. It is displayed as a temporary placeholder text inside the input field, typically in a lighter color or different style, to guide users on what kind of information is expected. The placeholder text disappears as soon as the user starts typing or focuses on the input field. It is particularly useful for providing context or format examples for input fields like search boxes, email addresses, phone numbers, or any field where the expected input might not be immediately obvious.
How can you specify the step size for a numeric input field using the step attribute?
The step attribute is used to specify the increment or decrement value for a numeric input field. It is typically used with input types such as number and range. By specifying the step attribute, you define the size of the intervals or steps that the user can increment or decrement the value. For example, setting step="2" on a number input field would allow the user to select only even numbers. Similarly, setting step="0.5" would enable selection with half-unit increments. This attribute helps to enforce specific step sizes and provides finer control over numeric input fields.
What does the autofocus attribute do in HTML? How is it used?
The autofocus attribute is used to automatically set the focus on an input field or element as soon as the web page loads. When an element has the autofocus attribute, it gains focus automatically without the user having to click or interact with it explicitly. This attribute is particularly useful for improving user experience and convenience, especially when there is a single input field on a page that requires immediate user attention.
How can you specify a default value for an input field using the value attribute?
The value attribute is used to specify a default value for an input field. When an input field has the value attribute set, it displays the specified default value when the page loads. The user can choose to accept the default value or modify it as needed. This attribute is commonly used with input types like text, number, email, checkbox, and others. It is important to note that the value attribute does not restrict the user from entering different values; it simply sets the initial value for the input field.