• 12 parts
  • Checked September 2026

Parts of a Website

Every part of a web page named on one drawing, from the browser tab to the footer.

Parts of a Website

Name Date

Tap any part to read, rename or leave it out

1 2 3 4 5 6 7 8 9 10 11 12
More options

Write the name of each numbered part.Answer key

  1. Header
  2. Navigation bar
  3. Breadcrumb trail
  4. Main content
  5. Sidebar
  6. Footer
  7. Browser tab
  8. Favicon
  9. Address bar (URL)
  10. Logo
  11. Search box
  12. Hamburger button

Drawn for this site by script, 2026-09-23. Licence: own work.

Each numbered ring is a button. Use the arrow keys to move between them and Enter to choose. Names are read out in Study, and once a part is answered.

Next step Next: the parts of the monitor it shows on

All 12 parts on the diagram

Show the list

Page layout 6

  1. Header The strip across the top, usually the same on every page.
  2. Navigation bar Links to the site's main parts.
  3. Breadcrumb trail Shows where this page sits in the site, top level first.
  4. Main content The one part that changes from page to page.
  5. Sidebar Extra links or facts beside the main content.
  6. Footer The strip at the bottom: fine print, contact details, links.

Browser and phone 6

  1. Browser tab Holds one open page, with its title and icon.
  2. Favicon The site's tiny icon, shown on its tab and in bookmarks.
  3. Address bar (URL) Shows the page's URL, its web address.
  4. Logo The site's own mark, at the left of the header.
  5. Search box Type words here to search the site.
  6. Hamburger button On a phone, the menu folds away behind these three lines.

How this list was compiled: All read 2026-09-23 for the names only; nothing copied. (1) MDN Web Docs, Structuring documents, https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents: the standard parts of a page are the header (a strip across the top with a heading and logo, usually the same on every page), the navigation bar (links to the main sections), the main content (the part that varies from page to page), the sidebar (peripheral information and links) and the footer (a strip across the bottom with fine print, copyright or contact details); HTML has an element for each (header, nav, main, aside, footer). (2) MDN Glossary, Breadcrumb, https://developer.mozilla.org/en-US/docs/Glossary/Breadcrumb, and Wikipedia, Breadcrumb navigation: a trail placed between the header and the main content that shows where the page sits in the site. (3) MDN Glossary, Favicon, https://developer.mozilla.org/en-US/docs/Glossary/Favicon, and Wikipedia, Favicon: a tiny icon shown on page tabs and in bookmarks. (4) Wikipedia, Address bar, https://en.wikipedia.org/wiki/Address_bar, and MDN Glossary, URL, https://developer.mozilla.org/en-US/docs/Glossary/URL: the address bar shows the current URL, a web address. (5) Wikipedia, Search box, https://en.wikipedia.org/wiki/Search_box: a one-line text box for search on web sites. (6) Wikipedia, Hamburger button, https://en.wikipedia.org/wiki/Hamburger_button: a button in a top corner that shows or hides a menu or navigation bar. Licence: own work

The drawing: Drawn for this site by script, 2026-09-23. The page is invented; no site, browser or brand is shown. Licence: own work

How it works

Most web pages share five parts: header, navigation bar, main content, sidebar and footer. This drawing labels them on an invented page, with the breadcrumb trail, the browser around it and the phone version's hamburger button.

Read the full guide

The page, then the browser

Page layout asks the six parts every page is built from. Browser and phone asks the tab, favicon, address bar, logo, search box and hamburger button. Quiz me asks all twelve in one round.

Print a labeled web page

Print it blank, with numbered rings and lines to write on, or labeled as the answer key for a class.

  • On a phone, the navigation bar often folds away behind the hamburger button.

Questions and answers

What are the basic parts of a website?

The header, navigation bar, main content, sidebar and footer. HTML has an element for each: header, nav, main, aside and footer. The main content is the part that changes from page to page.

What is a breadcrumb trail on a website?

A row of links, usually between the header and the main content, that shows where the page sits in the site, such as Home > Shop > Shoes. Each step links back up a level.

What is a favicon?

The small icon a site shows on its browser tab and in bookmarks. The name is short for favorite icon.

More quizzes

Show 3 more

Browse Science Quizzes