Top Features of HTML5 With Examples
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!
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>
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:
Best-suited HTML & CSS courses for you
Learn HTML & CSS with these high-rated online courses
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>
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>
Output
Read Later
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>
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>
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>
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>
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>
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>
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:
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.
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
Top Picks & New Arrivals
