Tips & Tricks (10 Part Series)
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.
Great, so let us get started with the explanation, code, and quick tips about each of them. You can follow me on Linkedin 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
See it working
You can play with it from here: https://html5-tips.netlify.app/details/index.html
🔥 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
See it working
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
See it working
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
See it working
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;
}
🔥 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
Then in JavaScript,
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
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.
🔥 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
See it in action
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
See it in action
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
See it in action
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
See it in action
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.
🔥 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.
autofocus
Provides focus on the input element automatically by placing the cursor on it.
validation with regex
You can specify a pattern using regex to validate the input.
Color picker
A simple color picker.
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.