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!
Top comments (49)
Awesome, I didn't know about
kbd! That might come in handy, thank you!It even works in markdown!, sadly it is not very accessible on DEV as they make the text smaller rather than making the surrounding box bigger.
I'm big enough :O (Hacking)
Oh that hurts my very soul, a
<h1>in a<kbd>element...why would you do that to me? I thought we were friends 🤣Well I knew it would descend into madness, but i wasn't expecting a re-enactment of the famous StackOverflow RegEx answer so early on!
It has completely broken my notification screen and the comments here 🤣, kudos!
happy to show you this ;D
You can use lots of HTML elements on DEV
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?
Pay attention about
contenteditable, if you copy/paste text in it from apps like Word. It doesn't escape the formatting/stylesnice comment thanks !
I did not plan on doing any code today but now I obviously need to try kbd:)
nice to help you :D
May I translate and introduce this article on my blog?
Thank you :D
0115765.com
if you put the original source link of course ;D
Thanks a lot!
I'll share it with Japanese people!
Nice bro! send me the link when you made it :D
It was introduced on this page.
0115765.com/archives/5407
It's basically written from the ground up in Japanese, so I figure it's pretty straightforward! Thank you!
Nice 😁
Nice article !
kbd doesn't work in latest chrome.
thank you so much
Very happy to help you 😁
Some comments have been hidden by the post's author - find out more