The Anatomy of a Webpage
The Fine Line that Makes a Good Website
You can tell the difference between a good website and a bad one in five seconds.
That’s all it takes. It’s almost an instinctual response. If you find yourself scrolling down a webpage, delving deeper into its content, and reading what has been written, that’s a good website.
If you find yourself clicking the “go back” button almost immediately, that’s a bad website. You may not even know why you clicked away. Something about the webpage just looked wrong.
In this post, we will discuss the anatomy of a proper webpage. By the end, you will have a better idea of what makes a webpage look “right” and the missing elements which make one look “wrong.” We will discuss the terms main nav, super nav, hero spot, callout, banner, and footer. 
The Main Nav is Essential for a Good Site
Where is it?
At the top of the page or along the side.
What purpose does it serve?
The main nav contains hyperlinks to every page on the site. It creates a sense of organization on the site and improves the user experience.
Here’s an example:
-l.png)
Here is Legend Web Works’ main nav. You can see how each page is clearly laid out in an organized manner so a user can find any page they wish.
The Super Nav really is Super
Where is it?
Above the main nav in the upper right corner of the page.
What does it do?
The super nav, like the main nav, is used to help the reader navigate the site. It contains information that either does not fit with the main nav or is more important. Not every site needs a super nav. It is only essential in situations where the site needs to be divided into two or three main sections.
My Hero, the Hero Spot 
Where is it?
A Hero Spot appears front and center on a website’s homepage.
What does it do?
A hero spot is meant to grab the reader’s attention immediately and establish the theme and tone of the website. It often will contain a call to action, imploring the reader to either sign up for a service or peruse the site’s selection of products.
Here’s an example:
This is the hero spot for Cincinnati Nature Center. It immediately sets a naturalistic and wild-life-centric tone, establishes who they are and what they do, and tells the reader an action to take (support your favorite trail) and even a gift you will receive if you follow the call-to-action (receive an exclusive vinyl sticker).
A Callout will Catch your Eye 
Where is it?
You can often find a callout near the middle of a page, or sometimes close to the top.
What does it do?
A callout includes an image, a body of text, and a call-to-action button link. It grabs the reader’s attention away from the rest of the site and makes them focus on one topic. It is usually a different color than the rest of the site and its text is longer than a hero spot.
Here is an example:
Here is an example of a callout from the PowerRyde home page. It contains eye-catching graphics, a modest amount of text, and a call-to-action button.
A Banner is Free Real Estate
Where is it?
A banner can be found anywhere on the page, although it usually comes before or after the main content, or even appears on the left or right side.
What does it do?
A banner often holds an external advertisement that is divided from the rest of the site. They will also sometimes contain text and images created by the host site. The purpose of a banner is to separate a subject from the main body of the text.
Here is an example:
This is an example pulled from Golden Lamb, a restaurant in Lebanon, OH. This rectangular image matches the theme of the site and contains a neutral image, with the company’s logo and a simple call-to-action.
A Footer to Boot
Where is it?
A footer appears at the very bottom of the page.
What does it do?
A footer is meant to act as a sort of safety net for readers who have not been able to find what they were looking for elsewhere on the site.
A footer can contain links to:
- Your private policy
- ADA policy
- Copyright notice
- Page navigation
- Your logo
- Your contact information
- Buttons leading to your social media
Here is an example:
This is the footer from the Cincinnati Nature Center site. It contains locations of local parks under their jurisdiction, park hours, ADA policy, privacy policy, and a list of methods of contact.
From Header to Footer 
Now that you have a better understanding of the anatomy of a website, you can look at the next webpage you visit with the eyes of an expert. Not only will this post help you understand what we do here at Legend Web Works, but it will also help you understand why you view certain websites as “good,” or “bad.”  
If you have tried to design your own website in the past or have found that your website is missing one of the key anatomy components, reach out to Legend Web Works immediately. Our team of experts has over two decades of experience in making your website work for you.  
