HTML5 New Elements

Here is a list of some HTML5 new elements:

Element	Description
<details>	Use to specify additional information that the user can show or hide.
<figure> <figcaption>	Use to mark up a photo in a document. Defines a caption for a figure element
<mark>	To Highligh or Mark the Text
<meter>	Use to measure data within a given range
<progress>	Defines the progress of a task

HTML5 details tag

HTML5 <details> tag specifies additional details which user can show or hide. Inside <details> tag, <summary>...</summary> tag is use to define text which is visible, rest of the elements are toggleable. By default, text in details tag is closed.

Example 1: Details Tag

<details>
    <summary>AnkitWebLogic.com</summary>
    <p>A Tutorial Website for Designing and Developing a Website.</p>
    <p> - By Ankit, IT Faculty</p>
</details>

Attribute	Description
open	Specifies that the details should be visible(open) to the user.

HTML5 Figure tag

Figure tag specifies a container in which we can specify image as well as its caption.

Example 2: Figure and Figcaption Tag

<figure>
    <img src="dog.jpg" alt="figure">
    <figcaption>Fig.1 - A Dog.</figcaption>
</figure>

HTML5 Meter tag

Example 3: Meter can be use for Disk usage, the relevance of a query result, etc.

<body>
    <meter value="20" min="0" max="100"></meter>
    <meter value="0.6"></meter>
</body>

Styling:

HTML5 Progress tag

Progress tag is used to show the working progress of any task. It can be used with JavaScript to show dynamic loading effect.

Example 4: Progress.

<body>
    Downloading progress:
    <progress value="22" max="100"> </progress>
</body>

Styling:

progress::-webkit-progress-bar {
    background-color: rgb(178, 255, 255);
}
progress::-webkit-progress-value {
    background-color: red;
}

Ad: