5 New HTML5 Tags You Should Know About

Posted By : Vijendra Kumar | 31-Jan-2018

1: <output>
The new <output> tag is unique because it expects its content to be dynamically generated using JavaScript. It has a value property that can be manipulated through the DOM using JavaScript to change what is displayed on the screen. This is much more convenient than what you are doing now.


 
0 100 + =

 

2: <details>
It appears that each site must have 
scalable/collapsible block of text. Although this is fairly easy for JavaScript or server-side code, the <details> tag makes it much easier. It's exactly what we've been doing for years: it creates a simple block that expands and shrinks as you click on the title. The <details> tag is not yet widely supported, but it will be available shortly.


 
@ Copyright 1985-2012.

All Rights Reserved by Rufus Inc.

All graphics and content of this website are the property of the Rufus Inc.

 

3: <figure> and <figcaption>
<figure> is a content container (usually a picture, but it can be anything), <figcaption> (placed in the <figure> tag) that provides a title or subtitle for the contents of the <figure> tag. For example, you can use four images in the <figure> tag and <figcaption> to represent the sales growth chart, with text such as "Sales growth from one year to another, 1989-1993." The image will be displayed next to the four words below.


 
Image alternative text
Figure 1) Description content of the image.

 

4: <progress>and <meter>
<progress> and <
meter> are similar. Use <progress> for tasks or "Measurement Complete" scenarios. It also has an indeterminate pattern that has an unknown time (like searching the database). The <meter> tag is used for meter and numeric measurements (thermometer, number of uses, etc.). Although in many cases they can look similar on the screen, they have different semantic meanings.

6 out of 20


 

5: <datalist>
The <datalist> tag acts as a combo box and the system provides a pre-set list of suggestions, but users can also write their own entries. There are many possible uses for this, such as a search box previously populated with user-history-based elements. This is another issue currently requiring a large amount of JavaScript (or JavaScript libraries) to handle, but this can be done locally with HTML5.



Thanks.

About Author

Author Image
Vijendra Kumar

Vijendra is a creative UI developer with experience and capabilities to build compelling UI designs for Web and Mobile Applications. Vijendra likes playing video games and soccer.

Request for Proposal

Name is required

Comment is required

Sending message..