Top Features of HTML5 With Examples

Published by Nilofar Pathan on

This article will discuss the top features of HTML5 with examples regardless, that will help you create a web page. HTML is a standard markup language. It helps in creating web pages and web applications. HTML5 is its latest version that offers several modifications and new features to the previous version. One of the powerful features of HTML is the drag-and-drop API that allows you to drag and drop any element on a web page. All you need is just to use the attribute draggable on an element.

 Top HTML5 Features-

1. Header.

2.  Footer.

3.  Section Tag.

4.  Audio & Video Tags.

5.  Nav Tag.

6.  Mark.

7.  Figure and figcaption tag.

8.  Canvas Tag.

9.  Main Tag.

10. Progress Tag.

11. Svg tag.

12. Article tag.

13. Placeholders in Form.

14. Preload Videos.

15. Details.

 Top HTML5 Features-

The following are the top features of HTML5 that make it a popular language for website development.


The header element contains heading elements, logos, or icons. The header element can be used to institution collectively introductory factors on a website, such as a business enterprise brand, navigation objects, and occasionally, a search form.

Example of header element in HTML5: –

Top Features of HTML5 With Examples


Afterward, the <footer> tag defines the footer of a document. The footer contains information accordingly related to the author, copyright, contact information, sitemap, related documents, back-to-the-top links, etc. There can be more than one footer element in one document.

Example of the Footer in HTML5:-

Section Tag

The <section> element defines specific sections and subsections in the document. A section tag is used to divide a document into parts or sections. Hence, For example, an article can have many sections like a header, footer, latest news, and a section for main content.

Example of Section in HTML5: –

Video Tags

Using Video tags, developers can embed videos into their websites. Nevertheless, for styling the video tag, developers can use CSS and CSS3. Video and audio are the new tags that allow the embedding of a video on the website. YouTube also declare video embed by giving the code to embed their videos. It helps the web to be more involved with multimedia.

Example of the video tag in HTML: –

Nav Tag

The <nav> tag helps in defining a set of navigation links. It helps create a section of a website that contains navigation links. The nav element is used for the part of an internet site that links to different pages on the website. The hyperlinks can be organized in several approaches. below, the hyperlinks are displayed inside paragraph factors. An unordered list can also be used.

Example of Nav element in HTML5:-


The <mark> element highlights a particular text to the user in an HTML document. It highlights the content that is marked in some or the other way. The <mark> HTML element represents text which is marked or highlighted for reference or notation purposes due to the marked passage’s relevance in the enclosed context.

Example of the Mark element in HTML5: –

Figure and figcaption

These elements help users to insert an image with its caption. Surely, the figcaption tag is used to add a description for the image. Earlier there was no way to figure as well as give a caption to that figure. But, with the introduction of the figure as well as figcaption, it has become semantically possible to insert an image in a page with its caption.

Example of figcaption in HTML5: –

Canvas Tag

The canvas tag in HTML5 helps users draw graphics or images using JavaScript. We can use it for drawing paths, boxes, circles, adding images, etc. The canvas tag has two attributes: width and height. canvas is a tag of HTML which is newly introduced in HTML5. It is used to draw the images on the fly. It can be used for visual images, rendering graphs, and game graphics.

Example of canvas tag in HTML5: –

Main Tag

This tag defines the important content of the <body> of a document. main is that which is used to contain the main content of the page and it contains unique content. More than one main tag is not accepted in the document and this tag cannot be inside the article, aside, footer, header tags. It does not include the navigation bar, header, and footer.

Example of Main Tag in HTML5: –

Progress Tag

The progress tag helps users check the progress of a task during execution. This tag is used to check the progress of a task during the execution of that. Progress tags can be used with the conjunction of JavaScript. It is like a progress bar.

Example of progress tag in HTML5: –


The SVG element is used for the scalable vector graphics in HTML 5, we can create any kind of graphical animation with the use of the SVG tag, such as a circle, square or rectangle, etc. To embed an SVG via an <img> element, you just need to reference it in the src attribute as you’d expect. You will need a height or a width attribute.

Example of SVG element in HTML5-

Article Tag

Thereafter, to distribute any independent content on a web page you can use an article tag, which is a semantic tag like others. The <article> tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Example of article element in HTML5-

Placeholders in Form

This feature in html5 has aided many new users. It gives the hint as to what is to be inserted in a particular field of the form. It is there when the user has not started writing something in the input field. It is sometimes also called dummy text. It is up to the present temporarily.

Preload Videos

It is an amazing feature for uploading videos. It specifies the way to upload the video along with the loading of the page. This helps the browser in knowing about the improvisation of the user experience of the webpage. Though this is not a too mandatory feature that is to be added. It helps in better representation of the page.

Just add preload attribute to your video tag as below. 3 values can be used – auto | metadata | none.


Eventually, Additional details can be given of anything, which will be visible when the user clicks on a small triangle shape. This tag is used to create an interactive widget that the user can open or close. The content of the details tag is visible when opening the set attributes. Since the summary tag is used with the details tag for specifying visible heading. This tag is new in HTML5.


1 Comment

gateio · 09/06/2023 at 5:40 am

I may need your help. I tried many ways but couldn’t solve it, but after reading your article, I think you have a way to help me. I’m looking forward for your reply. Thanks.

Leave a Reply

Follow by Email