The general layout of any website is mostly the same.
There are basically 4 parts:
- Header
- Menus
- Content
- Footer
This layout of websites is called the website layout. There are numerous other layouts for the websites used in different genres of websites, but this layout is pretty standard for most. So let’s take a look at these components one by one.
Header
The header is the topmost part of the page. Generally, it contains the website name and/or logo. The image showing the website name/logo is mostly set as a link to the homepage of the website.
Navigation Bar/Menus
The various pages in the websites hold different purposes. The Navigation bar contains links to these pages that will help you navigate through the website.
Content
The content is laid out as per the target audience of the website. For example, for mobile devices the screen is less wide than the laptop users, thus the content tends to be rendered in a single column. While for the laptop users, the columns may go up to 4 or more.
However, developers are now working more towards creating responsive content columns that automatically change with the change in screen size. We have the @media rule that can help us do that. We also have some layouts altogether meant for this purpose (for eg. Flexbox).
Unequal Columns
As per the content, the column size may grow or shrink. For example, the column containing cover picture and headline of any news website page can be bigger than the columns containing the detailed news. Many websites have a side column meant to serve as something similar to an additional navigation bar.
Footer
The footer is the bottommost section of the page. It contains links to pages like Privacy Policy, sitemap, copyright, contact us etc.