- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Explain the layout structure of HTML
The layout structure of the webpage is very important to give a catchy look and user-friendly experience to your website. It’ll take considerable time to design a webpage’s layout with a great look and feel.
Nowadays, all modern websites are using CSS and JavaScript-based frameworks to come up with responsive and dynamic websites but you can create a good layout using simple HTML tags in combination with layout elements.
HTML Layout Elements
In HTML, there are various semantic layout elements that define different parts of a web page. They are as follows −
The <header> tag − This tag is used to add a header section in HTML web page. All the content inside this tag will be on top of the webpage.
The <nav> tag − This tag represents a section of a page within the webpage, where it has hyperlinks to other pages or parts within the page (just like the menu bar).
The <section> tag − This tag defines a major part of the web page where all the important content will be displayed.
The <footer> tag − This tag defines the footer section of the webpage. This section contains copyright information and other important details. It will be always at the bottom of the webpage.
In this article, we will design the following page layout structure −
Example
In the following example, we are creating a basic HTML page layout with the above-mentioned layout elements.
<!DOCTYPE html>
<html>
<head>
<title>Layout structure of HTML</title>
<style>
* {
box-sizing: border-box;
}
header {
font-size: 25px;
color: whitesmoke;
padding: 1px;
text-align: center;
background-color: lightslategray;
}
nav {
float: left;
width: 20%;
height: 350px;
background: lightgray;
padding: 20px;
}
nav ul {
padding: 1px;
}
article {
float: left;
padding: 20px;
width: 80%;
background-color: lightyellow;
height: 350px;
}
footer {
background-color: lightslategray;
padding: 10px;
text-align: center;
color: white;
padding-top: 20px;
padding-bottom: 10px;
}
footer a {
margin: 10px;
}
footer p {
margin-top: 30px;
}
</style>
</head>
<body>
<!--header segment-->
<header>
<div>
<p>Tutorialspoint</p>
<p>Simply easy learning!</p>
</div>
</header>
<section>
<!--Menu Navigation segment-->
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Coding Ground</a>
</li>
<li>
<a href="#">Jobs</a>
</li>
<li>
<a href="#">Library</a>
</li>
<li>
<a href="#">Articles</a>
</li>
<li>
<a href="#">Corporate Training</a>
</li>
</ul>
</nav>
<!--Content segment-->
<article>
<h1>Welcome to Tutorials point</h1>
<p> Tutorialspoint.com is a dedicated website to provide quality online education in the domains of Computer Science, Information Technology, Programming Languages, and other Engineering as well as Management subjects. </p>
</article>
</section>
<!--Footer segment-->
<footer>
<h2>Tutorialspoint</h2>
<div>
<a href="#">About us</a>
<a href="#">Refund policy</a>
<a href="#">Terms of use</a>
<a href="#">Privacy policy</a>
<a href="#">FAQ's</a>
<a href="#">Affiliates</a>
<a href="#">Contact</a>
</div>
<div>
<p>Copyrights © TUTORIALS POINT (INDIA) PRIVATE LIMITED. All rights reserved.</p>
<div>
</footer>
</body>
</html>
As we can see in the output, we’ve created a header, a navigation bar with some links, a content part with some information, and a footer with additional details.
80 Views
