Parts of a Website: An Annotated Example (Anatomy of a Website) | How-to Guide

The parts of a website explained on a real, labelled We.Inc example design: header and navigation, hero, call to action, services, proof, about, contact form and footer, plus the behind-the-scenes parts like the domain, title and sitemap.

Most small business websites are built from the same eight parts, top to bottom: header and navigation, hero, call to action, services, proof, about, contact and footer. Behind them sit a few parts visitors never see, such as the domain, the page title and the sitemap. Below, each one is labelled on an example design made with We.Inc.

An example accounting firm website design made with We.Inc, showing the header, navigation, hero headline and call to action button
Example design (not a real customer). Numbers in the list below match the parts from the top of the page down.

The visible parts, top to bottom

  1. Header. The strip across the top with the logo or business name. It appears on every page so visitors always know where they are.
  2. Navigation (menu). Links to the main pages or sections: Services, About, Prices, Contact. Keep it to five to seven items. On phones it folds into a menu button.
  3. Hero. The first screen: a headline that says what you do and for whom, a short supporting line and often a picture. Visitors decide in seconds whether to stay. See hero section examples.
  4. Call to action (CTA). The main button, such as Book a call or Get a quote. Put it in the hero and repeat it near the bottom.
  5. Services or features. What you offer, one short block per item, each with a line on the result the customer gets.
  6. Proof. Reviews, examples of work, certifications or guarantees. Use only real ones.
  7. About. Who is behind the business and why they are worth trusting. See how to write an about us page.
  8. Contact. A form, phone number, email and address or service area. See how to add a contact form.
  9. Footer. The bottom strip: contact details again, secondary links, privacy policy, and social links.

The parts visitors do not see

PartWhat it does
DomainYour address, such as yourbusiness.com
HostingThe computers that serve the site to visitors
Page title and descriptionWhat shows in Google results and browser tabs
SitemapA list of your pages that helps search engines find them
FaviconThe small icon in the browser tab
Share imageThe picture shown when your link is posted on social media

Same parts, different page lengths

A one page website stacks all of these parts on one scrolling page, and the menu jumps to each section. A multi-page site gives services, about and contact their own pages but keeps the same header and footer on each. A web app adds sign-in and saved data on top.

Getting all the parts on We.Inc

Every We.Inc template already includes a header, navigation, hero, CTA and footer, and published sites get a title, sitemap and share image set for them. The free plan publishes up to 3 template sites on a we.inc address, with no AI credits and no custom domain. Paid plans, from $20 a month, add AI building and your own domain. Browse the templates.

Frequently asked questions

What are the main parts of a website?

Header, navigation, hero, call to action, services, proof, about, contact and footer, plus hidden parts such as the domain, hosting, page titles and sitemap.

What is the hero section of a website?

The first screen visitors see: a headline, a short supporting line, often an image, and the main call to action button.

What goes in a website footer?

Contact details, secondary links such as privacy policy and terms, social links, and sometimes a short menu repeat.

Does a one page website have the same parts?

Yes. It stacks the same sections on one page, with a menu that jumps to each one instead of opening new pages.

More in Guides

Related guides and tools

Start building

Product

Who It's For

Features

Resources

Company

View Sitemap