Theory
Theory
Comments

The header and footer tags

In addition to the unique main content of the page, we have an introductory part and a concluding part that are repeated on other pages.

The <header> tag describes the introductory part of the page, which is often called the “header”. Similarly, the <footer> tag describes the concluding part of the page, or the “footer”.

<header>
  I am the website header. I can be repeated on other pages.
</header>
<main>
  I am the main content! I live only on this page.
</main>
<footer>
  I am the website footer. I function similarly to the header.
</footer>

Usually, the <header> and <footer> tags appear only once per page, but they may also be used repeatedly.

Let’s mark up the header and footer for the main page. For now, let’s use text “placeholders” to stand for the content.

The <header> tag not only provides the website header with a logo and a menu. It can be used, for example, as the “header” for some article or section of the website. Of course, in the context of an article, <header> is not called a “header”, but the introduction, which may contain headings, a table of contents, and so forth.

The situation is similar for <footer>. Typically this is the footer of the website, where copyright information, contact information, and similar information are listed. But <footer> may be used in other sections of the website. For example, you can add the following additional information within an article in the “footer”: information about the author, additional links, and so on.

index.html

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>The website of a beginning coder</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <main> Greetings to everyone! Welcome to my first site. Up until just recently I had no idea what a coder does for a living, but now I have found interactive courses in HTML and CSS and I have set myself the goal of becoming one. I even was assigned an instructor, Muffin, who does not allow me to slack off and will track my progress. My first assignment is to keep a diary and honestly write about all of my accomplishments. </main> </body> </html>

Goalscompleted

Before the tag <main> add the tag <header> with the text Website header,
and then after <main> add the tag <footer> with the text Website footer.

The header and footer tags

Comments

Log in

Sign up

Restore access