DEV Community

Cover image for 7 HTML attribute you should know right now!
Code Oz
Code Oz

Posted on • Updated on

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>
Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Image description

contenteditable

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

<p contenteditable="true">This is an editable paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Image description

translate

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

<p translate="no">CodeOz</p>
Enter fullscreen mode Exit fullscreen mode

color picker

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

<input type="color">
Enter fullscreen mode Exit fullscreen mode

Image description


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!

Oldest comments (49)

Collapse
 
grmlgrml profile image
GrmlGrml

Nice article !

Collapse
 
thormeier profile image
Pascal Thormeier

Awesome, I didn't know about kbd! That might come in handy, thank you!

Collapse
 
codeoz profile image
Code Oz

happy to show you this ;D

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

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.

Collapse
 
posandu profile image
Posandu

 

I'm big enough :O (Hacking)

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Oh that hurts my very soul, a <h1> in a <kbd> element...why would you do that to me? I thought we were friends 🤣

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
grahamthedev profile image
GrahamTheDev • Edited

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!

 
grahamthedev profile image
GrahamTheDev • Edited

 

 

 

You can use lots of HTML elements on DEV


 

 

 



Collapse
 
billraymond profile image
Bill Raymond

I did not plan on doing any code today but now I obviously need to try kbd:)

Collapse
 
codeoz profile image
Code Oz

nice to help you :D

 
codeoz profile image
Code Oz

😂

Thread Thread
 
siddharthshyniben profile image
Siddharth • Edited

You can mix anything except XSSy stuff


You can go small



You can go smaller




You can go even smaller









Invisible

You can go smaller

You can go even more

You still here?

Go do your work

Why are you still here?

More importantly, how are you still reading this?







Invisible

You can go smaller

You can go even more

You still here?

Go do your work

Why are you still here?

No, you cant read this. It's impossible. What, you are reading this?
A mark to help you read

























Collapse
 
zahab profile image
Zahab Kakar

Awesome, Thanks for sharing!

Collapse
 
codeoz profile image
Code Oz

Happy to help you 😁

Collapse
 
ichii731 profile image
Ichi

May I translate and introduce this article on my blog?
Thank you :D
0115765.com

Collapse
 
codeoz profile image
Code Oz

if you put the original source link of course ;D

Collapse
 
ichii731 profile image
Ichi

Thanks a lot!
I'll share it with Japanese people!

Thread Thread
 
codeoz profile image
Code Oz

Nice bro! send me the link when you made it :D

Thread Thread
 
ichii731 profile image
Ichi

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!

Thread Thread
 
codeoz profile image
Code Oz

Nice 😁

Collapse
 
diegocs2410 profile image
Diegocs2410

Thanks You So much!

Collapse
 
codeoz profile image
Code Oz

Happy to help you bro !

Collapse
 
haguezoum profile image
Hassan Aguezoum

Thank you . I didn't know about kdb <3

Collapse
 
codeoz profile image
Code Oz

thanks to help you ;D

Collapse
 
vladi160 profile image
vladi160

Pay attention about contenteditable, if you copy/paste text in it from apps like Word. It doesn't escape the formatting/styles

Collapse
 
codeoz profile image
Code Oz

nice comment thanks !

Collapse
 
oumaymasghayer profile image
Oumayma JavaScript Developer

Thank you for this! Very helpful.

Collapse
 
codeoz profile image
Code Oz

Happy to help you 😁

Collapse
 
codeoz profile image
Code Oz

Happy to help you bro 😁

Collapse
 
walidulhasan profile image
Walidulhasan boniamin

good post

Collapse
 
codeoz profile image
Code Oz

Thank you a lot 😁

Collapse
 
benkalio profile image
Tennyson Ben-kalio

Very helpful.. kbd and details will be useful.

Collapse
 
codeoz profile image
Code Oz

Thanks for your comment 😁

Collapse
 
chukwuma10 profile image
chukwuma10

Fantastic. Never know this attributes exist. Thanks

Collapse
 
codeoz profile image
Code Oz

Very happy to help you bro ;D

Some comments have been hidden by the post's author - find out more