#30DaysofHTML Day 20: < header > and < footer >
Not just for the top and bottom of the page
<header> is for the top of your web page, while <footer> is for the bottom. Yup, you guessed it - not that simple! Just as we learned with <address> back on Day 1, the placement of <header> and <footer> is critical to communicating meaning.
The Rules of <header> and <footer>
There are lots of common characteristics between <header> and <footer> in terms of what is permitted and how they are used.
⛔️ These elements may not contain themselves or each other. In other words, no <header> in <footer> or <footer> in <header>; no <header> in <header>; no <footer> in <footer>. Furthermore, neither <header> nor <footer> may appear in <address>.
✅ When these elements appear close to the <body> and </body> tags, it's assumed these elements are the <header> and/or <footer> for the document. (This is similar to <address>.)
✅ When these elements appear in a <section> or <article>, it is assumed they are they <header> and/or <footer> for that <section> or <article>.
✅ <header> and <footer> are never required, but they are convenient and helpful for organizing the beginning and ending of pages and documents.
<footer> in other places
✅ We already saw how <footer> is an option to use in a <blockquote> following the MDN example back in our <blockquote> and <cite> posts.
<blockquote>
<p>Bounty hunting is a complicated profession.</p>
<footer>The Client in <cite><a href="https://www.starwars.com/news/the-mandalorian-quotes">The Mandalorian</a></cite></footer>
</blockquote>🤷🏿♂️ Also, <footer> is not exclusively limited to the bottom of a document. WHATWG’s example shows <footer> marking up a return to the home page:
<body>
<footer><a href="../">Back to index...</a></footer>
<hgroup>
<h1>Lorem ipsum</h1>
<h2>The ipsum of all lorems</h2>
</hgroup>
<p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<footer><a href="../">Back to index...</a></footer>
</body>How complicated is this?
For <header> and <footer>? Not too bad. But headings, as in <h1> to <h6>, assigning these correctly, and that little <hgroup> element in that previous example? That can be a nightmare. (Also, please don’t send mean tweets over <hgroup>.) Explained tomorrow, we promise!
Today’s CodePen demo also has a lot of comments in it, explaining our placement of headings, headers, footers, articles, and more.
<header> and <footer> demo
🖥 View the <header> and <footer> demo on CodePen.
Challenge: Using <header> and <footer> (and other elements!)
👩🏽💻 Try today’s CodePen Challenge about the use of <header> and <footer>. When you’ve completed it, post your answer in our discussion in Substack.