These are a collection of HTML tips I learned that would definitely blow your mind!
1. Capture attribute to open your device camera
Just as the
input tag has attributes for email, text and password, there is also an attribute to open the camera of mobile devices to capture images.
This is done with the
capture attribute which can take two values:
- user for the front camera
- environment for the back camera
<input type="file" capture="user" accept="image/*">
2. Automatic website refresh
You can set your website to refresh after a given amount of time from the
<head> <meta http-equiv="refresh" content="10"> </head>
This snippet refreshes the website every 10 seconds
3. Activate spellcheck
You can use the HTML
spellcheck attribute and set it to true to activate it. Specify the language to be used using the
<input type="text" spellcheck="true" lang="en">
It is a standard attribute and is supported by most browsers
I wonder if dev.to uses this attribute on their create post editor... 😄
4. Specify file type to be uploaded
You can specify the file types users are permitted to upload in the
input tag using the
<input type="file" accept=".jpeg,.png">
5. Prevent translation
translate attribute to no, prevents translation. This is important in case where you don't want a phrase or word to be translated, for example your logo, company or brand name.
<p translate="no">Brand name</p>
6. Entering multiple items into the input tag
This can be done with the
<input type="file" multiple>
It works for both files and emails. For emails, separate each email by a comma.
7. Creating a poster(thumbnail) for your videos
poster attribute, you can create an image which is displayed while the video is downloading, or until the user hits the play button.
If this is not included, the first frame of the video will be used instead.
8. Automatically download on link click
If you want a particular resource to be downloaded when a link to the target resource is clicked, add the
<a href="image.png" download>
That's a wrap. I'm sure to share more once I learn more 😄
Comment below which ones were new to you
Top comments (28)
Number 2 can also be used to redirect after the delay if you give the meta tag a URL to redirect to.
Didn't know that. Thanks for the input
Great post, I also like to look at this site when I want to know more about HTML;
Thanks for sharing ☺️
Wow I learnt something new!
Wow. Thanks Babi.
Good tips thanks for sharing.
I learned a lot of new things today! Thanks so much for sharing this!
learnt only 8 points!! :-)
Only 8 for now... 😂
Thanks for sharing this
You're welcome 😊
Nice list! #2 is a WCAG failure though: w3.org/TR/WCAG20-TECHS/F41.html
Thanks. I'll check it out
Great article. Got right down to it and in this concise article covered them well. Thanks,
Actually it's 8. Two "3." points are there!
Thanks Matt Miller!