Header
The header element is like an introductory element that precedes the main content. There may be headings, navigation elements, or any other auxiliary elements, such as a logo, a search form, etc. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Element In HTML5</title>
</head>
<body>
<header>
<h1>Header</h1>
<nav>
<ul>
<li><a href="/apple">Apple</a>
<li><a href="/microsoft">Microsoft</a>
<li><a href="/samsung">Samsung</a>
</ul>
</nav>
</header>
</body>
</html>
The header element cannot be placed inside elements such as address, footer, or other header.
Footer
The footer element usually contains information about who is the author of the content on the web page, copyright, publication date, a block of links to similar resources, etc. As a rule, such information is located at the end of the web page or main content, however, the footer does not have a clear link to the position and can be used in various places on the web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Element In HTML5</title>
</head>
<body>
<footer>
<p><a href="/license">License</a><br />
Copyright © 2022. easywptutorials.com</p>
</footer>
</body>
</html>
This defines a footer for the entire web page. It contains a link to the license agreement for the use of the service and information about copyright.
The footer does not need to be defined for the entire page. It can also be a separate section of content:
The footer element should not be placed inside elements such as address, header, or other footer.
Address
The address element is intended to display contact information that is associated with the nearest article or body element. Often this element is placed in the footer:
<footer>
<address>
Easywptutorials
<a href="mailto:js@example.com">Email Us</a>.
</address>
<p>© copyright 2022 easywptutorials.com.</p>
</footer>