The Anatomy of a Web Page and Interactive Elements (Links, Buttons and Forms)

Why Every Page Follows the Same Shape

Open almost any website and you can find your way around within seconds, even if you have never seen it before. That is not luck. Every well-built page is assembled from the same handful of parts, in roughly the same order, and visitors have learned that order so well that they no longer notice it.

Once you can name those parts, you stop seeing a website as a picture and start seeing it as a structure: a header that tells you where you are, a hero that says what this is, a body that explains it, and a footer that holds the details. And once you can see the structure, you can describe what you want built — which is the whole point of this phase.

A page is built from a stack of horizontal bands, one under another. At the top sits the header, with the logo and the menu. Below it comes the hero — the first big statement. Then the body, made of content sections, sometimes with a sidebar running alongside. At the bottom is the footer, holding the small print, links and contact details.

Businesses rarely invent a new arrangement. A shopper, a reader and a first-time visitor all expect the logo top-left, the menu across the top, the main action near the top of the page, and the contact details at the bottom. That expectation is worth far more than originality — break it and visitors hesitate.

The pattern is old and it is everywhere: news sites, banks, shops, government portals. It survived because it works. Visitors arrive knowing almost nothing, and they have to be answered three questions in order — Where am I? What is this? What do I do next? The header answers the first, the hero and body answer the second, and the buttons answer the third.

The pattern also protects the business. When the same structure repeats across every page, a visitor who learns the site once can use it everywhere, and a change to the header changes every page at the same time.

The Top of the Page — Header, Logo and Navigation

The top of the page is the most valuable strip of screen a business owns. It is read first, on every page, by every visitor — and it has one job: to orient people and let them move.

The header is the strip across the very top of the page. It holds the logo, the main navigation, and usually the most important action on the site — a Login, a Book Now, a Get Started. It sits above everything else, and on most modern sites it stays fixed in place as you scroll, so the menu is never out of reach.

Because it repeats on every page, the header is where a business spends its consistency: same position, same size, same colours throughout. A header that shifts or changes between pages makes a whole site feel unfinished, even when every page works perfectly.

The logo is the small mark in the corner that tells you whose site you are on. It links back to the home page — always — because that is what every visitor expects to happen when they click it. It is often the first thing on the page and the last thing a visitor forgets.

A logo has to survive being tiny: a phone header, a browser tab, a favicon. That is why good logos are simple shapes with a readable name beside them, not detailed illustrations. On a page, the logo is not decoration — it is the anchor that quietly says “you are still here”.

Navigation is the list of links that tells visitors what the site contains and how to move around it. On a desktop it usually runs across the header; on a phone it collapses into a menu button that opens a drawer or a full-screen list.

Good navigation has few items — usually four to seven — named in the words the visitor uses, not the words the business prefers. Every item should lead somewhere that actually answers it. A menu link that opens an empty page teaches visitors to stop trusting the menu.

The hero is the large first block below the header: a headline, a supporting line, usually one button, and often a picture or a product shot. It exists to answer, in about three seconds, what this business does and who it is for.

The hero is not the place for clever wording. A visitor who cannot tell what you sell by the time the hero ends will scroll away. One clear sentence, one obvious action, and the rest of the page left to do the explaining.

The Body — Content Sections and Sidebars

Below the hero the page settles into work: sections that explain, prove, price and answer questions. This is where the visitor is convinced — not by a bigger claim, but by clearer information.

The body is everything between the hero and the footer, and it is built from sections. Each section carries one idea: what you offer, how it works, who it is for, what it costs, what people say about it, and the questions that stop people buying.

Sections are usually separated by spacing, a change of background, or a heading. That separation matters — it lets a visitor skim the page, stop at the section that concerns them, and skip the rest. A page with no sections is a wall of text that nobody finishes.

Hierarchy is the order of importance: one main heading per page, section headings under it, and smaller headings inside those. Size, weight and colour make that order visible at a glance, so a visitor who reads only the headings still gets the whole story.

Reading order follows the same logic. On a wide screen the eye moves down and slightly left in a loose F shape — so the important words belong at the start of a heading and the start of a paragraph, not buried in the middle. On a phone, where everything is one column, the order is simply the scroll: whatever is written first is read first.

A sidebar is the narrower column beside the main content, holding things that support the page without interrupting it: related links, contact details, opening hours, a small form, or a short list of other services.

Sidebars are secondary by definition. If something belongs in the sidebar on every page, it probably belongs in the header or the footer instead. And on phones a sidebar drops below the main content — so nothing essential should ever live there.

The Footer — Where the Details Live

The footer is the quiet strip at the very bottom of the page, and it is the most underrated part of the structure. Visitors reach it when they are already interested and looking for something specific: an address, a phone number, a policy, or a way to reach a human.

The footer holds the details that matter but do not need to interrupt anyone: contact information, a physical address, the links people look for later — About, Contact, Privacy Policy, Terms — and the business's social handles. Payment badges, registration details and a copyright line usually sit here too.

For a Nigerian business, the footer is where trust is finished off. A real address, a reachable phone number and a visible privacy policy are often the last things a hesitant customer checks before paying.

Because the footer appears on every page, it is the one place where the full site can be listed at once — every service, every policy, every route to contact. That makes it a safety net: a visitor who has not found what they want in the body will almost always scroll to the bottom before leaving.

Keep it organised in columns with short headings rather than one long list of links. The footer is read, not studied, so clarity beats completeness.

Links and Buttons — The Controls People Click

Everything a visitor can click falls into two families, and confusing them is one of the most common mistakes on a business website. A link moves you somewhere; a button does something. Both belong on every page, and each has its own place.

A link is text that takes you to another place — another page, another section, another site. It is underlined or coloured, and it is what you use for navigation: “Read our story”, “See pricing”, “Visit the blog”.

A button is a control that makes something happen right here: it submits a form, starts a payment, opens a dialog, places an order. It is a shape with a label on it, not a sentence. The rule is simple — if the visitor is going somewhere, use a link; if something is going to happen, use a button.

The primary button is the one action the page is built around: Buy now, Get started, Book a call, Send message. It carries the strongest colour on the page, and it should appear once per screen — twice at most.

If everything is primary, nothing is. When a page offers five equally bright buttons, the visitor stops to choose instead of acting, and hesitation is where sales are lost.

The secondary button is the supporting action: Learn more, See how it works, View all, Contact us. It is usually outlined or in a quieter colour, so it sits clearly below the primary without competing with it.

Primary and secondary buttons usually travel in pairs, with the primary placed first or on the right. The pairing gives the visitor a choice without giving them a decision: act now, or find out a little more first.

Ghost buttons are outlines with no fill; text buttons are just words; icon buttons are a single small symbol — a search glass, a menu bar, a cart, a close cross. They exist to keep a busy interface calm: toolbars, card corners, table rows, and anywhere a full button would be too loud.

Icon buttons carry a risk. A symbol nobody recognises is worse than no button at all, so keep them to the handful of icons the whole world already knows — search, menu, close, cart, play, share — and put a visible label on anything else.

A good button answers the visitor before it is clicked. Hovering darkens or lifts it; pressing pushes it in; a disabled button is greyed out because something is missing — an empty field, an item not yet chosen; a loading button shows a spinner or changes its wording to “Sending…” and refuses a second click.

That last state matters more than it looks. Without it, an impatient visitor clicks twice, pays twice, or submits the same form twice. The loading state is not decoration — it is the interface telling the truth about what is happening.

Forms and Inputs — Asking the Visitor for Something

A form is where the visitor types, chooses and confirms — and it is the point where a friendly website can suddenly become a wall. Every field you ask for is a small cost to the visitor, so the rule for forms is always the same: ask for as little as possible, and make each step obvious.

An input field is a single line the visitor types into: name, email, phone, password. A form is the group of fields collected together and sent in one go, usually by a button at the bottom labelled with what it actually does — “Create account”, “Send message” — rather than a vague “Submit”.

Every field should have a label sitting above it, not a placeholder that disappears the moment typing starts. Placeholders vanish; labels stay. On a phone, a well-built form also changes the keyboard to match the field — a number pad for a phone number, an email keyboard for an address.

These are the controls that save typing. A checkbox is a tick for something independent — “I agree to the terms”. Radio buttons are a set of circles where only one can be chosen — delivery method, payment type. A dropdown hides a longer list behind a single box. A toggle is an on/off switch for a setting.

Choosing the right one is simply a matter of the question being asked: many choices allowed, use checkboxes; only one allowed, use radio buttons or a dropdown; a setting that is either on or off, use a toggle. Getting this wrong is how visitors accidentally agree to things or submit half-finished choices.

At every moment the visitor should be able to see what to do next without thinking. One clear action per screen, the button placed where the eye already is, and wording that names exactly what will happen: “Pay ₦25,000” rather than “Continue”.

Feedback closes the loop. After a tap, tell them what happened — “Saved”, “Message sent”, “Payment received” — or, if something went wrong, say what and how to fix it, next to the field that caused it. Silence after a click is the fastest way to make a working site feel broken.