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 directionrtl
-> 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
☕️ 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!
Latest comments (49)
Hello, CodeOz, interesting info here, but the title in this post can be a little bit confusing. You are mixing attributes and elements.
bdo, kbd, details (+summary) and abbr are ELEMENTS.
contenteditable, translate and type (with the value "color" in this case) are ATTRIBUTES (which are part of elements).
Great article, good job. 👍🏻
I just want to know;
How can we use
<details>
in DEV?I think we cannot since DEV didn't implement it!
Isn't there any way in markdown at least?
Thankyou I was looking for bdo attrib and here it is
Tahnks man, i need this attributes very much
for translation & transliteration also there should be code="ascii5/ascii8/unicode" attribute to html tag .
kbd doesn't work in latest chrome.
thank you so much
Very happy to help you 😁
These are not attributes. These are tags. geeksforgeeks.org/tags-vs-elements...
This is awesome!
thanks you ! happy to help you ;D
Fantastic. Never know this attributes exist. Thanks
Very happy to help you bro ;D
Very helpful.. kbd and details will be useful.
Thanks for your comment 😁
good post
Thank you a lot 😁
Happy to help you bro 😁
Thank you for this! Very helpful.
Happy to help you 😁
Pay attention about
contenteditable
, if you copy/paste text in it from apps like Word. It doesn't escape the formatting/stylesnice comment thanks !
Some comments have been hidden by the post's author - find out more