Overview of HTML5 New Elements
HTML5 is an upgrade from HTML 4.01 version, that has many new features, advanced functional features, better page views, and many other improvements to match the growing technological needs. The most used and desired elements of HTML5 are <figure>, <figcaption>, <article>, <header>, <main>,<mark>,<footer>, <nav>, <section> and <summary>. These tags/ elements of HTML 5 enables far more user friendly interfaces, with higher performance rates, efficient outcomes, easier to code and implement, and it helps in improvising the layout as a whole.
Top 10 HTML5 New Elements
HTML5 provides new elements to enhance the layout of the document.
1. <article>
The <article> element specifies a portion of a page that includes a separate structure in a document, section, or website and which is recommended to be widely distributed or usable. This may be a group post a journal or daily paper report, a submission to an online newsletter, a remark sent by a customer, or any other substance-free object.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Article Element</title>
</head>
<body>
<article>
<h2>EDUCBA</h2>
<p>EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p>
</article>
</body>
</html>
Output:
- Save the above code in a file with a .html extension.
- Run the html file in a browser, and you would get the output as shown in the below image.
2. <figure>
The <figure> element indicates individual content in a much way as categorizations, maps, images, code articles, and many more.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Figure Element</title>
</head>
<body>
<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img src="educba.png"/>
</figure>
</body>
</html>
Output:
The above code will produce the output as shown in the below image, Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,502 ratings)Course Price
₹6999 ₹41999
View Course
Related CoursesBootstrap Training (2 Courses, 6+ Projects)XML Training (5 Courses, 6+ Projects)CSS Training (9 Courses, 9+ Projects)
3. <figcaption>
The <figcaption> element is used to add description for the image.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Figure Caption Element</title>
</head>
<body>
<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img src="educba.png"/>
<figcaption>EDUCBA (Corporate Bridge Consultancy Pvt Ltd)</figcaption>
</figure>
</body>
</html>
Output:
The above code displays the result as shown in the below image,
4. <header>
The <header> element is used for specifying the header for a document or a section on the page. You can define more than one header in a single document.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Header Element</title>
</head>
<body>
<article>
<header>
<h1>Header One</h1>
<h2>Header Two</h2>
<h3>Header Three</h3>
</header>
<p>The content of the document goes here...</p>
</article>
</body>
</html>
Output:
The above code displays the result as shown in the below image,
5. <footer>
The <footer> element is used for specifying the information such as author information, copyright information, contact, links to related documents, sitemap and many more.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Footer Element</title>
</head>
<body>
<footer>
<p>Copyright © 2019 www.educba.com</p>
<p>Contact: <a href="mailto:hr@educba.com">hr@educba.com</a>
</footer>
</body>
</html>
Output:
The above code displays the result as shown in the below image,
6. <main>
The <main> element is used for displaying the main, i.e. important information of a document.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Main Element</title>
</head>
<body>
<header>
<p>Header information</>
</header>
<main>
<p>Main Information</p>
<article>
<h2>EDUCBA</h2>
<p>EDUCBA is a leading global provider of skill based education...</p>
</article>
</main>
<footer>
<p>Footer Information</>
</footer>
</body>
</html>
Output:
The above code will produce the output as shown in the below image,
7. <mark>
The <mark> element is used to highlight or mark the text with the background color that attracts the user for a particular text on the document.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Mark Element</title>
</head>
<body>
<article>
<p><mark>EDUCBA</mark> is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p>
</article>
</body>
</html>
Output:
The above code displays the result as shown in the below image,
8. <nav>
The <nav> element is used to specify the navigational links on the page. These links provide connections to other pages in a document.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Nav Element</title>
</head>
<body>
<header>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JAVA</a> |
<a href="#">PHP</a> |
<a href="#">PYTHON</a>
</nav>
</header>
</body>
</html>
Output:
The above code will produce the output as shown in the below image,
9. <section>
The <section> element is used to define the standalone section or specific region in the document.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Section Element</title>
</head>
<body>
<article>
<h2> Main Article </h2>
<p>Content of the main header will be displayed here...</p>
<section>
<h2>Section One</h2>
<p>Content of the first section will be displayed...</p>
</section>
<section>
<h2>Section Two</h2>
<p>Content of the second section will be displayed...</p>
</section>
</article>
</body>
</html>
Output:
The above code displays the result as shown in the below image,
10. <summary>
The <summary> tag is a subpart of the <details> tag which provides the text that can be displayed or hidden when the user clicks the heading.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Summary Element</title>
</head>
<body>
<details>
<summary>
EDUCBA - Corporate Bridge Consultancy Pvt Ltd
</summary>
<p>It is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</p>
</details>
</body>
</html>
Output:
When you run the above code, it will display the result as shown below,
As shown in the image, click on the heading, it will display the hidden text as shown in the below image,
Conclusion
So far, we have seen how new HTML5 elements are useful for various tasks in the creation of the website. These new elements read the document in a more accurate & up to standard way and develop more complex and efficient web apps. The new HTML5 elements give some additional extra features to generate interactive websites.
Recommended Articles
This is a guide to Html5 New Elements. Here we discuss the top 10 new elements of Html5 to enhance the layout of the document. You may also look at the following articles to learn more –