The Anatomy of a Webpage

Graphic contains an image of a desktop computer with a webpage open. Red arrows point to various sections of the page. Overtop of the image is a blue circle on which text reads "The Anatomy of a Website Page"

Your Guide to 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:

 

Image is the footer for Legend Web Works. It contains links to other pages on the website.

   

 

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:  

 

Image is the hero spot for Cincinnati Nature Center. Background is a picture of cluster of trees. Overtop there is a circular graphic that reads "Protect what you love." On the interior of the circle are icons of animals, flowers, and tree leaves. At the bottom of the image is a black bar with overlaid text that reads "Support your favorite trail"

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: 

 

The graphic contains two images. On the left is two women in athletic clothing. The older woman is leaning on the younger in a friendly manner. Behind them is an exercise bike. Overtop of the image there is text that reads "Eat Clean." The right image contains a rendering of the younger woman from the left image on an exercise bike. She is leading a group of women through a workout routine. Over top this image is text which reads "Fundraising." Below is an orange button which links to a fundraising page.

 

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 text.  

 

Here is an example: 

 

Graphic contains an image of a chef pouring a spoonful of sauce over a tray of shrimp, limes, and greens. Over the image is the logo for Golden Lamb, and text which reads "Accepting Applications: Join our team."

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: 

 

Image is the footer from Cincinnati Nature Center

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 Head 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.