HTML5 Structural Elements
In this article we learn about different structural elements introduced in HTML5 like header, nav, main and footer with suitable examples.
Prior to HTML5, web developers used the div element for grouping related elements together and apply common styles. As the use of div element is too generic in web pages, HTML5 introduced a bunch of structural elements that can assign some semantic meaning to the content inside them.
The new structural elements introduced in HTML5 are header, nav, main, footer, section, article, and aside. Here we will learn about header, nav, main, and footer. The rest of the structural elements will be covered in future articles.
header Element
The header element contains the main title of the website and/or logo of the website along with other elements that are common at the top of a web page in a website. All the elements that are part of the page header element goes in between the <header> tags.
The nav element is used to display the main navigation of the website and is placed directly under the header of the web page generally. A set of hyperlinks to different important pages of the website are placed in the nav element. All the hyperlinks are placed in between <nav> tags.
main Element
The main content of the web page is placed in between the <main> tags. Generally the main element also contains other structural elements like div, section, article, and aside.
The footer content of a web page is placed in between the <footer> tags. General candidate for footer content is the copyright statement.
The following HTML5 code demonstrates the use of the structural elements described above:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic HTML webpage</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>This is the header of the web page</h1>
</header>
<nav>This is the navigation bar of the website</nav>
<main>
<p>Main section start: This is the main section of the web page</p>
<h2>Important Terms and Definitions</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language is used to describe the content in the web page</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets is used to style the content in the web page</dd>
</dl>
<p>Main section end</p>
</main>
<footer>
<p>This is the footer of the website.</p>
<p>
© Copyright 2019 NETAJI Tutorials. All rights reserved.
</p>
</footer>
</body>
</html>
No comments