Page 1: Basic Structure with <header>, <footer>

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.