Top Features of HTML5 With Examples

Top Features of HTML5 With Examples

4 mins read34.6K Views Comment
Updated on Oct 31, 2023 13:02 IST

HTML5 is the latest version of Hypertext Markup Language, used for structuring content on the web. It introduces new elements, multimedia support, and improved semantics, making it essential for modern web development. Let’s  explore!

2022_03_Copy-of-What-is-5.jpg

HTML5, the latest evolution of HTML, significantly enhances web development and user interactions. It introduces a range of new elements and attributes that reflect typical usage on modern websites. With improved support for multimedia, graphics, and real-time communication, HTML5 paves the way for developing richer, more interactive, and more user-friendly web applications. Its emphasis on semantics helps in creating cleaner, more readable code. Additionally, features like local storage and geolocation support further extend the capabilities of web applications, meeting the growing demands of modern web development. This makes HTML5 a powerful and indispensable tool for today’s web developers.

Explore Online HTML Courses

Audio & Video Tags

With Audio and Video tags, developers can embed videos or audio into their websites. For styling the video tag, developers can use CSS and CSS3.

Example of the video tag in HTML


 
<!DOCTYPE html>
<html>
<body>
<video width="400px" height="300px" controls>
<source src=" movie.mp4 " type="video/mp4">
</video>
</body>
</html>
Copy code

In the above HTML code:

  • width and height are for setting the dimensions for the video element
  • controls attribute creates buttons for playback (Play, Pause, etc.)
  • src (source) tag provides the URL or media source
  • type represents the video type

Output:

 

Header

The element in HTML5 contains introductory content. It can include a set of introductory or navigational support on a website. Typically, the header element contains heading elements, logos or icons, a search form, author’s information, etc.

Example of header element in HTML5:


 
<!DOCTYPE html>
<html>
<body>
<h1>Shiksha Online</h1>
<h3> Find courses that are the best for your career </h3>
<header>
<a href=
"https://www.shiksha.com/online-courses/technology-courses-certification-training-ct139">
Technology</a> |
<a href=
"https://www.shiksha.com/online-courses/data-science-courses-certification-training-ct123">
Data Science</a> |
<a href=
"https://www.shiksha.com/online-courses/management-courses-certification-training-ct135">
Management</a> |
<a href=
"https://www.shiksha.com/online-courses/articles/">
Blog</a> |
</header>
</body>
</html>
Copy code

Output:

 

Footer

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

Example of the footer in HTML5


 
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Posted by: Deepali Sharma</p>
<p>Contact information: <a href="mailto:deepali@example.com">
deepali@example.com</a>.</p>
</footer>
</body>
</html>
Copy code

Output

A Guide to Semantic Tags in HTML
A Guide to Semantic Tags in HTML
Have you ever heard about semantic tags in HTML? These tags give meaning to your web content, making it more accessible and understandable both to users and search engines. They...read more
How to add background image in HTML?
How to add background image in HTML?
Images can make a page look more appealing and captivating. One of such ways for making the page more attractive is adding background image to it. You can add backgrond...read more
HTML Iframe (With Examples)
HTML Iframe (With Examples)
An HTML iframe is an HTML tag that allows you to embed another HTML document within a current HTML document. Importance of Using HTML iframes. Let’s see some main attributes...read more

Figure and figcaption

These elements help users to insert an image with its caption. The figcaption tag is used to add a description for the image.

Example of figcaption


 
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="red tulips.jpg"
alt="Red Tulips">
<figcaption>Red Tulips in a Garden</figcaption>
</figure>
</body>
</html>
Copy code

Output:

 

Canvas Tag

The canvas tag in HTML5 helps users draw graphics or images on the fly using JavaScript. We can use it for drawing paths, boxes, circles, adding images, etc. The canvas tag has two attributes: width and height for setting the width and height of the canvas.

Example of canvas tag in HTML5:


 
<!DOCTYPE html>
<html>
<body>
<canvas id="Canvas1" width="400" height="100" style="border:2px solid;">
</canvas>
</body>
</html>
Copy code

Output:

 

Mark

The <mark> element highlights a particular text of special interest to the user in an HTML document.

Example of the mark element


 
<!DOCTYPE html>
<html>
<body>
<p> Grow your skillset with <mark>Shiksha Online.</mark> Find the <mark>best online courses</mark> and certifications in management, technology, programming, and data science.</p>
</body>
</html>
Copy code

Output:

 

 

Main Tag

This tag defines the important content of the <body> of a document.

Example of Main Tag


 
<!DOCTYPE html>
<html>
<body>
<header>
<p>Header content</p>
</header>
<main>
<p>Main Content</p>
<h2>Shiksha Online</h2>
<p> Find courses that are best for your career </p>
</main>
</body>
</html>
Copy code

Output:

Progress Tag

The progress tag helps users check the progress of a task during the execution. Users will need to define the dynamically changing values of the progress bar with the scripts (JavaScript).

Example of progress tag in HTML5


 
<!DOCTYPE html>
<html>
<body>
<span>Loading:</span>
<progress value="55" max="100"></progress>
</body>
</html>
Copy code

Output

Section Tag

The element defines specific sections and subsections in the document.

Example of Section in HTML5


 
<!DOCTYPE html>
<html>
<body>
<section>
<h1>Section 1</h1>
<p>Section 1 content</p>
</section>
<section>
<h1>Section 2</h1>
<p>Section 2 content</p>
</section>
</body>
</html>
Copy code
 
Output
 

Media Control

One of the features of HTML 5 is <video> and <audio> tags that make it easier to use. Rather than just playing media, it helps specify control images for buttons and playback programmatically. It also comes with the <figure> tag that plays a significant role in rendering images on browsers. Representing captions using <figcaption> alongside <figure> tag is also possible.

A figure element is displayed like this:

 

Conclusion

So, this is all about the top features of HTML5. But by understanding all these features, we have only scratched the surface of what is possible with HTML5. Check out our other blogs on HTML to take your HTML learning and coding journey to the next level.

Check out the Top HTML Interview Questions and Answers

FAQs

What are the advantages of HTML5?

Compared to its previous versions, HTML5 is cleaner. It offers rich media elements and allows developers to add audio and videos to a website. It is designed to provide a consistent web experience across multiple devices. HTML5 also provides several new elements, such as , , , and that enrich the semantic value of the document. All these powerful features make it a popular language among developers.

What is HTML5 used for?

HTML is a markup language that helps users define the contents and appearance of web pages. It is widely used for the development of web documents and web pages. It also helps users in internet navigation by enabling them to navigate the different web pages and websites on different servers.

About the Author

This is a collection of insightful articles from domain experts in the fields of Cloud Computing, DevOps, AWS, Data Science, Machine Learning, AI, and Natural Language Processing. The range of topics caters to upski... Read Full Bio

Comments