Explain the layout structure of HTML
Last Updated :
16 Jan, 2022
Page layout is the part of graphic design that deals with the arrangement of visual elements on a page. Page layout is used to make the web pages look better. It establishes the overall appearance, relative importance, and relationships between the graphic elements to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.
In this article, we will discuss the page layout structure of HTML:
Page Layout Information:
- Header: The part of a front end that is used at the top of the page. <header> tag is used to add a header section in web pages.
- Navigation bar: The navigation bar is the same as the menu list. It is used to display the content information using hyperlinks.
- Index / Sidebar: It holds additional information or advertisements and is not always necessary to be added to the page.
- Content Section: The content section is the main part where content is displayed.
- Footer: The footer section contains the contact information and other query related to web pages. The footer section is always put on the bottom of the web pages. The <footer> tag is used to set the footer in web pages.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< title >Page Layout</ title >
< style >
.head1 {
font-size: 40px;
color: #009900;
font-weight: bold;
}
.head2 {
font-size: 17px;
margin-left: 10px;
margin-bottom: 15px;
}
body {
margin: 0 auto;
background-position: center;
background-size: contain;
}
.menu {
position: sticky;
top: 0;
background-color: #009900;
padding: 10px 0px 10px 0px;
color: white;
margin: 0 auto;
overflow: hidden;
}
.menu a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.menu-log {
right: auto;
float: right;
}
footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top: 20px;
padding-bottom: 50px;
text-align: center;
font-size: 30px;
font-weight: bold;
}
.body_sec {
margin-left: 20px;
}
</ style >
</ head >
< body >
< header >
< div class = "head1" >GeeksforGeeks</ div >
< div class = "head2" >A computer science portal for geeks</ div >
</ header >
< div class = "menu" >
< a href = "#home" >HOME</ a >
< a href = "#news" >NEWS</ a >
< a href = "#notification" >NOTIFICATIONS</ a >
< div class = "menu-log" >
< a href = "#login" >LOGIN</ a >
</ div >
</ div >
< div class = "body_sec" >
< section id = "Content" >
< h3 >Content section</ h3 >
</ section >
</ div >
< footer >Footer Section</ footer >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...