DEV Community

Cover image for 7 useful HTML attributes you may not know
Mariana Simon
Mariana Simon

Posted on • Originally published at learnpine.com

7 useful HTML attributes you may not know

HTML is the cornerstone of web development. Yet, many aspiring programmers merely skim the surface and move on to CSS, JS, etc, missing its entire potential.

This is a list of HTML attributes that many beginners don't know, but that can be helpful.

Please, let me know in the comments if you would like to add any other attribute to the list and I'll check it out ;)

 

1) Multiple

 
The multiple attribute allows the user to enter multiple values on an <input>. It is a boolean attribute valid for file or email input types and the <select> element.

For an email input, if and only if the multiple attribute is specified, the value can be a list of comma-separated email addresses. Any whitespace is removed from each address in the list.

For a file input, the user can select multiple files in the as usual (holding down Shift or Crtl).

<input type="file" multiple>
Enter fullscreen mode Exit fullscreen mode

 

2) Accept

 
The <input> element has the accept attribute that allows you to specify the types of files the user can upload.

You need to pass it a string containing a comma-separated list of unique file type specifiers.

You can also use it to specify only audio, image, or video format.

<input type="file" accept=".png, .jpg">
Enter fullscreen mode Exit fullscreen mode

 

3) Contenteditable

 
contenteditable is a global attribute (common to all HTML elements) that makes the HTML content editable by the user or not. However, be careful with changes only made to visible content vs the DOM content.

<div contenteditable="true">I'm a cool editable div ;)</div>
Enter fullscreen mode Exit fullscreen mode

editable div

 

4) Spellcheck

 
The spellcheck is another global attribute that you can use to check spelling and grammar on HTML elements such as input fields and other editable elements.

Note: Typically non-editable elements are not checked for spelling errors, even if the spellcheck attribute is set to true and the browser supports spellchecking.

<p contenteditable="true" spellcheck="true">
Thanks furr checkinng my speling :)</p>
Enter fullscreen mode Exit fullscreen mode

 

5) Translate

 
translate tells the browser whether the content should be translated or not.

For instance, you can use it to prevent Google Translate from automatically trying to translate your company's or brand's name.

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

 

6) Poster

 
Use the poster attribute to specify an image to be shown while the video is downloading, or until the user hits the play button.

If the image isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

<video controls 
src="https://bit.ly/3nWh78w"
poster="posterImage.png">
</video>
Enter fullscreen mode Exit fullscreen mode

 

7) Download

 
Use the download attribute combined with an <a> element to instruct browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file.

You can also specify the file name.

<a href="index.html" download="fileName">Download me :)</a>
Enter fullscreen mode Exit fullscreen mode

 
 

About me, let's connect! 👋👩‍💻

 
I'm an avid learner and I love sharing what I know. I teach coding live for free 👉 here and I share coding tips on my Twitter account . If you want more tips, you can follow me 😁
 
 

Discussion (78)

Collapse
okrohan profile image
Rohan Salunke

Thanks for writing!
Extending #3: You could also use document.designMode = "on" to make all content editable which really helps while prototyping your html page.

Collapse
manutopik profile image
Emmanuel Salomon

I've created a bookmark to toggle designMode :
javascript:(function(){document.designMode=document.designMode==="on"?"off":"on"})();
I realy often use it!

Collapse
raghad profile image
raghad-farhud

can i ask what is designMode ?

Thread Thread
gaizkamg profile image
gaizkamg
Thread Thread
maniamartial profile image
Joseph Mania

Thanks lol

Collapse
simonpaix profile image
Mariana Simon Author

Thanks for the tip Rohan!

Collapse
antontsvil profile image
Anton T

Wow! Had no idea, cool tip!

Collapse
beaufort420 profile image
JP Beaufort

Over the 2 to 3 years of coding and programming, I completely forgot the power HTML gave me alone. Today it's easy to add css and js to a website, but before I even knew of frameworks and responsive design, HTML helped me get 89% for my Practical Assignments in our school's computer class. So go out and learn more of HTML, it's really not that boring.

Collapse
simonpaix profile image
Mariana Simon Author

True. You can do a lot with HTMl only.

Collapse
felixhtoo30 profile image
Htoo Ant Hlaing (Felix)

Yes, can do a lot except hacking NASA.
Just kidding 😁

Thread Thread
maniamartial profile image
Joseph Mania

without datacommunication and Networking how can ur mid associate with NASA🤣🤣🤣just kidding

Thread Thread
felixhtoo30 profile image
Htoo Ant Hlaing (Felix)

Hey, we have Inspector. It's enough 😎
LOL 😂

Collapse
miguelmj profile image
MiguelMJ

This was useful!

Collapse
simonpaix profile image
Mariana Simon Author

Glad you liked it, Miguel!

Collapse
oscarrodar profile image
Oscar Rodriguez Arroyo • Edited on

Thanks for sharing!

In case you want to use it within your application, check if it's supported by your target browsers by going into caniuse.com/ and just typing the attribute. For example, Accept is not supported by most browsers.

Collapse
simonpaix profile image
Mariana Simon Author

Thanks Oscar! Nice tip, always good to check caniuse. Accept is supported by the major browsers (ie, edge, chrome, firefox, safari) :)

Collapse
shafqatkp profile image
shafqatkp

Thanks for this helpful tips

Collapse
simonpaix profile image
Mariana Simon Author

My pleasure :)

Collapse
ardhityawiedhairawan profile image
Ardhitya Wiedha Irawan

Wow.. thank you. This is cool!

Collapse
tohka200213 profile image
tohka20-0213 • Edited on

Yet, many aspiring programmers merely skim the surface and move on to CSS, JS, etc, missing its entire potential.

Right!

Some people say that HTML is not programming, but they don't know the depth of it. They only know the tip of the iceberg. HTML attributes are so deep and interesting, and HTML elements are as well.

Collapse
simonpaix profile image
Mariana Simon Author

Exactly! Getting to know the basics well is really helpful :)

Collapse
ganwani_kamal profile image
kamal ganwani

great one

Collapse
simonpaix profile image
Mariana Simon Author

Thanks, Kamal! Appreciate the feedback ;

Collapse
aohonze profile image
A ZE

The download attribute of an <a/> element is very useful!

Collapse
simonpaix profile image
Mariana Simon Author

It's one of my favorites!

Collapse
szened profile image
szened

The tiny little gems of HTML. 😌👍🏼
Thanks!

Collapse
simonpaix profile image
Mariana Simon Author

Thanks, szened ;)

Collapse
4samayal profile image
Samayal 4 You

Thats great. Useful article. Thanks for sharing..!!!!
link
link
link
link
link

Collapse
renanlazarotto profile image
Renan Lazarotto

I've been working with web development for a solid 5 years and I've never heard of some of those. 3, 5 and 7 would've saved me quite some time. Thanks a lot for this!

Collapse
simonpaix profile image
Mariana Simon Author

Nice to hear it helps, Renan ;)

Collapse
jotajeff profile image
Jeferson Silva

parabeńs.... excelente artigo. congratulations, excelent article.

Collapse
simonpaix profile image
Mariana Simon Author

Valeu pela força, Jeferson!
Thanks :)

Collapse
ayabouchiha profile image
Aya Bouchiha

Good work!

Collapse
simonpaix profile image
Mariana Simon Author

Thanks, Aya :)

Collapse
easyvipin profile image
Vipin Chandra

Ohh i have learnt something new today !!
time to use poster and accept :)

Collapse
iv4r profile image
iv4r

Clap!

Collapse
curiousglimmerroot profile image
curiousglimmerroot

Thanks for the hidden gem! Especially loved #1 and #3!

Collapse
jefaokpta profile image
Jefferson Alves

Thanks for share dude!

Collapse
simonpaix profile image
Mariana Simon Author

Valeu!

Collapse
mwangi_thiga profile image
Mwangi Thiga

Wow. God bless you.

Collapse
simonpaix profile image
Mariana Simon Author

Glad you liked it, Mwangi.

Collapse
amircahyadi profile image
Amir-cahyadi

Thanks for your info 👍

Collapse
jcsmileyjr profile image
JC Smiley

Great list

Collapse
wisdomudo profile image
WISDOMUDO • Edited on

I love this. Thanks for sharing!

Collapse
pterpmnta profile image
Pter Pmnta

Great post!!, HTML has many things that mostly people ignore at all.

Collapse
themarcelolewin profile image
Marcelo Lewin

These are really great tips! Thanks for sharing!

Collapse
simonpaix profile image
Mariana Simon Author

Thanks for the feedback, Marcelo! It means a lot :)

Collapse
pjsenpai profile image
Prayas Jadli

Thanks for telling , i didn't know any of them ...

Collapse
simonpaix profile image
Mariana Simon Author

I'm glas it helped!

Collapse
itsraghz profile image
Raghavan alias Saravanan Muthu

Nice article. Thanks for sharing.

Collapse
fathah profile image
Fathah Cr

Awesome 😎

Collapse
jack_garrus profile image
Nadia Guarracino

Already knew about contentEditable but the others are totally new for me! Thanks a lot for sharing

Collapse
andberry profile image
Andrea Berardi

Thank you so much for sharing!

Collapse
raghad profile image
raghad-farhud

wow and i thought that html is a basic language but there's still a lot of things i dont't know about