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

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!