HTML Webpage Layout
Have you seen any web pages which are similar to the one below (it’s just a simple Wikipedia page only!)?
You can see, from the above picture that, how the web page is beautifully formatted. The whole web page is divided into parts such as Header, Footer, Navigation and Main article. If a web page is formatted like this, then the viewers will also get an idea of, which part is situated in which portion.
In order to format your webpage like this, there are some HTML codes. For each part (header, footer, navigation etc.) there are separate HTML codes.
A sample HTML code is given below. (Note: Any explanations regarding the codes are written as comments).
<body><!- -Make sure to include all the below codes in the body tag. Moreover, it is recommended all the related codes in simple letters, as in other HTML codes- ->
<header> <!- -This is the code, which will give the header portion for the website. In this part, you can include the company/organisation name and other details about organisation- ->
<h2>Cities</h2>
</header><section><!- -This code will display the main body part of the webpage, between header and footer. Moreover, the navigation and article part must be mentioned inside the “section” tag.- ->
<nav><!- -This code will help display navigation part in the web page- ->
<ul>
<li><a href=”#”>London</a></li>
<li><a href=”#”>Paris</a></li>
<li><a href=”#”>Tokyo</a></li>
</ul>
</nav>
<article><!- -This will help display the main content of the particular webpage.- ->
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
</section><footer><!- -This is the bottom most section of the webpage, which are normally covered with slogans and some other details- ->
<p>Footer</p>
</footer>
Hope, you have got a basic idea of how to design a webpage using a specific layout using HTML. For more details, click on the following link
https://www.w3schools.com/html/html_layout.asp
Enjoy!