5 Helpful Html Global Attributes
Tags: html, webdev, codenewbie, beginners
Published: 2021-07-29 23:02:35

Hello,
I'm [**Aya Bouchiha**](https://t.me/AyaBouchiha),
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey)

*Code example*:
```html
<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*:
```html
<!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:*

![Aya Bouchiha global attributes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zg2nir27p8g8o5kls3fg.PNG)
 
## 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.

```html
<!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>
```

*Output:*

![Aya Bouchiha global attributes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chht1t6qsyxv6yqacao5.PNG)

## title

**title**: lets you show more information about an HTML element.

```html
<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>
```

![Aya Bouchiha global attributes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltb9x9fwordkivcfdijn.PNG)

## 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.

```html
<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:*

![Aya Bouchiha global attributes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/quln2u8drtpu5psdt6xj.PNG)

### 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: developer.aya.b@gmail.com
+ telegram: [Aya Bouchiha](https://t.me/AyaBouchiha)

Have a great day!