Which Are The New Tags in HTML5 ?

Yes! Welcome! After many days, I sat to write this post, In which I am going to tell you about the new tags in HTML 5. Although it is much more time gone releasing HTML 5, I still decided to write about it.

So here there are 23 new tags mentioned that are added in HTML 5. Also, it is interesting to note that some tags removed in HTML 5. So we start one by one.

<article>

Okay, so you must be knowing about this tag. As the name suggests, it represents the part of a post or an article. It is defined and used for self-independent content in it such as story, news article, comments etc. Default display property of this element is block.

<aside >

If you use aside just like other tags, it will make no difference. Hence it is used to define some data aside from the original content. You can stylise that content using simple in tag CSS.

<audio>

Before this tag, the webmasters have to use the flash player to embed any audio to the web page,
But after HTML5, this has been so easy now.
Just add any audio to the site using this tag like video.

<canvas>

Canvas is an amazing new tag that enables us to draw on a webpage or within the element.
We can make games, graphics, illustrations and animate them too! we can draw 2d and 3d shapes and fill colors in it.
I will surely add a post on <canvas> soon.

<datalist>

Datalist provides the list of data to show while typing or as options in the <input> element.
In other words, it acts as 'autocomplete' feature.
For example, I'm filling a form then while typing, I can select the objects as follows-
Output:

Code:

<h2>Fill the Form:</h2>
  <b>Which prog language do you use most often?</b><br />
  <input type="text" name="favCharacter" list="characters" maxlength="50">
  <datalist id="characters">
   <option value="Javscript">
   <option value="PHP">
   <option value="Python">
     <option value='C'>
     <option value='C++'>
     <option value='C#'>
     <option value='Hack'>
     <option value='Go'>
  </datalist>

<details> & <summary>

<Summary> is used to make an open and closed textbox which will open if you click on the heading. <details> can be used to bind <Summary>.Details and summary tags can be used as follows.

<details>
<summary>Read more about the new HTML5 tags by clicking here:</summary>
<p>Only supportive browsers allows expand and collapse this details(text).
  If now, you should consider updating your browser to latest version.
  </p>
</details>

and Output:

You can use open attribute to keep it open by default.

<embed>

Embed tag is new in HTML5. You want to embed anything- website, video file, document, any special type of plugin file, you need to use this. Earlier we would use this tool to embed videos - even YouTube. But now with the introduction of the new video tag, we can embed video easily.

<embed type="" src="">

→Src: Source of the file.
→type: the MIME type of the file.

<figure> and <figurecaptions>

<figure> is used for annotationg picture, diagrams, figures, code boxes etc. And <figurecaption> is used in conjuction with <figure> to provide a caption for <figure> element's captions.

<figure>
  <img src="../Img/Taj.jpg" alt="Taj Mahal">
  <figcaption>Fig.1 - Taj Mahal, India.</figcaption>
</figure>

<footer>

<Footer> is used to define the footer of the document. There can be more than one footer to a single page. Footer is often used for wrapping the links of About Us, Privacy Policy etc.

<header>

Header tag is used to wrap the navigational links, h1-h6 tags or to show the version information etc. Note that you cannot place <header> in another <header>, <footer> or <adress> tag.

<mark>

<mark> is used to highlight the text on the web as same as we use a highlighter on paper.

<p>PHP 7 was
<mark>released on 2015-12-03</mark>
, and comes with some HUGE improvements</p>

Output:

<meter>

<Meter> is used to indicate the fractional or percentage value just like a progress bar.The deafult css propties for <meter> are as follows.

meter {
    -webkit-appearance: meter;
    box-sizing: border-box;
    display: inline-block;
    height: 1em;
    width: 5em;
    vertical-align: -0.2em;
    -webkit-user-modify: read-only !important;
}

<nav>

Nav stands for navigation. You can wrap this tag to all the links on the top of the homepage that helps the user to navigate. This is the new tag in HTML5.

<output>

An <output> is used to show the output of the result of a calculation(maybe by JavaScript). This tag is newly introduced in HTML5. Below is the example how you can use this tag.

<form oninput="x.value=parseInt(a.value)*parseInt(b.value)">0
<input type="range" id="a" value="9">100
<b>x</b> 0<input type="range" id="b" value="1">100
=<output name="x" for="a b"></output>
</form>

Try it on jsfiddle.

This has 3 attributes.

1. For:- To specify the relationship between the result of calculation and elements used. (value must be ID's separated by space.)
2. Form:- Specifies the forms to which the result belongs to. (value in ID separated by space.
3. Name- Name of the output element.

<progress>

Progress tag is used to show the progress of any specific. For example, you can show the progress of a file download.

<p><b>File Downloading in progress...</b></p>
<progress value="25" max="100">
</progress>

Value: Current progress value.
max: Maximum value of the progress.

You can use javascript to conjunct the progress bar. Further, CSS can be applied to give it the same look in all the browsers. The default look for progress bar element in chrome as of now is follows:-

<section>

The <section> is used to represent section within a post. It is a new element in HTML5. The example of two different sections is given below.

<section id='Section1'></section>
<section id='Section2'></section>

<time>

Time tag is used to denote time within the element. It doesn't make much impact on the text.
You can use it like below.

Click to see the tutorial.

<video>

Same as an audio tag, video tag can insert video (generally mp4, Ogg and avi) to the web page. We have already seen a post on that on how to make an HTML 5 player with custom controls. Custom controls can also be applied to audio.

<wbr>

<wbr> tag is used to show a line break opportunity. Suppose you have a long word and you want to show line break opportunity, you can use this tag over <br>.
In <br> tag, it forces the browser to break down, whereas <wbr> states it as line break opportunity.
You can simply use <wbr> as it has no end tag.

I've mentioned almost all the tags that were newly introduced in html5. In case, if any tags are remaining, you can mention it in comments!

• Tweet
• Share
• Share
• Share
• Share