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.

<p class="lead text-xl text-[#3a3a3a] mb-8"> 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. </p>

<figure> <img src="/img/showcase/accountants-1600.webp" alt="An example accounting firm website design made with We.Inc, showing the header, navigation, hero headline and call to action button" loading="lazy" width="1600" height="1000" /> <figcaption>Example design (not a real customer). Numbers in the list below match the parts from the top of the page down.</figcaption> </figure>

<h2>The visible parts, top to bottom</h2> <ol> <li><strong>Header.</strong> The strip across the top with the logo or business name. It appears on every page so visitors always know where they are.</li> <li><strong>Navigation (menu).</strong> 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.</li> <li><strong>Hero.</strong> 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 <a href="/guides/website-hero-section-examples">hero section examples</a>.</li> <li><strong>Call to action (CTA).</strong> The main button, such as Book a call or Get a quote. Put it in the hero and repeat it near the bottom.</li> <li><strong>Services or features.</strong> What you offer, one short block per item, each with a line on the result the customer gets.</li> <li><strong>Proof.</strong> Reviews, examples of work, certifications or guarantees. Use only real ones.</li> <li><strong>About.</strong> Who is behind the business and why they are worth trusting. See <a href="/guides/how-to-write-an-about-us-page">how to write an about us page</a>.</li> <li><strong>Contact.</strong> A form, phone number, email and address or service area. See <a href="/guides/how-to-add-a-contact-form">how to add a contact form</a>.</li> <li><strong>Footer.</strong> The bottom strip: contact details again, secondary links, privacy policy, and social links.</li> </ol>

<h2>The parts visitors do not see</h2> <table> <thead><tr><th>Part</th><th>What it does</th></tr></thead> <tbody> <tr><td>Domain</td><td>Your address, such as yourbusiness.com</td></tr> <tr><td>Hosting</td><td>The computers that serve the site to visitors</td></tr> <tr><td>Page title and description</td><td>What shows in Google results and browser tabs</td></tr> <tr><td>Sitemap</td><td>A list of your pages that helps search engines find them</td></tr> <tr><td>Favicon</td><td>The small icon in the browser tab</td></tr> <tr><td>Share image</td><td>The picture shown when your link is posted on social media</td></tr> </tbody> </table>

<h2>Same parts, different page lengths</h2> <p>A <a href="/one-page-website">one page website</a> 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 <a href="/guides/website-vs-web-app">web app</a> adds sign-in and saved data on top.</p>

<h2>Getting all the parts on We.Inc</h2> <p>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 <a href="/templates">templates</a>.</p>

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

We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.

Product

Who It's For

Features

Resources

Company

View Sitemap