An Interest In:
Web News this Week
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
5 Helpful Html Global Attributes
Hello,
I'm Aya Bouchiha,
today, we'll talk about some useful HTML global attributes.
Definition of global attributes
global attributes: are Html attributes that can be used on any HTML elements, like title and hidden.
Heplful HTML Global Attributes
accesskey
accesskey: this attribute lets you specify a keyboard shortcut to focus an element.
The way to activate the accesskey depends on the browser and its platform
Code example:
<div> <h2>Lorem</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing </p> <a accesskey="a" href="product/10">more details!</a> </div>
dir
dir: lets you specify the text's direction.
Code example:
<!DOCTYPE html><html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <div> <p dir="rtl">right-to-left</p> <p dir="ltr">left-to-right</p> <p dir="auto">Hello</p> <p dir="auto"> </p> </div> </body></html>
Output:
data-
data-: this is one of the most useful attributes, it lets you store extra and custom data on your HTML tag. In addition, You can access this attribute in CSS, and also Javascript. It should be at least one character, and must not contain any uppercase letters.
<!DOCTYPE html><html> <head> <style type="text/css" media="all"> .address[data-user-country='Morocco']::before { content:attr(data-user-country); display: block; } </style> </head> </head> <body> <address class="address" data-full-name="Aya Bouchiha" data-email="[email protected]" data-job="full stack web developer" data-user-country="Morocco" data-id="26989" data-bg="red" > Posted by <a href="https://t.me/AyaBouchiha"> Aya Bouchiha </a> <br /> Email Address: <a href="mailto:[email protected]"> [email protected] </a> <br /> Phone Number: <a href="tel:+212600000000">+212600000000 </a> <br /> </address> <script> const addressElement = document.querySelector('.address'); const id = document.querySelector('[data-id="26989"]'); // <address class="address" ></address> console.log(id); // Aya Bouchiha console.log(addressElement.dataset.fullName) // [email protected] console.log(addressElement.getAttribute('data-email')) </script> </body></html>
Output:
title
title: lets you show more information about an HTML element.
<div> <h3>Sport</h3> <p>ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto</p> <a href="sport/" title="more details about sport">more details</a></div>
hidden
hidden: indicates that that the element is not yet, or is no longer, relevant, browsers do not display the element with a hidden attribute.
<section> <h4>Title</h4> <p> Hi, <mark hidden>I'm Aya Bouchiha</mark> <br /> This is a simple paragraph </p> <a href="#">more details</a></section>
Output:
Summary
- accesskey: specify a keyboard shortcut to focus an element.
- dir: specify the text's direction.
- data-: store extra and custom data on your html tag.
- title: shows more information about an HTML element.
- hidden: hide an element.
To Contact Me:
- email: [email protected]
- telegram: Aya Bouchiha
Have a great day!
Original Link: https://dev.to/ayabouchiha/5-helpful-html-global-attributes-e8a
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To