DEV Community

loading...
Cover image for 5 Helpful Html Global Attributes

5 Helpful Html Global Attributes

Aya Bouchiha
Full stack web developer
Updated on ・3 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Output:

Aya Bouchiha global attributes

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="developer.aya.b@gmail.com"
      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:developer.aya.b@gmail.com">
          developer.aya.b@gmail.com
      </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) 
      // developer.aya.b@gmail.com
      console.log(addressElement.getAttribute('data-email')) 
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output:

Aya Bouchiha global attributes

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>
Enter fullscreen mode Exit fullscreen mode

Aya Bouchiha global attributes

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>
Enter fullscreen mode Exit fullscreen mode

Output:

Aya Bouchiha global attributes

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:

Have a great day!

Discussion (6)

Collapse
chrmc7 profile image
Chris ☕️

I did not know about the data attribute, that is very useful. Thank you for posting this 🙏

Collapse
ayabouchiha profile image
Aya Bouchiha Author

You are always welcome 😊@chrmc7

Collapse
hyggedev profile image
Chris Hansen

The Html attr accesskey gave me a few ideas 😉

Collapse
ayabouchiha profile image
Aya Bouchiha Author

Happy to hear that 😁

Collapse
midouwebdev profile image
MidouWebDev

That's so helpful !
Thanks Aya.

Collapse
ayabouchiha profile image
Aya Bouchiha Author

So happy to hear that 😁