7 HTML attribute you should know right now!
Tags: javascript, webdev, html, beginners
Published: 2021-10-15 13:52:52

If you are web developper you are using HTML for sure! You are using a lot of HTML attribute, but today you will learn some news!

### bdo

The <bdo> HTML element overrides the current directionality of text, so that the text within is rendered in a different direction ! You can use `dir` option to indicate this direction.

- `ltr` -> Indicates that the text should go in a left-to-right direction

- `rtl` -> Indicates that the text should go in a right-to-left direction.

```html
<p>
    <bdo dir="ltr">This text will go left to right.</bdo>
</p>
<p>
    <bdo dir="rtl">This text will go right to left.</bdo>
</p>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5rc62txfwj59jns66pg6.png)

### kbd

If you need to show shortcut to your user, you should use `kbd`! It represents a span of inline text denoting textual user input from a keyboard.

```html
<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render a browser page.</p>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0y7vjkz864o6evzfsa8c.png)
 

### details

The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element.

```html
<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpdg7kvka9nngdw8jcns.gif)
 
### contenteditable

The contenteditable attribute specifies whether the content of an element is editable or not! 

```html
<p contenteditable="true">This is an editable paragraph.</p>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9v4iuq2j0gmby2uxlpn.gif)
 
### abbr

The `<abbr>` tag defines an abbreviation or an acronym, like "HTML", "CSS" and show the complete title when hover this tag.

```html
<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gc1l15vbmhgpca25hul.gif)

### translate

Indicate to HTML is this content need to be translated or not (by google translate for example).

```html
<p translate="no">CodeOz</p>
```

### color picker

Yes as you just learn, you can easily create a color picker! 👇

```html
<input type="color">
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xuoaorxcj8ogrmbnpcmk.gif)
 


---

I hope you like this reading!

🎁 You can get my new book `Underrated skills in javascript, make the difference` for FREE if you follow me on [Twitter](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🇫🇷🥖 For french developper you can check my [YoutubeChannel](https://www.youtube.com/channel/UCC675U1ZUPFASsK9-FjawtA)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!