Building a website is a huge undertaking and learning about all the parts you need to complete even one page can be confusing. This post will guide you through all the parts of a webpage with a thorough broken down list.
What are the parts of a web page? A web page consists of 3 main the header, the body, and the footer each with inner parts. The Header usually contains the menu and logo of the website. The body is the majority of the page with text, images, video, and content. Finally, footers usually contain text and links.
Let’s start with the header.
1 Header
What is a header on a website? The header is the top part of the website. It usually contains the menu and the logo. They sometimes contain contact information and links to social media as well.
A) Menu
The menu is the navigational tool for the website that contains buttons to visit other parts of your website.
Some important pages to include on your menu are
A. Your homepage
B. Contact page
C. Product/Service page
D. About page
B) Logo – the logo of your business or brand is important to have on your web page for branding purposes if you have one. This helps develop your brand and gives people a visual icons to attach to it.
C) a search bar – search bars are essential or at least beneficial to any website with over 3 pages. A search bar provides a huge upgrade to user experience helping them get exactly what they want on the site in the fastest way possible.
2 the body- this is where the main content of your web page will be.
3) the footer – this is the bottom section of the website that usually contains:
A) footer links that may not be in the main menu. These can include links to a careers page, privacy policy page, terms and conditions page, etc.
B) the logo
C) a copyright notice – it’s usually read something like copyright company name 2021 ©️
D) social media icon links to the social media pages for the website.
Here are some of the common major formats of content on a web page:
Text -on a web page text serves two purposes it is a the easiest form of communication be it helps search engine optimization or SEO.
Images – these help break up text and provide visual aid where needed improving user experience on web pages.
Videos – these take visuals to the next level for web pages giving them more engagement than any single image could on its own.
Audio – while rarely found in single instances on its own, audio part of webpages because of podcasts and apps like Clubhouse.
The parts of the webpage was depends on what type of page it is.
Showing this next section I’m going to be doing over the most common pages and their body parts 💪🦵👃
Homepage:
1) Hero this is the most common section right underneath the header of a home page.
It usually consists Of an image on one side and text on the other. with the text usually being the tagline for the site in bold big type and sometimes some subtext underneath about the website, brand, or business.
This section is usually called the hero because it is the most important part of a web page. This is the first thing people will see when they visit the home page of your site. So it should be optimized with an image and text that tells people what you do and why they should care.
2)social proof – this is another very important part of a homepage. Social proof includes things like reviews and past clients. This helps establish credibility and authority in the space by showing web page visitors what others say about you.
3) about section – it’s usually contains from texting images about the company, brand, person, etc the web page is about.
4) services/products – this section usually contains a list of services or products you offer.
5) value section this section contains a summary of why somebody should choose you or user your website.
6) call to action or CTA- this part of the homepage can be repeated throughout. usually a button that directs visitors to your ultimate goal whether that’s to sign up or buy something.
7)forms – instead of just having a button to take them to a contact page some people choose to have a form right there at the bottom of the home page.
Forms are a great way to collect people’s information online. This is perfect for online businesses with sign up and contact forms.
8) blog/post pfeed -a collection or list of your most recent content that you uploaded to your website. This provides an easy way for people to keep up with you.
9) sidebar – with monitors and screens getting bigger and bigger side bars are becoming popular once again. These are a columns on the right or left side of websites that feature ads, links, and other content.
They are usually on the right and are sticky meaning they remain on your screen while you scroll down the web page. Being sticky makes them a good spot for ctas and another menu as well.
Before I go on to covering other pages some less common elements that can be found on any web page include the following:
Secondary navigation – it’s essentially is a second menu under the main menu with links to other pages.
Breadcrumbs – these are Links at the top of a web page that show the path of links to the current page you are on from the home page.
Pop ups – this is content that pops up based on a trigger when you visit in one page
some common parts of a web page are not even visible because they are just pieces of code that do things behind the scenes.
Code
Meta tags – metadata provides information to search engines about data on a web page. This includes things like descriptions about the page, the author, the content width.
Alt text – alt text is text that you can write into the code of an element of a web page to be displayed as an alternative if that element can not be displayed for any reason. It is usually used with images and videos.
Al text can be used for accessibility for people who cannot see content. When these people use technology like screen readers the screen readers will read the alt text that describes the image,video, or other element.
analytics tracking code – this is code that is used to track the analytics of your website, things like page visits, engagement, bounce rate. The main one that is commonly used as Google analytics which uses a tag that you add to your website’s code to collect all this information from your web page for you.
Facebook pixels – just like the analytics code this is code added onto a web page. You can get it from Facebook. It allows you to track engagement and collect information about visitors to your web page. You can then use it to Target these people with Facebook ads.
cookies – files created by web pages on a website to save your information and personalize it. Things like saving your login, preferences, and geographical information all can be saved with cookies.
Schema – these are tags or code that can improve the way search engines read and display your web page in the search engine results pages or SERPs. There are different types for different web pages. For example when you search a product on Google and some of the search results include prices or review ratings in their description this is achieved using schema.
