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
Latest comments (28)
Wonderful tips you've shared here. Surely gonna try them out.
Wow. Thanks Babi.
It would be great if you could add MDN links to all those, for example for translate: developer.mozilla.org/en-US/docs/W...
You should also add HTML syntax highlighting to those code blocks
Good tips thanks for sharing.
Great article!
I would like to know in which case we may want to refresh the page after x seconds ?
Thank you for sharing, this is great info to know! π
Great post, I also like to look at this site when I want to know more about HTML;
htmlreference.io/
Thanks for sharing βΊοΈ
I learned a lot of new things today! Thanks so much for sharing this!
You're welcome
Pretty neat!
learnt only 8 points!! :-)
Thanks Babi.
Only 8 for now... π