L01 exemplar. Right-click and View Source to see how each part of this page is coded. The file has HEADER, NAV, MAIN (with two ARTICLEs), and FOOTER — the 5 parts of most webpages.

Anatomy of a Webpage

Intro

Every webpage is made of text files (HTML, CSS, JavaScript) that your browser reads and renders. There is no magic — just files and instructions.

5 parts of most webpages

  1. Header — site title, sometimes logo
  2. Navigation — links to other pages
  3. Main content — the unique stuff of this page
  4. Sidebar or aside — secondary related content (optional)
  5. Footer — copyright, credits, extra links

Try it yourself

Right-click anywhere on this page and choose Inspect. The panel that opens is DevTools. Look at the HTML on the left and the CSS on the right. That is literally how this page is made.