The aim of this article is to guide the readers with the basic structure of a webpage layout and provide the pointers which will help them to build a website.

A typical webpage is divided into different elements like the Header, Sidebar, Main Content area, Footer etc…

If you know the basic terminology of the webpage layout then you can use any programming language to build the same.

Header : A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name.

Navigation Bar : A navigation bar contains a list of links to help visitors navigating through your website.

Content :The layout in this section, often depends on the target users. The most common layout is one (or combining them) of the following:

• 1-column (often used for mobile browsers)
• 2-column (often used for tablets and laptops)
• 3-column layout (only used for desktops).

Footer : The footer is placed at the bottom of your page. It often contains information like copyright and contact info.

Slider : The Slider on a webpage is basically a media carousel with slide show feature. A website carousel or slider, is an effective way of displaying multiple images or content in a single space. It not only helps in saving screen space, but also encourages visitors to focus on important website content and improves the overall visual appeal effectively.

Breadcrumbs : Breadcrumbs are basically links which are used to navigate a website, they are typically used on larger websites and are used as a secondary navigation scheme.

Contact Form : The Contact form is used to provide the user information to the server database and is generally used to get user feedback or queries.

Cards : Cards, also called tiles, are layout elements that help arrange and visualize homogeneous data or content in a scannable and easy-to-use way. 

Favicon : A favicon is a small image displayed next to the page title in the browser tab.

Canvas :The HTML element is used to draw graphics on a web page.

Typography : Typography describes the creative design of the text on your web pages. This includes the font pairings you choose as well as stylized aspects such as letter design, kerning, and leading.

Pagination : Pagination is used in some form in almost every web application to divide returned data and display it on multiple pages within one web page. 

Grids : In web design, grids are used to guide the designers with how and where to place elements on the page. These guidelines incorporate margins, spaces, and columns, collectively – providing an encompassing, consistent framework for the page’s content.

Parallax Scrolling : Parallax scrolling is a computer graphics technique used by web designers to create a faux-3D effect. As users scroll down a webpage, different layers of content or backgrounds move at different speeds, and this creates an optical illusion. 

Landing Page : A landing page is a standalone web page that a person “lands” on after clicking through from an email, ad, or other digital location. Once they’re on your landing page, users are encouraged to take an action, such as joining your list or buying your products.

Sticky Post : A sticky post is a post that sticks to the top of your blog page. Unlike your regular posts, it stays on your blog’s front page until you remove its sticky option.

Widgets : Widgets are the applications which can be embedded on a website.

Some examples of widgets are Email marketing widget, Booking and Calendar widget, Search widget, Social media widget, customer support chat widget, Google Map widget etc…

Infographics : An infographic is a visual representation of data and information in an easy to understand and quick to understand. It can be added in a website to improve the User Interface design.