DEV Community

Cover image for 8 Shocking HTML tips you probably don't know about
ππšπ›π’ ✨
ππšπ›π’ ✨

Posted on • Edited on

8 Shocking HTML tips you probably don't know about

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/*">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

It is a standard attribute and is supported by most browsers

browser support pic

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

6. Entering multiple items into the input tag

This can be done with the multiple attribute

<input type="file" multiple>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
rafaacioly profile image
Rafael Acioly

Great post, I also like to look at this site when I want to know more about HTML;

htmlreference.io/

Collapse
 
babib profile image
ππšπ›π’ ✨

Thanks for sharing ☺️

Collapse
 
khuongduybui profile image
Duy K. Bui • Edited

Number 2 can also be used to redirect after the delay if you give the meta tag a URL to redirect to.

Collapse
 
babib profile image
ππšπ›π’ ✨

Didn't know that. Thanks for the input

Collapse
 
vulcanwm profile image
Medea

Wow I learnt something new!

Collapse
 
soniarpit profile image
Arpit

Amazing

Collapse
 
lebogang26 profile image
Lebogang Sekaleli

Wow. Thanks Babi.

Collapse
 
arunagnihotri profile image
Arun Agnihotri

learnt only 8 points!! :-)

Thanks Babi.

Collapse
 
babib profile image
ππšπ›π’ ✨

Only 8 for now... πŸ˜‚

Collapse
 
ricardochan profile image
Ricardo Chan

Pretty neat!

Collapse
 
philipdeve profile image
Philip Ifeanyi

Thanks for sharing this

Collapse
 
babib profile image
ππšπ›π’ ✨ • Edited

You're welcome 😊

Collapse
 
cattjames profile image
James Catt

Nice list! #2 is a WCAG failure though: w3.org/TR/WCAG20-TECHS/F41.html

Collapse
 
babib profile image
ππšπ›π’ ✨

Thanks. I'll check it out

Collapse
 
sique976 profile image
San D.

Uau!! Congrats!!