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>
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">
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>
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>
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>
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>
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>
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 😁
Top comments (84)
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.I've created a bookmark to toggle designMode :
javascript:(function(){document.designMode=document.designMode==="on"?"off":"on"})();
I realy often use it!
can i ask what is designMode ?
letmegooglethat.com/?q=designMode
Thanks lol
Thanks for the tip Rohan!
Wow! Had no idea, cool tip!
arre bro mujhe kuch baat karne ka hain ..kidhar baat kare???
???
hey bro can we talk ???
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.
True. You can do a lot with HTMl only.
Yes, can do a lot except hacking NASA.
Just kidding 😁
without datacommunication and Networking how can ur mid associate with NASA🤣🤣🤣just kidding
Hey, we have Inspector. It's enough 😎
LOL 😂
This was useful!
Glad you liked it, Miguel!
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.Thanks Oscar! Nice tip, always good to check caniuse. Accept is supported by the major browsers (ie, edge, chrome, firefox, safari) :)
Thanks for this helpful tips
My pleasure :)
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!
Nice to hear it helps, Renan ;)
great one
Thanks, Kamal! Appreciate the feedback ;
Wow.. thank you. This is cool!
The
download
attribute of an<a/>
element is very useful!It's one of my favorites!
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.
Exactly! Getting to know the basics well is really helpful :)