Defining the structure and parts of a web page does not only mean giving a visual and graphical layout or defining the navigation tree, it is much more than that: it means configuring the site so that it can tell the user where he is and where he is going.
have you come across websites that look awkward and cluttered? According to Taylor and Francis Online, it takes users about 50 milliseconds (i.e., 0.05 seconds) to form an opinion about your website that determines whether they like it or not, whether they stay or go.
Therefore, when we talk about the parts of a web page, you can’t improvise, since such a structure is well defined, using common elements for Internet users. In addition, many aspects come into play such as accessibility and functionality.
So, in this new blog post, you will discover in detail the parts of a website, its structure and the main elements that make it up. join us!
Parts of a website according to its structure
When we talk about the essential parts of a web page, we usually refer to the web structure. However, we can also refer to the parts of a website according to its content. For a better understanding, we explain it as follows:
Web structure: parts of a web page according to its structure.
Header or header
Footer or footer
These are the key components of the website. Most of us don’t think about them while surfing the Internet, but we would notice them if they were missing or somehow off, as they are essential elements.
One of the main parts of a web page is the header, which houses the site’s identifying elements. For example:
Logo or brand identifier.
Call to action (CTA).
Text or headline.
In modern design, all the space above the fold of the home page is considered the header. Being the strategic part of the page that people see in the first few seconds of loading a website, a header acts as a kind of invitation, so it should provide basic information about the site so that users can understand what is offered in seconds.
If we talk about the parts of a website in HTML language, the header should appear between the following tags:
The second part of a website is the body, which is the center that contains most of the content of a page. For example, the photo gallery you want to display, an article you want your visitors to read.
It is an area that changes from page to page. The different parts of the body of a web page are generally structured based on columns that distinguish the level of importance of the content.
To identify the parts of a web page as it relates to the body in HTML, you can quickly do so between the following tags:
Another important part of a web page is the footer. A footer serves the same function as the header, that is, it is the area of the website that is constant from page to page, except that a footer is at the bottom instead of the top.
You can put whatever you want in the footer, but what is usually in this part is:
social network icons.
Links to other important pages of the site.
As you may have noticed in the previous parts of a web page, the HTML footer is located between these tags:
<footer>the content of the footer</footer>.
Example of the parts of a site
The following is a basic home page of an example web site. Although most of the parts of a website are represented in this image, these are not the only components of the website when you design yours.
As you will see, the blue color would be the header. In it is the brand logo and the navigation menu. Generally, this part is always static even if you browse other pages or scroll.
The magenta color would be the body, which varies its information on each page of the website.
Finally, the yellow color is the footer of the website. It is always at the bottom of each page of the website and the content is always the same. The logo, contact information, available payment methods and also the social network icons.
Parts of a web page according to the content
These are the parts of a web page according to the content and its distribution:
Products and services
Posts and feed content
Forms or contact information
Social media buttons
Below, we show you each element in more detail.
Also known as landing page, the home section is one of the basic elements of a website. It is precisely the first screen the user gets when entering the site and determines the rest of the digital journey. If the visitor does not find what he is looking for in a few steps, it is very likely that he will end up abandoning the attempt. These are the aspects you should take into account to make your landing page stand out:
Create a good web design with well-structured content.
Check the loading speed of the website, they must be fast.
Responsive web design is crucial at this point since the use of cell phones or tablets to surf the Internet is the most used nowadays.
2. Search engine
Another element of a website is the search engine bar or simply the magnifying glass button. Remember that nowadays, Internet users want everything and they want it now. They rarely have the time to browse the web in peace, so you must ensure a good indexing of the content (use tags).
An element that makes the basic structure of a web page is the menu. It seems a bit obvious but you can’t imagine how many websites fail in this task. You should not only think about where you will place it, but also its form and content. It can be: a drop-down menu, a fixed menu, a menu that indicates other sections or directly parts of information.
4. Products and services
If we ask ourselves what are the parts of a web page, we will surely agree that the body is the most important section of all. For example, if you are looking to create your own e-commerce, the section where the products for sale are located is crucial to determine the success of the website. Think about what your customer needs and make it happen.
why is the Blog section one of the essential parts of a website? Today, brands are using blogs to grow their business and expand their reach. B2B marketers who use blogs get 67% more leads than those who don’t, according to Hubspot.
Blogging is a way to drive traffic to your website and increase your SEO. The more you post in the blog section of your site, the more content search engines have to crawl and index. This means they can easily recognize that your site is an information resource that people can access.
Outside of the products and services you offer, you could use your blog to create content that your audience is encouraged to share with their connections. As such, it is one of the most important parts of a website for a business.
6. Featured Content
This section usually goes exclusively on the home page. It guides visitors to parts of a web page that will become website goals, i.e. the actions, interactions, etc. on your website that serve a purpose.
For example, booking a flight on a travel agency website or buying products in an online store are examples of this.
7. Call to action (CTA)
Probably, you have already heard about what Call to action is. If not, follow the link above. They are very important parts of a web page as well, as CTAs serve to guide website visitors to relevant information, fulfill site objectives and navigate the page.
CTAs can be obvious, such as buttons, or more subtle, such as links within text, but they all serve the same purpose: to guide visitors to information that is key to them.
Sidebars, like menus, are parts of a web page that often aid navigation. When a large amount of information needs to be sorted, such as various blog posts, or products, a sidebar can help.
Sidebars are often used to display related pieces of information, contain CTAs, or guide visitors to the next step after they have read a post or added a product to their cart, for example.
9. Posts and “feed” content.
One practical way to get your website visitors to engage with your content is to offer a “feed” of content. This can be a slideshow of recommended products or, in our case, the latest blog posts. It serves to pique the visitor’s interest and guide them to complete the website’s objectives.
10. Internal links
Depending on the content, internal links are useful parts of a web page that create an ideal navigation flow through your website. Internal links take users to the blog page, where they can browse the full list of posts and find something that interests them, completing a website objective.
Sidebar content and featured content CTAs are another way to accomplish the same thing, with an even more effective attention grabbing effect.
11. Forms or contact information
Contact forms are parts of a web page that are very common to find. They serve to obtain contact information from visitors. Registration forms, request forms, shipping information forms and the like are examples of how forms are used on websites.
12. Buttons to social networks
Links to social networks are a popular addition to most websites. Although sometimes these links are displayed in the footer, social media links can appear anywhere on a website. If a visitor likes your page, they will want to receive updates via social media.
Technical parts of a website
The information behind a website, such as hosting, domains and the content management system (CMS), such as WordPress, are still important to fully understand the parts of a website and its anatomy.
Plugins are applications that add functionality to your website. Your website builder will offer you a menu of plugins compatible with your interface. Some are free and others require a subscription or an account with a third-party service.
Plugins can be found in many parts of a web page and can include:
Social sharing buttons.
Email subscription forms.
2. Web hosting
Hosting is like a small piece of Internet real estate on which you build your website. All sites need to purchase hosting, which is basically renting space on a server to store and publish your content.
Like renting, web hosting must be renewed annually. Most website builders also offer a list of compatible hosting services.
3. Domain name
Every website has a unique location on the Internet that is accessed by its IP address. This address is a long series of numbers, so there is a “friendly” text version called a domain name. The domain name is also called a web address and usually has the following standard formula:
.org, .com, .edu, etc.
Pro TIP: Communicate the nature of your website as clearly as possible by giving it a domain name that is easy to remember and spell.
The best courses to develop the parts of a website
You already know all the parts of a website that you need to keep in mind to make your next launch a success. would you like to learn a little more about this topic? We share with you a list of the best courses that WP designed especially for people like you.
1. Sketch from zero to expert
In this course you will learn how to use Sketch, the best UI design tool to express your ideas effectively and integrate all parts of a website.
2. UX and UI Fundamentals
You will learn the importance of user experience, user interface, the difference between the two and how to apply them in your next project that best combines the parts of a web page.
Fundamentals of UX and UI.
3. Web development: HTML and CSS from scratch
This online course will take you from zero to a level where you will be able to convert any design, be it an image or a .psd, to HTML code. You will discover topics such as browser functionality, introduction to HTML, tags and attributes, web forms, graphical HTML, introduction to CSS, selectors, responsive website design, animations and much more.
Web development: HTML and CSS from scratch.
5. Bootstrap: Build your website responsive
It will allow you to learn from scratch what a Framework is, how to install Bootstrap 4 and how to use it to create a website. During the classes you will learn step by step the different Bootstrap components and how to develop with the grid system.
Bootstrap from scratch: Build responsive websites.
6. Git and Github: Web Version Control
These tools will allow you to streamline the collaborative development of our web projects. In this course you will learn how to use Git, the world’s most popular version control system, and how to download and make changes from GitHub.
Git and Github: Version control in web projects.
We hope you found this intensive guide to the parts of a web page useful. You don’t need to understand all the underlying technology to talk intelligently with a web designer or developer.