7 HTML attribute you should know right now!

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

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

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.

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

details

The 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 element.

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

contenteditable

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

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

abbr

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

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

translate

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

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

color picker

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

<input type="color">

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 and MP me 😁

Or get it HERE

🇫🇷🥖 For french developper you can check my YoutubeChannel

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

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

And you can mark 🔖 this article!