DEV Community

loading...
Cover image for 10 useful HTML5 features, you may not be using

10 useful HTML5 features, you may not be using

atapas profile image Tapas Adhikary Originally published at blog.greenroots.info Updated on ・8 min read

HTML5 is not a new thing. We have been using several features of it since the initial release(January 2008). As part of #100DaysOfCode initiative, I have taken a close look at the HTML5 feature list again. See what I found? I haven't really used a bunch of it so far!

In this article, I am listing down ten such HTML5 features that I haven't used much in the past but, found them useful now. I have also created a working example flow and hosted on Netlify. Hope you find it useful too.

https://html5-tips.netlify.app/

Great, so let us get started with the explanation, code, and quick tips about each of them. You can follow me on Twitter to catch on my future articles and work.

🔥 Details Tag

The <details> tag provides on-demand details to the user. If you have a need to show content to the user on-demand, use this tag. By default, the widget is closed. When open, it expands and displays the content within.

The <summary> tag is used with <details> to specify a visible heading for it.

Code

<details>
     <summary>Click Here to get the user details</summary>
         <table>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Job</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Adam</td>
                    <td>Huston</td>
                    <td>UI/UX</td>
                </tr>
          </table>
  </details>
Enter fullscreen mode Exit fullscreen mode

See it working

Alt Text

You can play with it from here: https://html5-tips.netlify.app/details/index.html

Quick Tips

Use it in the GitHub Readme for showing the detailed information on demand. Here is an example of how I have hidden a huge list of react component properties and show it only on demand. Cool, right?

🔥 Content Editable

contenteditable is an attribute that can be set on an element to make the content editable. It works with elements like DIV, P, UL, etc. You have to specify it like, <element contenteditable="true|false">.

Note, When the contenteditable attribute is not set on an element, it will be inherited from its parent.

Code

<h2> Shoppping List(Content Editable) </h2>
 <ul class="content-editable" contenteditable="true">
     <li> 1. Milk </li>
     <li> 2. Bread </li>
     <li> 3. Honey </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

See it working

Alt Text

You can play with it from here: https://html5-tips.netlify.app/content-editable/index.html

Quick Tips

A span or div elements can be made editable with it and you can add any rich content to it using CSS styling. This will be way better than handling it with input fields. Give it a try!

🔥 Map

The <map> tag helps in defining an image map. An image map is an image with one or more clickable areas within it. The map tag goes with a <area> tag to determine the clickable areas. The clickable areas could be either of these shapes, rectangle, circle, or polygonal region. If you do not specify any shape, it considers the entire image.

Code

<div>
    <img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">

    <map name="circusmap">
        <area shape="rect" coords="67,114,207,254" href="elephant.htm">
        <area shape="rect" coords="222,141,318, 256" href="lion.htm">
        <area shape="rect" coords="343,111,455, 267" href="horse.htm">
        <area shape="rect" coords="35,328,143,500" href="clown.htm">
        <area shape="circle" coords="426,409,100" href="clown.htm">
    </map>
 </div>
Enter fullscreen mode Exit fullscreen mode

See it working

Alt Text

You can play with it from here: https://html5-tips.netlify.app/map/index.html

Tips

Image map has its own drawbacks but, you can use it for visual presentations. How about trying it out with a family photo and drill down into the individual's photo(maybe the old ones we always cherish for!).

🔥 Mark Content

Use the <mark> tag to highlight any text content.

Code

 <p> Did you know, you can <mark>"Highlight something interesting"</mark> just with an HTML tag? </p>
Enter fullscreen mode Exit fullscreen mode

See it working

image.png

You can play with it from here: https://html5-tips.netlify.app/mark/index.html

Tips

You can always change the highlight color using css,

mark {
  background-color: green;
  color: #FFFFFF;
}
Enter fullscreen mode Exit fullscreen mode

🔥 data-* attribute

Thedata-* attributes are used to store custom data private to the page or application. The stored data can be used in JavaScript code to create further user experiences.

The data-* attributes consist of two parts:

  • The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-"
  • The attribute value can be any string

Code

<h2> Know data attribute </h2>
 <div 
       class="data-attribute" 
       id="data-attr" 
       data-custom-attr="You are just Awesome!"> 
   I have a hidden secret!
  </div>

 <button onclick="reveal()">Reveal</button>
Enter fullscreen mode Exit fullscreen mode

Then in JavaScript,

function reveal() {
   let dataDiv = document.getElementById('data-attr');
    let value = dataDiv.dataset['customAttr'];
   document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
}
Enter fullscreen mode Exit fullscreen mode

Note: For reading the values of these attributes in JavaScript, you could use getAttribute() with their full HTML name(i.e, data-custom-attr) but, the standard defines a simpler way: using a dataset property.

See it in action

Alt Text

You can play with it from here: https://html5-tips.netlify.app/data-attribute/index.html

Quick Tips

You can use it to store some data on the page and then pass it using the REST call to the server. Another use-case could be the way, I show a notification message count here.

🔥 Output Tag

The <output> tag represents the result of a calculation. Typically this element defines a region that will be used to display text output from some calculation.

Code

<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
   <input type="number" id="a" value="0">
          * <input type="number" id="b" value="0">
                = <output name="x" for="a b"></output>
</form>
Enter fullscreen mode Exit fullscreen mode

See it in action

Alt Text

You can play with it from here: https://html5-tips.netlify.app/output/index.html

Tips

If you are performing any computation in the client-side JavaScript and, want the result to reflect on the page, use <output> tag. You do not have to walk the extra steps of getting an element using getElementById().

🔥 Datalist

The <datalist> tag specifies a list of pre-defined options and allows the user to add more to it. It provides an autocomplete feature that allows you to get the desired options with a type-ahead.

Code

<form action="" method="get">
    <label for="fruit">Choose your fruit from the list:</label>
    <input list="fruits" name="fruit" id="fruit">
        <datalist id="fruits">
           <option value="Apple">
           <option value="Orange">
           <option value="Banana">
           <option value="Mango">
           <option value="Avacado">
        </datalist>
     <input type="submit">
 </form>  
Enter fullscreen mode Exit fullscreen mode

See it in action

Alt Text

You can play with it from here: https://html5-tips.netlify.app/datalist/index.html

Tips

How is it different than the traditional <select>-<option> tag? Select tag is for selecting one or more items from the options where you need to go through the list to pick from. Datalist is the advanced feature with autocomplete support.

🔥 Range(Slider)

The range is an input type given a slider kind of range selector.

Code

<form method="post">
    <input 
         type="range" 
         name="range" 
         min="0" 
         max="100" 
         step="1" 
         value=""
         onchange="changeValue(event)"/>
 </form>
 <div class="range">
      <output id="output" name="result">  </output>
 </div>
Enter fullscreen mode Exit fullscreen mode

See it in action

Alt Text

You can play with it from here: https://html5-tips.netlify.app/range/index.html

Tips

There is nothing called slider in HTML5!

🔥 Meter

Use the <meter> tag to measure data within a given range.

Code

<label for="home">/home/atapas</label>
<meter id="home" value="4" min="0" max="10">2 out of 10</meter><br>

<label for="root">/root</label>
<meter id="root" value="0.6">60%</meter><br>
Enter fullscreen mode Exit fullscreen mode

See it in action

image.png

You can play with it from here: https://html5-tips.netlify.app/meter/index.html

Tips

Do not use the <meter> tag for a progress indicator kind of user experience. We have the <Progress> tag from HTML5 for it.

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
Enter fullscreen mode Exit fullscreen mode

image.png

🔥 Inputs

This part is mostly known to us with the usage of input types like text, password, etc. There are few special usages of the input types,

Code

required

Mark an input field as mandatory.

<input type="text" id="username1" name="username" required>
Enter fullscreen mode Exit fullscreen mode

image.png

autofocus

Provides focus on the input element automatically by placing the cursor on it.

<input type="text" id="username2" name="username" required autofocus>
Enter fullscreen mode Exit fullscreen mode

validation with regex

You can specify a pattern using regex to validate the input.

<input type="password" 
            name="password" 
            id="password" 
            placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter" 
            pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required>
Enter fullscreen mode Exit fullscreen mode

Color picker

A simple color picker.

<input type="color" onchange="showColor(event)">
<p id="colorMe">Color Me!</p>
Enter fullscreen mode Exit fullscreen mode

Alt Text

What's next?

Well, I am sure, I have left behind a few useful ones. How about you complete the list? Please provide comments about this post and your learning on HTML5. See you soon in my next article.

Oh Yes, all the code used in this article can be found in the git repo mentioned below. Please give the repo a star, if you liked the work.

GitHub logo atapas / html-tips-tricks

My Favorite HTML5 Tips and Tricks

html-tips-tricks

HTML5 is not a new thing. We have been using several features of it since the initial release(October 2014). As part of #100DaysOfCode initiative, I have taken time out to revisit the feature list again. See what I found? I haven't really used a bunch of it!

In this repo, I am listing down such HTML5 features that I haven't used much but, found them useful. I have also created a working example flow and hosted on netlify. Hope you find it useful.

https://html5-tips.netlify.app/

To read more about this:

10 useful HTML5 features You may not be using

Many Thanks to all the Stargazers who has supported this project with stars()

Stargazers repo roster for @atapas/html-tips-tricks



If it was useful to you, please Like/Share so that, it reaches others as well. I am passionate about UI/UX and love sharing my knowledge through articles. Please visit my blog to know more.

You may also like,

Follow me on Twitter @tapasadhikary for any technical discussions.

The cover image was built on top of an image from freepik.

Discussion

pic
Editor guide
Collapse
sal7one profile image
Saleh Alanazi

This is so cool, thanks for sharing!. I actually have one I just found out about. If you have an onclick in an HTML tag and you pass "this" as an argument to whatever function you're calling. You can use that HTML element in JS and get it's tag info / modify it, or it's parents/children. without a query selector!!!

try it here! click the button on the far right. (html view)
jsbin.com/feyuhaxivo/edit?html,js,...

Collapse
atapas profile image
Collapse
ferueda profile image
Felipe Rueda

Omg I'm mind blown right now. I didn't know most of these and they are seriously cool! Thanks for sharing

Collapse
atapas profile image
Tapas Adhikary Author

Thanks Felipe! I m glad, it was useful to you.

Collapse
katiekodes profile image
Katie

To me, map is quite a throwback! People used them for fanciful literal "site maps" on their personal home pages.

Collapse
klausbert profile image
Klausbert

Yes, I had to switch from <map> to <svg> to get the same results in a responsive design.

Collapse
froeb profile image
froeb

I agree. Svg is not only providing responsive design, but it is also so much more flexible! Svg is probably still the most underrated feature in web design. The only drawback is that you do not find too many advanced samples in the internet. So, if you like, have a look at my website hegel.net for a sample on how to implement an svg based „imagemap“. Search in the code for the svg tag and within it for the xlink:href code. Enjoy!

Collapse
atapas profile image
Tapas Adhikary Author

You are absolutely right! However I was not aware of it until I figured out about it.. Hence the inclusion... 😁

Thanks Katie for reading the article!

Collapse
wawrzyn321 profile image
Piotr Wawrzyńczyk

Nice! Some of those are new for me. By the way, there is a little more neat way of getting the numeric input's value - valueAsNumber.

<form oninput="x.value=a.valueAsNumber * b.valueAsNumber">

Thanks for sharing!

Collapse
atapas profile image
Collapse
madza profile image
Madza

A perfect example of how knowing something to the core could save you from adding unnecessary libraries and all the effects that come with it.

Collapse
atapas profile image
Tapas Adhikary Author

That's very true Madza! Thanks for reading through and commenting!

Collapse
misterhamm profile image
Chris

Thanks :) It's funny how we can do this for 40-50 hours a week plus and still miss basic features of HTML. Too much confidence in the fact that there's nothing more to learn about HTML. Got my mind churning with a couple of those.

Collapse
atapas profile image
Tapas Adhikary Author

Very true Chris.

Collapse
togakangaroo profile image
George Mauer

Map is certainly not html 5 is it? It should be quite old. I also would recommend it in only the most limited of circumstances. How would it work for responsive websites? What sort of accessibility nightmare might it pose? What possible advantage can it have over simply using an svg?

I'd need to look into it but I would never use it without considering these two all important questions.

As for details. Is nice. I use it on my html resume. But the degree to which you are limited in styling it and all the browser bugs and inconsistencies with it (Was it Firefox or safari where flexbox won't work in summaries?) really limit is usefulness

Collapse
ztamizzen profile image
Mats Lindblad

I used map before 2000 so it more like HTML3.

Collapse
atapas profile image
Tapas Adhikary Author

Thanks, will check it out!

Collapse
rajyraman profile image
Natraj Yegnaraman

Good one Tapas. One small feedback - Using contenteditable to make a div behave like an input is not good for accessibility.

Collapse
atapas profile image
Tapas Adhikary Author

Thanks Natraj, for reading through! Great feedback on accessibility!

Collapse
machineno15 profile image
Tanvir Shaikh

Amazing , need more of this .
Thanks for adding up my knowledge.

i realize i would have saved my time instead of adding jquery then writing code to display on click of more button , simply with details tag.

Collapse
atapas profile image
Tapas Adhikary Author

Cool, Thanks Tanvir!

Collapse
oti profile image
oti

The description of autofocus is incorrect. Nowhere in the specification is it written "by placing the cursor on it."

html.spec.whatwg.org/multipage/int...

If you want to explain it briefly, how about "an element is to be focused as soon as the page is loaded."

Furthermore, it would be better if there was an explanation of the behavior of the dialog element and div element.

Collapse
mickaelchanrion profile image
Mickael Chanrion

Mhh... What's the difference between "meter" and "progress" 🤔 ?
I wasn't aware of the meter tag. Thanks

Collapse
atapas profile image
Collapse
mickaelchanrion profile image
Mickael Chanrion

Oups, the html tags are hidden apparently.
I've edited my comment

Collapse
frumpygoose180 profile image
FrumpyGoose180

THAT'S A HUGE CONTENT! I didn't know any of these tags, mindblowing!

Collapse
atapas profile image
Tapas Adhikary Author

Thank you! Very happy that it was useful!

Collapse
agiboire profile image
Adrien

I condemn the choice of font 😁

Collapse
atapas profile image
Tapas Adhikary Author

Haha.. BTW.. That font name is Chilanka! I liked that somehow 🙂

Collapse
m121 profile image
Mateo Perez Salazar

Thank you for this list, I think you miss one "blink tag"

Collapse
ztamizzen profile image
Mats Lindblad

Blink is a text-decoration today, which no browser supports. For good reason.
Why not go with a "marquee" instead? 😁

Collapse
m121 profile image
Mateo Perez Salazar

hahaha I didn't know that

Collapse
atapas profile image
Tapas Adhikary Author

Thanks! Yeah I missed few in fact.. Shall add to the git repo as example this week.

Collapse
qq449245884 profile image
qq449245884

Hello, may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
atapas profile image
Tapas Adhikary Author

Please go ahead.. You can tweet the link once published 🙂

Collapse
qq449245884 profile image
qq449245884

ok, thanks.

Collapse
nikhilmwarrier profile image
Nikhil M Warrier

That <details> tags was really neat... Lifesavers.... Thanks a lot....

Collapse
atapas profile image
Tapas Adhikary Author

Thanks... Glad it was useful to you.

Collapse
anonystick profile image
anonystick

Hello, may I translate your article into Vietnamese ? I will give the original author and original source. Thanks!

Collapse
atapas profile image
Tapas Adhikary Author

Yeah sure.. You can.. Thanks!

Collapse
anonystick profile image
Collapse
rachel_cheuk profile image
Rachel

Image maps!! Haha I remember making those so many years ago and it was so different!! How things change!!

Thanks for sharing!! Great list!

Collapse
atapas profile image
Collapse
alokjoshi profile image
AlokJoshiOfAarmax

Super brilliant. Keep writing. You have a knack for it.

Collapse
atapas profile image
Collapse
gerardocrdena14 profile image
Gerardo Cárdenas

Hello, the link about DevTools - My Favorite Tips and Tricks
does not work, would you like to fix it?

Collapse
atapas profile image
Tapas Adhikary Author

Hey Thanks for reporting.. I have fixed it now.. Please let me know.

Collapse
iamrommel profile image
Rommel C. Manalo

date and datetime-local please for input

Collapse
essteffan profile image
Stefan Cuculeac

Nice things to remember!

Collapse
mikepijn profile image
Michael Pijnenburg

Cool that you put up a netlify example website!

Link to github example in the Quick Tips of also refers to your netlify website instead of your github readme, you might want to update this?

Collapse
atapas profile image
Tapas Adhikary Author

Hey Thanks!

Changed the link.

I wanted to point to this one: github.com/atapas/notifyme#properties

Collapse
jacobmgevans profile image
Jacob Evans

I'm embarrassed to say I didn't know some of these... I definitely need to go make some stuff with them, get really comfortable and familiar with them.

Collapse
oricis profile image
Moisés Alcocer

Thanks!
Great post, I discover details / summary, i will clean a lot of CSS tricks of my pages now.

Collapse
atapas profile image
Collapse
ackmandesu profile image
AckmanDESU

The problem with many of these is that they're not supported by IE, which means I am stuck doing things the "old" way.

Collapse
atapas profile image
Tapas Adhikary Author

Yes, that is kind of unfortunate. Which version of IE are you with? A few are supported with IE11 though. But, you are right..many are not at the same time.

Collapse
hassanhgfd profile image
Hassan Bazuhair

That was good post. Most of them I don't know any thing about them. So thank you very much

Collapse
atapas profile image
Tapas Adhikary Author

Thank you Hassan! Glad, it was useful.

Collapse
panshak profile image
Panshak

Very helpful. Never knew some of these tags even exist.

Collapse
atapas profile image
Tapas Adhikary Author

Thanks, Panshak!

Collapse
scroung720 profile image
scroung720

The more HTML you know the more you realize you have been reinventing the wheel using fancy frameworks

Collapse
atapas profile image
Collapse
sonichaos360 profile image
Luciano Joan Vergara

Thank you, very interesting info!

Collapse
atapas profile image