Get Informed

Anatomy of a Website

Hero…favicon…footer all can be a foreign language to some, but below we break down the sections to a website so that you have some understanding what your web developer may be talking about. Click the hotspot icons to read more on what each element is!

map

Favicon

A favicon is a small 16×16 pixel icon that is part of your branding. Its main purpose is to help visitors locate your page easier when they have multiple tabs open. Favicons work best as simple images or one-to-three characters of text.

Site Name

This is your site name most commonly this is your business name. This shows up in your browser tab.

Custom Domain Name

This is your custom domain. It is what will come up when people search for your site in search engines.

Hero/Header

This is a banner image, also referred to as a header or hero image. This is above the fold, or before people have to scroll down. This area should be used to make the most "impact" for your business.

Dropdown

Use of dropdown links help organize pages out, but keeping your main navigation short and sweet. These can be internal links, anchor links, or external links.

Heading Styles

These are heading styles. Heading 1 is generally the largest, Heading 2 is generally a bit smaller

Index/Section

This is a section or index containing a heading and body copy (often a short introduction).

Banner Image

This is an a banner or background image. Horizontal or landscape images are best for these sections.

Index/Section

This is a second section/index that contains more content such as an image, title, buttons or links and a description.

Call to Action

Using buttons in a contrasting colors pulls attention to visitors to click on these buttons to see more.

Footer

The footer of your page contains usually ways for people to go through your site again with quick links, contacting you and then any unlinked pages (from your main navigation)

Call to Action Section

This is a fourth section/index that is also a call to action section. Because it is next to the footer, it is often referred to as a ‘pre-footer’ section. It should take your user to somewhere important and have purpose.

Footer Links

Quick links are commonly used to redirect people back to pages now that they are at the bottom of the site.

Newsletter

Have a newsletter? Footers are a great place to add a form to opt-in to your newsletter!

Let's Connect

Show where people can connect with you! Email, location, phone number, and don't forget your social platforms!

Privacy & Terms

Always ensure that you have these links somewhere on everyone page of your site. The footer helps by having a spot for your copyright, privacy, terms and then possible site accrediation.

Skip to content