10 useful HTML5 features, you may not be using

10 useful HTML5 features, you may not be using:

 https://damianfallon.blogspot.com/

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/

.

🔥 Details Tag

The 

 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 

 tag is used with 

 to specify a visible heading for it.

Code

Click Here to get the user details
# Name Location Job
1 Adam Huston UI/UX

See it working

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, .

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

Code

Shoppping List(Content Editable)

  • 1. Milk
  • 2. Bread
  • 3. Honey

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 

 tag helps in defining an image map. An image map is any image with one or more clickable areas within it. The map tag goes with a 

 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

Circus

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(may be the old ones we always cherish for!).

🔥 Mark Content

Use the  tag to highlight any text content.

Code

 

Did you know, you can "Highlight something interesting" just with an HTML tag?

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

Know data attribute

I have a hidden secret!
Reveal

Then in JavaScript,

function reveal() {
   let dataDiv = document.getElementById('data-attr');
    let value = dataDiv.dataset['customAttr'];
   document.getElementById('msg').innerHTML = `${value}`;
}

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 in the page and then pass it using REST call to the server. Another use-case could be the way, I show a notification message count here.

🔥 Output Tag

The  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  tag. You do not have to walk the extra steps of getting an element using getElementById().

🔥 Datalist

The  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


    Choose your fruit from the list:
    
        
           
           
           
           
           
        
     
   

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 - 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 an 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

🔥 Meter

Use the  tag to measure data within a given range.

Code

/home/atapas
2 out of 10
/root 60%

See it in action

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

Tips

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

Downloading progress:
 32% 

🔥 Inputs

This part is mostly known to us with the usage of input types like, text, password etc. There are few special usage 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.


Color Me!

https://damianfallon.blogspot.com/

from Tumblr https://generouspiratequeen.tumblr.com/post/629628519475970048

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s