DEV Community

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

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!

Discussion (52)

Collapse
thormeier profile image
Pascal Thormeier

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

Collapse
inhuofficial profile image
InHuOfficial • 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
inhuofficial profile image
InHuOfficial • 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
CodeOz 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
inhuofficial profile image
InHuOfficial

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
inhuofficial profile image
InHuOfficial • 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!

Thread Thread
posandu profile image
Posandu

This will be fixed soon :( github.com/forem/forem/issues/15086

Collapse
codeoz profile image
CodeOz Author

happy to show you this ;D

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
CodeOz 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
CodeOz 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
CodeOz 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
CodeOz 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
CodeOz 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
CodeOz 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
CodeOz Author

Very happy to help you ๐Ÿ˜

Collapse
justiceorogun profile image
Justice Orogun

This is awesome!

Collapse
codeoz profile image
CodeOz Author

thanks you ! happy to help you ;D

Collapse
chukwuma10 profile image
chukwuma10

Fantastic. Never know this attributes exist. Thanks

Collapse
codeoz profile image
CodeOz Author

Very happy to help you bro ;D

Collapse
benkalio profile image
Tennyson Ben-kalio

Very helpful.. kbd and details will be useful.

Collapse
codeoz profile image
CodeOz Author

Thanks for your comment ๐Ÿ˜

Collapse
walidulhasan profile image
Walidulhasan boniamin

good post

Collapse
codeoz profile image
CodeOz Author

Thank you a lot ๐Ÿ˜

Collapse
volcareso profile image
volcareso

Awesome, thanks

Collapse
codeoz profile image
CodeOz Author

Happy to help you bro ๐Ÿ˜

Collapse
oumaymasghayer profile image
Oumayma JavaScript developer

Thank you for this! Very helpful.

Collapse
codeoz profile image
CodeOz Author

Happy to help you ๐Ÿ˜

Collapse
diegocs2410 profile image
Diegocs2410

Thanks You So much!

Collapse
codeoz profile image
CodeOz Author

Happy to help you bro !

Collapse
haguezoum profile image
Hassan Aguezoum

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

Collapse
codeoz profile image
CodeOz Author

thanks to help you ;D

Collapse
zava810 profile image
viml kumar

for translation & transliteration also there should be code="ascii5/ascii8/unicode" attribute to html tag .

Collapse
zahab profile image
Zahab Kakar

Awesome, Thanks for sharing!

Collapse
codeoz profile image
CodeOz Author

Happy to help you ๐Ÿ˜

Collapse
akrambzgh profile image
Akram Bouzoualegh

Tahnks man, i need this attributes very much

Collapse
natriumdev profile image
NatriumDev

These are not attributes. These are tags. geeksforgeeks.org/tags-vs-elements...

Collapse
ramahadam profile image
Mohamed Adam

Thankyou I was looking for bdo attrib and here it is

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