DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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!

Top comments (52)

Collapse
 
thormeier profile image
Pascal Thormeier

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

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited on

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
 
code913 profile image
code913 • Edited on

<h1>wait we can use html on dev?</h1>

Thread Thread
 
grahamthedev profile image
GrahamTheDev • Edited on

Β 

Β 

Β 

You can use lots of HTML elements on DEV


Β 

Β 

Β 



Thread Thread
 
code913 profile image
code913 • Edited on

<script>alert("oh no xss");</script>

Thread Thread
 
codeoz profile image
Code Oz Author

πŸ˜‚

Thread Thread
 
siddharthshyniben profile image
Siddharth • Edited on

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
 
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 on

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!

Collapse
 
codeoz profile image
Code Oz Author

happy to show you this ;D

Collapse
 
blanchart profile image
Francisco Blanchart

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).

Collapse
 
abdelrahman_dwedar profile image
β€˜AbdelraαΈ₯man Dwedar πŸ‘¨πŸ»β€πŸ’»πŸ‡΅πŸ‡Έ

Great article, good job. πŸ‘πŸ»

I just want to know;
How can we use <details> in DEV?

Collapse
 
codeoz profile image
Code Oz Author

I think we cannot since DEV didn't implement it!

Collapse
 
abdelrahman_dwedar profile image
β€˜AbdelraαΈ₯man Dwedar πŸ‘¨πŸ»β€πŸ’»πŸ‡΅πŸ‡Έ

Isn't there any way in markdown at least?

Collapse
 
ichii731 profile image
IchiiP

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

Collapse
 
codeoz profile image
Code Oz Author

if you put the original source link of course ;D

Collapse
 
ichii731 profile image
IchiiP

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

Thread Thread
 
codeoz profile image
Code Oz Author

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

Thread Thread
 
ichii731 profile image
IchiiP

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 Author

Nice 😁

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 Author

nice comment thanks !

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 Author

nice to help you :D

Collapse
 
grmlgrml profile image
GrmlGrml

Nice article !

Collapse
 
glin7976 profile image
glin7976

kbd doesn't work in latest chrome.

Collapse
 
sh3baaaaan profile image
mohammed shabaan

thank you so much

Collapse
 
codeoz profile image
Code Oz Author

Very happy to help you 😁

Collapse
 
justiceorogun profile image
Justice Orogun

This is awesome!

Collapse
 
codeoz profile image
Code Oz Author

thanks you ! happy to help you ;D

Collapse
 
chukwuma10 profile image
chukwuma10

Fantastic. Never know this attributes exist. Thanks

Collapse
 
codeoz profile image
Code Oz Author

Very happy to help you bro ;D

Collapse
 
codeoz profile image
Code Oz Author

Happy to help you bro 😁

Collapse
 
benkalio profile image
Tennyson Ben-kalio

Very helpful.. kbd and details will be useful.

Collapse
 
codeoz profile image
Code Oz Author

Thanks for your comment 😁

Collapse
 
walidulhasan profile image
Walidulhasan boniamin

good post

Collapse
 
codeoz profile image
Code Oz Author

Thank you a lot 😁

Collapse
 
oumaymasghayer profile image
Oumayma JavaScript Developer

Thank you for this! Very helpful.

Collapse
 
codeoz profile image
Code Oz Author

Happy to help you 😁

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

🀯

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs