The figures regarding our presence and activity on the Internet are impressive. For example, the We Are Social Global Digital Report 2020 claims that the average Internet visitor spends 6 hours and 43 minutes online every day. Thus, there are legitimate 5 billion Internet users, and the number is, of course, constantly growing (here you can see how this number is changing live). Many such statistics lead us to one conclusion – the world can no longer imagine life without the Internet. If so, then she cannot imagine a day without visiting websites. Every day, we turn on web browsers many times for various purposes, and the data carriers we use and interact with our web platforms, websites or webpages. Unless you deal with web design, web development or related fields, you probably don’t even think about building websites – you just use them. There is, of course, nothing wrong with it; such knowledge is not required to be a network user.
However, the topic of the anatomy of web pages is fascinating.
Moreover, you will be surprised how many parts of a website page you know! Surely you have heard about the header, menu, or footer, and these are the components of web pages. How about delving into this topic and learning about the key components of your web pages? So, carry on reading.
Key Components and Design Terms List
Well, parts of a web page terminology and web design terms are numerous. But thanks to this, you have a wide range of possibilities when designing your website. So let’s focus on those that are very common on modern websites then.
Buttons
There may be some websites without buttons, but this is almost unbelievable. Buttons serve different purposes, often call to action prompts to complete interactions or links to another part of the site. Well conceived and designed, they are handy and encourage users to interact by directing the visitor’s eyes to specific information.
Hero image (featured image)
The hero image is the large image at the top of the webpage (not in the header). Most sites only have one hero image, but depending on the page template you choose, they may even have multiple photos side by side in that location. Hero image should be magnetizing, eye-catching. It’s a bit of a greeting to the viewer by which you grab their attention and send the selected message.
Slider
Instead of a static image of the hero, many sites (such as online stores) have an image slider. Here, banners with recommended content are most often placed. It is useful when you have a lot of content to promote or want to show the best deals and encourage users to see them.
Web form
Forms are a handy tool that you will find on many sites due to their versatility. Forms are used to acquire leads, collect email addresses, and build an audience base for various marketing activities. For the user, it is often one of the faster forms of contact. Forms can be attached to external tools, like a mailing platform, or send messages directly to the support or sales department. It is up to you to decide which forms are needed on your website.
Landing page
It stands out from other pages on the website – the landing page is usually the first page seen by a visitor obtained as a result of marketing or canvassing activities undertaken by the company. The landing page can be a standalone page, a micro page, or part of a larger site. Landing pages are used to generate potential customers or present specific products or services.
Hover state
You certainly know this effect; when you hover the cursor over an element on the page, a subtle animation appears, very often fading out or slightly enlarging. This effect is a hover state. It is helpful for users because it informs you whether you can take action on the element that has been hovered over or whether you can click it.
Call to Action (CTA)
It is an influential element of the website from the point of view of business and marketing. You meet CTAs very often while browsing websites. They are usually placed on buttons or link to a vital subpage. Call to action directs site visitors to important information, contributes to goals, and drives traffic to the site.
Links
Generally, the concept of the link is probably familiar and obvious to you, but it is worth mentioning that it does not only refer to your website URL colloquially. Links allow site visitors to jump from one web page to another and are not necessarily just text. They can also take the form of an image. Text links are usually coloured and/or underlined so that you can immediately see them. On hover, the photos can have some animation programmed or be highlighted in some other way to encourage clicking on them. Text links should also indicate when hovered over that it is a clickable link.
Pop-up
A popup gives you additional opportunities to communicate relevant information to your visitors. It immediately attracts the visitor’s attention by displaying itself on the content being viewed. Some pop-ups disappear after a while, and others require the visitor to click x to exit. However, you have to use them wisely as they are a very annoying element. The message on the pop-up is valuable and encourages the user to take an interest in this content. Usually, information about discounts, attractive time offers, and free consultation or content samples are placed here. Remember not to abuse them.
Favicon
A favicon is this little icon displayed on a card that identifies a website. Usually, it is a simplified brand logo that is easy to see with such a small size. It makes it easier to find the page in the maze of open browser tabs, so it must be visible and recognizable to connect it to your site despite its small size immediately.
Drop-down menu
This type of menu is often found on mobile views but desktops too. The dropdown menu shows its content – subpages when the user hovers over the main navigation item. A drop-down menu helps the user delve into the site’s content and shows the structure of the pages. They are helpful because it would be bad practice to create a menu with all the subpages on your site immediately visible. There would even be no room for it; it was also illegible.
Responsive design
It has been a widespread and eligible web design practice for years. Responsive design means designing a website to adapt to the screen on which it is viewed, regardless of the device on which the user visits it.
What is the anatomy of a Web page?
Okay, you may have noticed that we have intentionally left out some of the primary, essential parts of a website in our above glossary. We did this on purpose because those components don’t need to be on every website or are less common. In turn, the elements that we will present below are almost essential on every page. When you browse the internet, you expect the websites you visit to behave in a certain way. For this reason, the website’s layout is similar across websites; therefore, the website’s design should contain certain parts. They may look different, but you will undoubtedly meet them while browsing the web.
Header
Starting at the top of the page, we have a header. The form of the header varies. It can be the logo itself or the name of the website and menu. Also, the header often includes an additional, short tagline explaining what page they are viewing and a search box.
Menu
The menu is placed in an easily accessible, visible place on the page to allow easy exploration around the site. Therefore, the navigation menu is most often found in the header or a drop-down panel, especially in mobile site views. On mobile devices, designers often use a hamburger button, also known as a collapsed menu icon. Its function is to toggle the menu or navigation bar between the collapse behind the button or the display on the screen. The menu should contain the most important categories.
Body
It is the most significant part of the website. It is the area where the most content of the page is contained. What you put here is entirely up to you. There are tons of types of content, from text to images and videos. It all depends on the purpose of your website and your message.
Sidebar
It is a less crucial component than the header or so, but it often appears on websites. This is a column, a column that runs to the right or left of the web page, containing content that stands out from the central sector of the page. Typically forms, additional ad navigation, featured blog posts, and more are posted here. It is not recommended to add it in mobile views because until users scroll down the main area of the page, it will not be visible anyway. Likewise, the sidebar is not necessary on every page of the site; it is often omitted from the home page or not added to the page.
Footer
As you might guess, the footer is at the bottom. The footer summarizes the page contains another dose of essential information, such as contact details, links to all (or most) pages of the site, social media icons, a copyright tag, and a timestamp. There is also often a contact form and various calls to action.
What are the 3 main parts of a Web page?
The approach to defining the main parts of the web page may be different; we will focus on the construction and look at the code. A web document or website is a set of HTML (Hypertext Markup Language) tags saved in a plain text editor and run in a web browser. To create such an HTML document, we create a basic structure from three container elements:
- <html>
- <head>
- <body>
The <html> tag represents the root directory of an HTML document. It is a container for all other HTML elements (except the <! DOCTYPE> tag). The <head> element is a container for metadata (data related to an HTML document that is not displayed) and is placed between the <html> tag and the <body> tag. Metadata typically defines the document title, styles, scripts, and other meta information. The <body> tag contains the entire website content; it defines it. Everything you want to appear in the browser’s navigation area, such as headings, paragraphs, images, hyperlinks, etc., is here. Thus, this is what the main web page elements look like when we study the code.
How is a website structured?
Even though they contain many common or even permanent elements, web pages may have different structures. And what exactly is such a website structure? This term refers to how the various pages on your site relate to each other, how your content is arranged, and the hierarchy of each element. Therefore, it is a method of proper presentation and organization of information on the website. Creating an appropriate website structure supports an impeccable user experience. It is actually a piece of the UX designers’ job – solving broader problems related to UI design and usability thanks to a well-structured website structure. Creating it properly makes it easier to navigate the site, find information, and give you greater satisfaction from using the website. It also helps to group content appropriately. It is also an aid for indexing robots and search engines, which affects the site’s SEO ranking. Design choices regarding the site structure are dictated not only by user needs and good practices but also by business goals.
UX designers aim to find the perfect site structure when designing a new, modern website. It has been assumed that the ideal structure of a website can be viewed as a pyramid. Starting with the home page at the top, going down, then adding categories, subcategories, and individual posts and pages. Of course, the website content will differ from each other, but it is possible to distinguish these permanent parts of a website.
Conclusions
We discussed some key terms from the world of web design. Of course, this topic is much broader and could be discussed for much longer. Nevertheless, we have included essential information here, which will be helpful, for example, when talking to web designers and a web developer, as well as for yourself. Notice how many of these elements can contribute to the success of your business or if poorly implemented, even failure. So it’s worth having a basic understanding of the anatomy of a website and the meaning of its individual parts.
August 10, 2021
