1. Basic Document Outline: <header> and <footer>
Semantic markup assigns meaning to each part of a web document, defining its role. <header> and <footer> clearly define the start and end of a page or section.
1.1. <header> Tag
The <header> tag is used to contain introductory content for a section or the entire page. It typically includes headings, logos, and search forms.
<body>
<header>
<h1>Site Logo</h1>
<nav>...</nav>
</header>
...
</body>
Note: <header> can be used multiple times within the body, such as inside an <article> or <section>, to act as the header for that specific section.
1.2. <footer> Tag
The <footer> tag contains tail-end information for a section or the entire page. This includes copyright, contact information, and related links.
<footer>
<p>© 2024 Semantic Markup Guide</p>
<address>Contact: webmaster@example.com</address>
</footer>
The <footer> for the entire page should typically be used only once and is generally located at the very end of the document.