Header, Footer, Main content, Sidebar

This is a version of a short talk I give during web design class at LCC International University during the second week.

When we talk about a single web page, there are a set of key pieces that most pages share. This blog post focuses on the design of a web page when defining these terms. Not all web pages have all of these pieces, but most of them have most of these pieces. I’ll be using this site, mikeshenry.com, and the LCC website (lcc.lt) as examples.

The first piece is the header of a web page. As you may have guessed, the header appears at the top of the web page. It usually contains a collection of things that are important for visitors to see on every page. Usually, it contains the title and/or the logo of the website and a menu containing links to other pages on the website. Often, it contains other things – a login button, a language switcher if the website has multiple languages, a search bar, social media links, or a phone number / address for the business.

As an example, my website has the same header on every page, which includes the title of the blog and my site’s tagline. I don’t have a menu in my header because I put it on the left side, in the sidebar instead. The LCC website has the LCC logo, a menu, and the language switcher in the header.

Usually, the header is the same on every page of the website. (Sometimes, the home page will have a unique design, and a unique header, but all of the other pages will share the same header.)

The opposite of the header is the footer. It appears at the bottom of a web page, and is usually the same on every page within the website. It often contains things that are important enough to appear on every page, but not important enough to put in the header. Commonly, you’ll see a secondary menu with links to less-important pages; contact information; social media links, a copyright message; sponsors or organizational memberships; or a newsletter signup form.

As an example, we can see contact information, social media links, copyright information, and a secondary menu in the footer of the LCC website.

In between the header and the footer, we have content that is different on each page of the website. Often, this is called the main content or the page content. It contains all of the text, images, etc that appear on a single web page, including the title of the page, any comment sections, etc.

One more website term you should know is the term sidebar, which is a section that appears inside the main content of a page. The sidebar is either on the right side or the left side, and contains supplementary information for the page. You often see a secondary menu, advertising, newsletter signups, search bar, or category lists in a sidebar.

As an example, you can see a sidebar on this page on the left side. It contains a menu, short introduction paragraph, list of my recent blog posts, a list of categories, and a search bar.

In a future post, we’ll talk about how these terms connect to the HTML that is used to create a web page.