Explain the layout structure of HTML
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 Section --> < header > < div class = "head1" >w3wiki</ div > < div class = "head2" >A computer science portal for Beginner</ div > </ header > <!-- Menu Navigation Bar --> < 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 > <!-- Body section --> < div class = "body_sec" > < section id = "Content" > < h3 >Content section</ h3 > </ section > </ div > <!-- Footer Section --> < footer >Footer Section</ footer > </ body > </ html > |
Output:
Contact Us