Use <header> for introductory content or navigational aids, and <footer> for closing information about its section or the whole page.
A <header> typically holds the page logo and main navigation, or the heading and metadata of an article or section. A <footer> typically holds:
Copyright information
Contact details
Sitemap links
Related links
Both can appear many times on one page, once for the page itself and again inside articles or sections. At page level they become the banner and contentinfo landmarks that screen readers jump to. Nested inside an <article> or <section>, they lose that landmark role.
A <header> is not a heading itself. It usually wraps the section's heading element, from <h1> to <h6>.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
