Anatomy of a Website: a glossary of web terms
Ever feel lost in a marketing meeting? Or at a loss for words when talking to your web developer?
Well, my friend, you’re about to learn the basic terminology used in developing and designing a website. No more feeling lost in the shuffle of meetings. You've got this!
We will cover the individual elements of a website and what they’re about. We'll start from the top of a webpage and work our way down to the footer. Don't worry, we'll explain that later.
If you’re looking for a term we haven’t covered, leave a comment and we’ll get it added to the dictionary.
This is the address of a webpage that can be found at the top of your internet browser; a uniform resource locator (URL) is the address of a resource (e.g., a website) on the internet. A URL typically begins with http://, or https://.
The area at the top of the page is usually referred to as the page header. On a typical page such as Google or Yahoo, this area is between 50 and 100 pixels high. It features the company logo, perhaps a strapline and main navigation. It often includes key information or a call-to-action, such as a phone number, contact button or search box. This is the first thing that your visitors will see and will be a common theme throughout your website.
You can think of a site structure as a tree flow chart or a directory with nested subfolders. At the top of the structure is home, immediately below that are the most important sections or topics, and inside of those are, further sub-sections.
Tree Flow ChartTree Flow Chart
Tree Flow Chart / Directory
Organizing how content will be arranged in a site structure diagram is one of the first tasks we do with our clients before starting on the design for a new website. It’s crucial that content is organized clearly from the start, so visitors find the website easy to navigate. We recommend aiming for no more than 3 tiers or nested levels of content below the home page.
Websites are a great way to give people access to lots of information, including archives, but sometimes less is more with content. The more pages you add and the bigger your site structure, the harder it is for visitors to browse and for you to keep pages and files up-to-date. Website visitors typically have a short attention span; they expect to find the information they want quickly. You need to make sure your site structure allows them to do this.
The main navigation is usually a horizontal row of five to eight links (or tabs), which are either at the top of the site structure or are the most important pages on the website. The tabs are clearly visible and obvious and are often highlighted when a website visitor is in that section of the site. The first item is usually a link back to the homepage, although if you want to squeeze in more navigation tabs this can be removed as it's standard practice for the logo in the page header to also be a link back to the homepage.
With more than eight main navigation links (or tabs), a website can look cluttered. This layout doesn’t work at all for smartphones. The common practice is to use a hamburger menu instead to display the menu navigation on mobile design.
A hamburger menu is a button containing three horizontal lines which you tap to reveal a vertical menu that has links to other pages on the website.
Secondary navigation refers to pages below the top level of the website, the second tier of the site structure. Unlike the main navigation, the secondary navigation changes depending on which area of the website the visitor is browsing. Secondary navigation is usually either placed directly under the main navigation or on the left side of the screen (for larger screen sizes). When placed on the left side of the screen, secondary navigation allows the third-level navigation to be displayed as well. Third tier (tertiary) navigation is a useful navigational aid for larger sites. For larger screens where users will almost certainly have a mouse, secondary navigation often appears as a dropdown menu which appears when you hover over a particular menu tab.
Meta tags are fields which aren’t displayed on the screen to website visitors but are used by search engines.
The heading at the top of your page is crucial to attracting a site visitor’s interest. Studies have found that most visitors will look at a web page for less than 30 seconds, so your page needs a snappy (and relevant) title to draw them in. The page title should use the HTML H1 tag because it has special significance to search engines indexing your page.
A useful navigational aid, the breadcrumb trail is usually placed just below the page header and shows at a glance where the visitor is in the site structure, e.g., Home > Blog > Anatomy of a Website. The breadcrumb trail begins at the home page and each link except the last should be clickable to take the visitor to that section.
Hero images or banner images
These terms refer to the large images at the top of the page that grabs the visitor’s attention. If you have several of them that fade in and out automatically or that visitors can click through, this is often referred to as a carousel. Its use should be restricted to key pages such as the home page in order to maximize the effect.
Full-screen and embedded videos
If you have a video you want to include in a webpage, the best way is to upload it to a platform like YouTube or Vimeo, then embed it in your content (YouTube and Vimeo give you the code to do this). Videos take up a lot of disk space (physical space on your website server) and bandwidth (download traffic). So, you probably want to avoid hosting them on your own website. In addition, embedded videos come with video players so visitors can play, pause, jump back and forward throughout the video, etc.
YouTube is a popular search engine, so having your own YouTube channel is good for driving traffic to your website. Full-screen videos can make a big impact when used as the background to a webpage, stretched right to the edge. Unlike embedded videos, full-screen videos will probably be hosted on your own website. You need to pick the right video, one that’s not too busy or complicated, and one that works with text over the top. The overlaid text needs to be fairly minimal. Like image carousels, full-screen videos should be restricted to key pages such as the homepage.
An important consideration for readability is the width of the main content of a page. Text that spans the whole page can be hard to follow, which is why newspapers use a series of narrow columns. On a webpage, content wider than around 30 words can be hard for the visitor’s eye to track. So, we recommend breaking wide sites up into columns to make them easier to read.
A site map is a text-only list of all the pages on a website with links to each page. All our sites come with a sitemap that’s automatically generated so that it’s updated every time a page is added, edited or deleted through the Content Management System. Your navigation and site structure should be clear enough for visitors to easily find what they’re looking for, but a site map is a good way to list everything on your website in case they’re confused. You can create sitemaps in a variety of formats to submit to Google.
The page footer usually consists of links to important (but not very interesting) pages on the site, such as the terms and conditions, site map, and a contact page. Some sites, such as the BBC website, put many links in the footer so that the main navigation can be free of clutter without reducing functionality.
We've just covered a few of the basic terms for website design and development. With the knowledge of these web design concepts, you should be more confident in those web design meetings.