DEV Community

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

7 HTML attribute you should know right now!

Code Oz on October 15, 2021

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

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!

Collapse
 
codeoz profile image
Code Oz

happy to show you this ;D

 
grahamthedev profile image
GrahamTheDev • Edited

 

 

 

You can use lots of HTML elements on DEV


 

 

 



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

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

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

Very happy to help you 😁

Collapse
 
justiceorogun profile image
Justice Orogun

This is awesome!

Collapse
 
codeoz profile image
Code Oz

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

Very happy to help you bro ;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
 
codeoz profile image
Code Oz

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

Thanks for your comment 😁

Collapse
 
walidulhasan profile image
Walidulhasan boniamin

good post

Collapse
 
codeoz profile image
Code Oz

Thank you a lot 😁

Collapse
 
oumaymasghayer profile image
Oumayma JavaScript Developer

Thank you for this! Very helpful.

Collapse
 
codeoz profile image
Code Oz

Happy to help you 😁

Collapse
 
diegocs2410 profile image
Diegocs2410

Thanks You So much!

Collapse
 
codeoz profile image
Code Oz

Happy to help you bro !

Collapse
 
zahab profile image
Zahab Kakar

Awesome, Thanks for sharing!

Collapse
 
codeoz profile image
Code Oz

Happy to help you 😁

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
 
zava810 profile image
viml kumar

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

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