Aamir
8 Shocking HTML tips you probably don't know about
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 spellcheckattribute 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.
4. Specify file type to be uploaded
You can specify the file types users are permitted to upload in the inputtag using the acceptattribute.
<input type="file" accept=".jpeg,.png">5. Prevent translation
Setting the translateattribute 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 multipleattribute.
<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 posterattribute, 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 downloadattribute.
<a href="image.png" download>Wrap Up. Share this article and kindly bookmark this website to get the latest blog on full-stack.
Thank you
Aamir
A handful guide to make the developerslife easy.