HTML Global Attributes – What are they?

Html global attributes is the topic of discussion today. In HTML, global attributes can be used on any element. HTML global attributes are properties that are carried by all HTML elements; however, they may have no impact on particular components. On both standard and non-standard elements, global properties are given.

Non-standard elements must allow these attributes, even if utilizing them makes your page non-HTML5-compliant.

Example:
HTML5-compliant browsers, hidden content identified as <foo hidden>…content…</foo>, despite the fact that <foo> is not a legitimate HTML element.

Table Of Content-

HTML Global Attributes List

Following is the list of the Global Attributes:

AttributeOverview
accesskeyTo activate/focus an element, indicate a shortcut key.
classThis attribute assigns one or more class names to an element. (refers to a style sheet class)
contenteditableIndicates the availability of an element’s content to be edited.
data-*Designed to contain custom data private to the page or application in Html global attributes.
dirProvides the direction in which text should be displayed in an element.
draggableDetermines whether an element can be dragged.
hiddenThis attribute indicates that an element is no longer relevant or that it has not yet been considered.
idProvides an element’s unique identification in Html global attributes.
langThis property indicates the language which will display the content of the element.
spellcheckDetermine if or not you should check the element’s spelling and grammar.
styleProvides an element with an inline CSS style.
tabindexDetermines the tabular hierarchy of an element.
titleProvides additional details about an element.
translateDetermine if or not an element’s content needs to be translated.
autocapitalizeIt uppercases information that has been entered or changed by the user on its own.
autofocusWhen a page loads, an element can be told to receive focus using the autofocus attribute in HTML. It carries the boolean attribute.
contextmenuContextmenu for this element is specified by the id of the containing< menu>.
enterkeyhintIt suggests what label or icon to display while hitting keys on a virtual keyword.
inputmodeThe primary purpose of this tag is to give browsers a tip regarding the virtual keyboard settings to use while modifying this element or its contents.
isIt states that a registered custom built-in element has the same behaviour as conventional HTML.
itemidIt is a specific item’s universally recognised identification.
itempropIt gives an item new properties.
itemscopeIt uses item types to make sure that a block’s HTML is related to a certain item.
itemtypeThe URL vocabulary used to define itemprops is described.
nonceA content security policy uses a digital nonce to check if a given fetch can continue.
partIt is a list of the component names of the element that is divided by spaces.
slotIt is utilized to provide an element a spot in a shadow DOM shadow tree.

HTML Global Attributes Benefits

HTML global attributes offer numerous advantages, some of them are given below:

  • Simplified Code: Using global attributes can help developers create more streamlined, readable, and maintainable code.
  • Improved Accessibility: Global attributes can enhance accessibility features, such as screen readers, making web content more inclusive to people with disabilities.
  • Increased Flexibility: Global attributes are versatile and can be applied to any HTML element, providing greater flexibility in designing and styling web pages.
  • Improved SEO: Proper use of global attributes can improve search engine optimization (SEO) by providing additional information about the page’s content.
  • Consistency: Consistent use of global attributes throughout a website ensures a uniform user experience for visitors.

HTML Attribute contenteditable:

Regardless of whether the HTML element is input or not, this is used to specify whether the content can be altered by the user. As a result, the browser customizes its widgets and enables HTML editing.

There are two values for this variable: True and False

true: This means that the content can be edited

false: This means that the content cannot be edited

Example: 

<!DOCTYPE html> <html> <body> <p contenteditable="true">This paragraph is contenteditable.</p> <p contenteditable="false">This paragraph is not contenteditable.</p> </body> </html>

HTML Attribute access key:

An access key is employed to assign a shortcut to focus on any HTML element, such as a keyboard key.

Contains a space-separated list of characters.

Example: 

<!DOCTYPE html> <html> <body> <a href="https://www.mrexamples.com/html/" accesskey="h">HTML Tutorial</a> <a href="https://www.mrexamples.com/python/" accesskey="c">Python Tutorial</a> </body> </html>

Depending on the browser, there is a different way to use the accesskey attribute.

For example, in Chrome, Safari, etc, ALT + accesskey is pressed to focus on the HTML element, while in Firefox, ALT + SHIFT + accesskey is used.

Using ALT + h will also focus the hyperlink text in the HTML Interactive Course within the above HTML code.

HTML Attribute dir:

The dir attribute is used to specify the direction of text within HTML elements like <div>, <span>, <p> and many more.

There are also a few values associated with it, which are listed below:

ltr: The ltr attribute is used to identify languages written from left to right, like English.

rtl: The rtl attribute is used to identify languages written from right to left, like Arabic.

auto: In this case, the application (browser) makes the decision. In order to apply that directionality to the whole element, it analyzes the characters inside the element until it finds one with significant directionality.

Example: 

<!DOCTYPE html> <html> <body> <p dir="ltr">This text will appear left to right on browser.</p> <p dir="rtl">This text will appear right to left on browser.</p> <p dir="auto">This text will appear whatever the browser indicates it to be.</p> </body> </html>

HTML Attribute class:

The class attribute is one of the most commonly used global attributes, used for specifying class selectors when using CSS style classes. It is also used when handling JavaScript events.

To illustrate how the class attribute is used in HTML tags, here is an example:

Example: 

<!DOCTYPE html> <html> <body> <div class="class1">This div has a class named class1.</div> <p class="class2">This paragraph has class named class2.</p> </body> </html>

HTML Attribute data-*:

Based on this attribute, you can build a custom attribute called custom data attributes, which can be utilized to describe any useful data in HTML tags.

For a better understanding, let’s see the following example:

Example: 

<!DOCTYPE html> <html> <body> <p>Choose a Car: <select> <option data-vehicle-type="SUV" value="GLE350">Mercedes GLE 350</option> <option data-vehicle-type="Coupe" value="E450">Mercedes E 450</option> <option data-vehicle-type="AMG" value="GT53">Mercedes GT 53</option> </select> </p></body> </html>

HTML Attribute tabindex:

If sequential keyboard navigation is required, it identifies at which position an element should take part in taking input focus.

These values are contained in it:

negative: This tells us that the element is focusable but unreachable via sequential keyboard navigation in Html global attributes.

0:In this value, focusable elements are also reachable through sequential keyboard navigation.

positive: It implies that the element must be focusable and reachable using sequential keyboard navigation.

In the same sequence in which the elements are focused is the rising value of the tabindex.

Consider the following example:

Example: 

<!DOCTYPE html> <html> <body> <div tabindex="1">Mr Examples</div><br> <div tabindex="-1">Tesla</div><br> <div tabindex="0">Walmart</div> <script> document.getElementsByTagName('div')[0].focus(); </script> <p tabindex="4"><b>Advice:</b> Use your keyboard's "Tab" button to navigate the elements.</p> </body> </html>

HTML Attribute draggable:

The draggable attribute determines if the element can be dragged or not when it comes to Html global attributes.

There are two values for this variable: True and False

true: This implies that elements may be dragged.

false: This implies that elements cannot be dragged.

Here is the detailed example of the draggable in which an image can be dragged into the box:

Example: 

<!DOCTYPE HTML> <html> <head> <style> #firstDiv{ width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; margin: 10px 0; } </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="firstDiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag-image-1" src="https://mrexamples.com/wp-content/uploads/html_images/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>

HTML Attribute title:

In addition, further details about the HTML element it refers to can be found in the text of this attribute.

Hovering over any HTML element with the title attribute will display the text specified in the title attribute.

Taking the following example:

Example: 

<!DOCTYPE html> <html> <body> <h2 title="It is employed to assign a shortcut to focus on any HTML element.">Accesskey</h2> <p>Using ALT + h will also focus the hyperlink text in the HTML Interactive Course within the above HTML code.</p> </body> </html>

HTML Attribute translate:

An element’s attribute value and its text value can be translated or not using this attribute

This attribute has two values:

An empty string and yes imply that an element is going to be translated.

No means that the element won’t be translated.

Here is an basic example of translate attribute:

Example: 

<!DOCTYPE html> <html> <body> <p translate="no">I don't want this translated!</p> <p>You can translate this into any language you want.</p> </body> </html>

HTML Attribute autocapitalize:

With this attribute, you can control if the user’s text will be capitalized automatically, or what kind of capitalization will be implemented.

The following predefined values are available for configuring its functionality:

off or none: This demonstrates that there has been no capitalization.

characters: This specifies that, in this case, all characters should be uppercase by default.

word: This implies that each word’s first letter is capitalized, and all other letters are lowercase.

on or sentences: This demonstrates that a sentence’s first letter will be in uppercase and all other letters in lowercase.

Many browsers currently do not accept this attribute.

Here is an example:

Example: 

<!DOCTYPE html> <html> <body> <input type="text" autocapitalize="words" name="subject" value="John Smith"> </body> </html>

HTML Attribute spellcheck:

A spelling check can be performed on an element using this attribute as it comes to Html global attributes.

Below are its values:

true: This specifies that spelling errors should be checked on elements.

false: This specifies that spelling errors should not be checked on elements.

Here is the basic example of the spellcheck attribute:

Example: 

<!DOCTYPE html> <html> <body> <p contenteditable spellcheck="true">Thie spellung will be checkd fur thsi exampull when you try to edit it.</p> <p contenteditable spellcheck="false">Thie spellung will be nto checkd fur thsi exampull when you try to edit it.</p> </body> </html>

HTML Attribute id:

IDs are unique identifiers that are assigned for entire HTML documents with the id attribute.

It mainly serves to identify an element when linking, scripting, or styling it. Like the class global attribute, this is one of the most widely used Html global attributes.

Here is the basic example of the id attribute:

Example: 

<!DOCTYPE html> <html> <head> <title> Example of Id attribute with CSS </title> <style> #Companies { padding: 40px; background-color: rgb(183, 183, 183); color: rgb(71, 18, 18); text-align: center; } </style> </head> <body> <p> Use CSS to style an element with the id: </p> <h1 id="Companies"> Companies</h1> </body> </html>

HTML Attribute hidden:

When the hidden attribute is assigned to an element, it signifies that the browser should not display it.

HTML elements such as form, CSRF tokens or other important HTML elements that should not be made visible to users can be hidden with this attribute.

Here is the basic example of the hidden attribute:

Example: 

<!DOCTYPE html> <html> <body> <p hidden>This will be hidden.</p> <p dir="rtl">This text will appear right to left on browser.</p> </body> </html>

HTML Attribute lang:

Lang is defined for editable and non-editable HTML elements using this attribute.

The value of a lang is made up of two elements, first the lang definition, and then the sub-language definition.

For example en-GB is an abbreviation for British English, and en-US is an abbreviation for American English.

Here is a complete list of Lang code reference.

Here is the basic example of the lang attribute:

Example: 

<!DOCTYPE html> <html> <body> <p lang="en-GB">This is British English.</p> </body> </html>

HTML Attribute style:

Using this attribute, you can specify the styling rules for any element using implied CSS code.

Style attributes can be specified within an HTML element, however it is recommended to do so in a separate CSS file.

Style attributes and all styles tags let users specify CSS style parameters within HTML elements and documents separately.

Consider the following example:

Example: 

<!DOCTYPE html> <html> <body> <h1 style="color:gray;">This heading is in gray color.</h1> <p style="color:maroon;">This paragraph will be displayed in maroon color.</p> </body> </html>

HTML Attribute itemprop:

The itemprop attribute lets you add properties to an element. Every HTML element has an itemprop attribute; where an itemprop is a name-value pair.

HTML documents use it to structure information and specify additional meta information.

Here is an example of the itemprop:

Example: 

<!DOCTYPE html> <html> <body> <div itemscope itemtype="http://mrexamples.com/"> <h1 itemprop="name">Mr Examples</h1> <span>Course: <span itemprop="section">Python.</span> </span> <span itemprop="sex">Male</span> <span itemprop="rollno">CS-489-41157</span> </div> </body> </html>

HTML Attribute itemscope:

The itemscope Html global attributes defines what metadata is attached to an item.

A new item is created when the itemscope attribute is defined for an element, which results in name-value pairs.

Below is the example of itemscope with itemtype:

Example: 

<!DOCTYPE html> <html> <body> <div itemscope itemtype="http://mrexamples.com/"> <h1 itemprop="name">Mr Examples</h1> <span>Course: <span itemprop="section">Python.</span> </span> <span itemprop="sex">Male</span> <span itemprop="rollno">CS-489-41157</span> </div> </body> </html>

HTML Attribute itemtype:

In Html global attributes, Data structures uses itemtype attribute to identify the URL of the vocabulary that defines item properties.

In other words, itemscope determines where the vocabulary set by itemtype will be active within the data structure.

Here is an example of the itemtype:

Example: 

<!DOCTYPE html> <html> <body> <div itemscope itemtype="http://mrexample.com"> <span itemprop="lang" itemtype="http://mrexample.com/python"> Mr Examples is a website for people to learn. </span><br><br> Course: <span itemprop="course"> Python and HTML </span> </div></body> </html>

HTML Attribute autofocus:

In HTML, the autofocus attribute determines whether the element should be focused when the page loads. The attribute is a boolean.

Here is an example of the autofocus attribute:

Example: 

<!DOCTYPE html> <html> <body> <form action> <select name="company" autofocus> <option value="">Select a Company</option> <option value="walmart"> Walmart </option> <option value="cvs"> CVS Health </option> <option value="alphabet"> Alphabet </option> </select> <br> <button type="submit">Submit</button> </form> </body> </html>

HTML Attribute contextmenu:

A contextmenu global attribute specifies the id of a menu to use as the contextual menu.

An occurrence of a context menu occurs when the user interacts with a program, such as right-clicking.

Below is an example of the contextmenu:

Example: 

<!DOCTYPE html> <html> <head> <style> .menuclass { background: maroon; padding: 10px; } </style> </head> <body> <div contextmenu="mymenu" class="menuclass"> <p>The context menu will appear when you right-click inside this box! </p><menu type="context" id="mymenu"> <menuitem label="Mr Examples" onclick=""></menuitem> <menuitem label="Google" onclick=""></menuitem> <menuitem label="Walmark" onclick=""></menuitem> <menuitem label="Etsy" onclick=""></menuitem> </menu> </div> <p>You can only use this example with Firefox at the moment!</p> </body> </html>

HTML Attribute enterkeyhint:

On computer keyboards, the enterkeyhint attribute indicates what action label to display when pressing the enter key.

Using this Html global attributes, authors can modify how the enter key is presented to make it more user-friendly.

Enterkeyhint has these following values:

done: It will close when there is no more input to be made.

enter: A new line should be used when there is more to write.

go: After we have completed writing the form, we can move on to the next target.

search: It will be useful when we have to search for anything after typing.

send: Messages are sent using it.

next: It takes the user to the next field where text can be entered.

previous: The user will be redirected to the previous text field.

Here is an example that describes some of the enterkeyhint attributes:

Example: 

<!DOCTYPE html> <html> <body> <form> <input placeholder="Next will replace Enter" enterkeyhint="next"> <input placeholder="Clicking the Enter button will change the state to previous" enterkeyhint="previous"> <input placeholder="Go will replace Enter" enterkeyhint="go"> <input placeholder="Send button will replace Enter button" enterkeyhint="send"> </form> </body> </html>

HTML Attribute inputmode:

It indicates the type of virtual keyboard configuration that is used to edit an element’s content.

The tag is used when the input is contenteditable and is most commonly used with the input tag.

Here is an basic example of the inputmode attribute:

Example: 

<!DOCTYPE html> <html> <body> <h3>HTML inputmode Attribute</h3> Name : <input type="text" id="text" inputmode="text"><br> Phone No. : <input type="tel" id="phone" inputmode="tel"><br> Email : <input type="email" id="email" inputmode="email"><br> Age : <input type="number" id="age" inputmode="numeric"><br> </body> </html>

HTML Attribute is:

It specifies the behaviour of the standard element in the same way that a Javascript element would behave if it had been registered as a custom built-in element.

HTML Attribute itemid:

Items can be identified using this attribute since it is a unique and global identifier.

Here is an example of the itemid:

Example: 

<!DOCTYPE html> <html> <body> <dl itemscope="" itemtype="https://www.mrexamples.com/python" itemid="urn:crn-01-2023"> <dt>Name </dt> <dd itemprop="title">Python</dd> <dt>Instructor </dt> <dd itemprop="author">Mr example</dd> <dt>Start date</dt> </dl> </body> </html>

HTML Attribute nonce:

Content Security Policy uses the nonce global attribute to determine whether or not a given fetch will be permitted on a particular element depending on a cryptographic nonce (“number used once”).

Lets take a look at the example:

Example: 

<!DOCTYPE html> <html> <body> <script nonce="EDNnf03nceIOfn39fn3e9h3sdfa"> // Trying to remove some inline code, but I'm having trouble </script> </body> </html>

HTML Attribute slot:

An element’s slot in a shadow tree is determined by this attribute.

To link an element with a slot attribute to the slot, add an element with a slot attribute whose name attribute matches the slot attribute’s value.

Here is an basic example of the slot attribute:

Example: 

<!DOCTYPE html> <html> <body><template> <h1><slot name="heading"></slot></h1> <dl> <dt><slot name="t-1"></slot></dt> <dd><slot name="d-1"></slot></dd> <dt><slot name="t-2"></slot></dt> <dd><slot name="d-2"></slot></dd> <dt><slot name="t-3"></slot></dt> <dd><slot name="d-3"></slot></dd> </dl> </template> <div> <span slot="heading">Programming Languages</span> <span slot="t-1">Javascript</span> <span slot="d-1">JavaScript is a high-level programming language that is one of the core technologies of the World Wide Web.</span> <span slot="t-2">Python</span> <span slot="d-2">Python is one of the most popular programming languages today and is easy for beginners to learn because of its readability.</span> <span slot="t-3">Go</span> <span slot="d-3">Go was developed by Google in 2007 for APIs and web applications. Go has recently become one of the fastest-growing programming languages due to its simplicity, as well as its ability to handle multicore and networked systems and massive codebases.</span> </div> <script> var dlTemplate = document.querySelector('template').content; var divs = document.querySelectorAll('div');divs.forEach(function(div){ div.attachShadow({ mode: 'open' }).appendChild( dlTemplate.cloneNode(true)) }); </script> </body> </html>

HTML Attribute part:

Part names are listed in the part global attribute, separated by spaces.

It is possible to select and style particular elements in a shadow tree using part names using the pseudo-element ::part.

Here is an example of the part attribute:

Example: 

<!DOCTYPE html> <html> <head> <style type="text/css"> h1 { color: maroon; } tabbed-custom-element::part(tab) { color: maroon; border-bottom: solid 1px; width: 300px; } </style> </head> <body> <h1>Mr Examples</h1> <strong>Part Attribute</strong> <br><br> <template id="tabbed-custom-element"> <div part="tab">Python</div> <div part="tab active">MongoDB</div> <div part="tab">Sql</div> </template> <tabbed-custom-element></tabbed-custom-element> <script> let template = document .querySelector("#tabbed-custom-element"); globalThis.customElements.define( template.id, class extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); this.shadowRoot.appendChild(template.content); } }); </script> </body> </html>

If this article proved to be advantageous enough to boost your educational skills, then do share this article with your friends in order to spread this valuable information with them as well by clicking on the links below.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

Your email address will not be published. Required fields are marked *