Which websites does HTML represent

Anatomy of a website


Header

The upper part of the individual web pages is called the header area. Some designers prefer the English term header without referring to the formal area of ​​the HTML construct. The header is the same across all pages of the website. Typical elements of the header are a logo at the top left, a central image or a graphic on a colored background. This picture or this graphic symbolizes your company, the concern of the website or the central topic. Usually you will also find the website title in the header. The header often consists of a single large graphic composed of the elements mentioned above


Header navigation

The website visitor expects the main navigation (also called header navigation) directly under the header (or even as part of the header). This is where you put the elements that represent the main areas of your website. This navigation is identical across all pages. Do not forget to represent the start page with “Start” or “Home”. This is where the name “homepage” comes from. This point is essential so that website visitors do not lose their orientation and can return again and again with a simple click.


Content area and columns

There are different views of the layout of the page under the header. Two or three columns are common: a narrow, a wide central column and, if necessary, a third narrow column. The wide column forms the area that will receive the content. This is where you usually place longer texts, pictures and so on.


In the left column you will usually also find a navigation list. All individual pages, including the sub-pages, can be clicked directly here. The right column is used on many websites for advertisements, sometimes also for self-promotion, which may indicate subordinate or new offers on the website.


Especially portals that have dedicated themselves to the aggregation of a lot of diversified content tend to show only small bits of information (teasers) on the first page. However, this is not recommended for monothematic websites.


Footer

Analogous to the header, you will find a footer in the lower area of ​​the website. This footer is also the same across all individual pages and contains some typical elements such as a link to the imprint (as a website operator, you are normally obliged to state in an imprint who is responsible for the site and how they can be contacted by post or electronically, copyright notes or other legally required information.


Wireframes

When it comes to planning individual web pages or types of web pages, you should use drawings to visualize the planned appearance of the page. These drawings should be detailed enough to allow an accurate assessment and optimization as possible without the need for special knowledge, such as coding in HTML / CSS.


A common technique for doing this is wireframing. Drawn websites are accordingly also called wireframes.