Web page anatomy
There are a couple main components to a webpage. Generally, a webpage is made up of 6 things: a containing block, a logo/ header, navigation/ non-content information, the main content, a footer, and whitespace.
Containing Block: Each web page has container so that we can view the contents of the webpage within the browser window. The width of the container can be fluid (expands to fill the window’s width) or fixed (stays the same regardless of the window’s width).
Logo/ Header: The logo and header are at the top of every webpage. It helps you to identify the company, as well as aiding the company with brand recognition. It could also give you important information about the webpage, such as what the webpage is featuring.
Navigation/ Non-Content Information: Navigation is generally at the top of or on the side of the page. It should be easy to find, and if it’s on the side, it should also be above the fold, meaning it shouldn’t go past where the content ends before users scroll down. Non-content information can also be on the side of the page, such as information that complements the main content or goes on a subset of pages.
Main Content: The content should be the focal point that takes up a majority of the page. Content what really attracts users, because if the information they need isn’t on the page, they will find a different site.
Footer: The footer belongs at the bottom of the page and usually contains information regarding copyright, contact, or legal notices. The footer should indicate that users have reached the end of the page.
Whitespace: Whitespace is just as important as everything else on the page, because without any whitespace, the page can feel very cluttered and unorganized. Using whitespace makes a webpage more appealing and creates balance and unity.
Organization of components
It's important to note that they are a number of ways that these individual pieces can be placed together on a page: