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 tag!
<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 lang attribute
<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 accept attribute
<input type="file" accept=".jpeg,.png">
5. Prevent translation
Setting the 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 multiple attribute
<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
With the 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.
<video poster="picture.png"></video>
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 download attribute
<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)
Great post, I also like to look at this site when I want to know more about HTML;
htmlreference.io/
Thanks for sharing βΊοΈ
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
Wow I learnt something new!
Beautiful!
Uau!! Congrats!!
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,
learnt only 8 points!! :-)
Thanks Babi.
Only 8 for now... π
Amazing
Actually it's 8. Two "3." points are there!
Thanks Matt Miller!