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
☕️ 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!