Although the <article> element denotes self-contained content, and the <section> element defines sections within a document, their definitions don’t dictate how they should be nested.
Therefore, it’s common to encounter HTML pages where <section> elements contain <article> elements, and vice versa.
The <header> element serves as a container for introductory content or a collection of navigational links.
Typically, a <header> element includes:
Note: It’s possible to have multiple <header> elements within a single HTML document. However, a <header> element cannot be nested within a <footer>, <address>, or another <header> element.
Example
An introductory section for an <article>:
| <article> <header> <h1>What Does WWF Do?</h1> <p>WWF’s mission:</p> </header> <p>WWF’s mission is to stop the degradation of our planet’s natural environment, and build a future in which humans live in harmony with nature.</p> </article> |
The <footer> element delineates a footer for a document or a specific section.
A <footer> element commonly includes:
Multiple <footer> elements can exist within a single document.
Example
A section at the bottom of a document:
| <footer> <p>Author: Hege Refsnes</p> <p><a href=”mailto:[email protected]”>[email protected]</a></p> </footer> |