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.


Request for Proposal

Recaptcha is required.

Sending message..