Website Anatomy 101
The clients I’ve met over the years have had a wide variety of knowledge regarding website anatomy. Some are super savvy side-line coders and others are more like the analog type and know nothing of the internet aside from email. Most are somewhere in between the two with a working knowledge of some of the basics and maybe a few intermediate terms. One trend I’ve noticed when discussing web design with a new client is that they often don’t know how to explain their chosen alterations because they’re not sure how to describe the area of interest. I’ll talk here about the anatomy of a website’s exterior and explain the most common sections, elements, their names, and their functionalities.
The top of the website is called the header. The header is normally static and contains the company logo and the navigation menu. There might be an additional “top section” to the header which might contain social media channel icons and/or the company phone number. The navigation menu is comprised of links to pages within the website.
When hovering over menu items, that item’s “submenu” might open with links to relevant data befitting the top menu item. Even submenus can have submenus. For example, hovering over the top menu item “cars” might open a submenu showing “used”, “new”, and “parts” links. On inner pages, there may be an additional element here called “Breadcrumbs”. The breadcrumbs section is normally above the main content area and shows where you are on the website… like “Home / Cars / New“.
Just below the header on the front page is normally where the slider is placed in website anatomy. A slider is a carousel of images or video with animated text, links and sometimes a call to action. Most sliders feature three to five different slides. The viewer is not meant to live there, only to get the basic information… who you are, what you offer, and how to buy it now or contact you now or request an appointment or estimate now. Too many slider images add unnecessary loading time.
Beneath the slider and header is the main content area. The content should start off with pertinent titles and topic sentences with at least five hundred words of text that thoroughly describes you and your offering. Remember, search engines cannot read photos. Good, relevant text is definitely required! Touch on your past experience or featured products and services and show examples of successful application. Follow up after your main content with another call to action and some testimonials from happy customers. All of that will usually end up imparting some valuable and useful information for both visitors and search engines.
There might be something called a “sidebar” down the right or left side of the pages on a full-screen viewing device. These sidebars contain “widgets” or sections containing content of any kind. Most times they contain alternative menus, links, or additional information regarding the page being viewed.
Within the main content area, there are many elements used in the digital world that were never seen in print. These items help to better organize or add interactivity for website visitors. One such item is an accordion. An accordion helps to condense visible text into sections that are hidden until clicked. This kind of element allows all of the text to reside on the page for search engines, while neatly tucked away for visitors until requested.
Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.
Another nice way to condense and organize information is with something called a “pageable container”. As you can see, the pageable container is a slider that can contain anything from text to images, or video and is a scrollable, interactive element.
Underneath the main content area is the site “footer”. The footer usually contains copyright, business hours, location, newsletter signup, additional navigation menus, post links, or post excerpts.
Eliyahna is a full-time web developer and designer and the CEO of Eliyahna Creative, LLC.
