Layout in HTML

Layout in HTML with Examples

In this article, I am going to discuss Layout in HTML with Examples. Please read our previous article where we discussed File Paths in HTML with Examples. At the end of this article, you will learn everything about HTML Layout with Examples.

HTML Layout

The aspect of graphic design that deals with the arrangement of visual elements on a web page is called page layout. Page layout is a technique for improving the appearance of web pages. The most crucial aspect to consider while building a website is web page layout, which ensures that our site appears professional and attractive.

Layout in HTML with Examples

Webpage Layout Sections
  1. Header: In web pages, the <header> tag is used to add the header section.
  2. Navigation bar: The navigation bar is very much like the menu list. It is used to display content information via hyperlinks.
  3. Sidebar: It contains extra information or advertisements and is not necessarily required to be included on a page.
  4. Content Section: The content section is the major part of the website where content is shown.
  5. Footer: The footer section includes contact information and other web page-related queries. The footer section is always at the bottom of web pages. The <footer> tag is used to define the footer in web pages.
Example HTML Layout
<!DOCTYPE html>
<html>
<head>
 <title>Page Layout</title>
 <style>
         body{
         font-family:arial;
         padding:4%;
         }
  .head1 {
   font-size:40px;
   color:slateblue;
   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:slateblue;
   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: #141414;
   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">Dot Net Tutorials</div>
  <div class="head2">Best platform to learn Programming for beginner and Professional</div>
 </header>
 
 <!-- Menu Navigation Bar -->
 <div class="menu">
  <a href="#home">HOME</a>
  <a href="#news">About Us</a>
  <a href="#notification">Contact</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>

When you run the above HTML code, you will get the following output in the browser.

Example HTML Layout

HTML <header>

The header section of web pages is created using the <header> element. The web page’s header contains the page’s introductory content, heading element, logo, or icon.

Example: HTML Header Layout
<!DOCTYPE html>
<html>
<head>
 <title>Page Layout</title>
 <style>
  .head1 {
   font-size:40px;
   color:slateblue;
   font-weight:bold;
  }
  .head2 {
   font-size:17px;
   margin-left:10px;
   margin-bottom:15px;
  }
  body {
   margin: 0 auto;
   background-position:center;
   background-size: contain;  
                                    font-family:arial;
                                    padding:4%;
  }
 </style>
</head>

<body>
 <!-- Header Section -->
 <header>
  <div class="head1">Dot Net Tutorials</div>
  <div class="head2">Best platform to learn Programming for beginner and Professional</div>
 </header>
</body>
</html>	

When you run the above HTML code, you will get the following output in the browser.

HTML Header Layout Example

HTML <nav>

The major block of navigation links is contained within the <nav> element. It can include links to the same page as well as links to different pages.

Example: HTML Nav Layout
<!DOCTYPE html>
<html>
<head>
 <title>Page Layout</title>
 <style>
         body{
         font-family:arial;
         padding:4%;
   margin: 0 auto;
   background-position:center;
   background-size: contain;
  }
 
  .menu {
   position: sticky;
   top: 0;
   background-color:slateblue;
   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;
  }

 </style>
</head>

<body>
 <!-- Menu Navigation Bar -->
 <div class="menu">
  <a href="#home">HOME</a>
  <a href="#news">About Us</a>
  <a href="#notification">Contact</a>
  <div class="menu-log">
   <a href="#login">LOGIN</a>
  </div>
 </div>
</body>
</html>	

When you run the above HTML code, you will get the following output in the browser.

HTML Nav Layout Example

HTML <body>

The <body> tag in HTML defines the main content of an HTML document that displays in a browser. It can include text, paragraphs, headings, photos, tables, links, and videos, among other things.

Example: HTML Body Layout
<!DOCTYPE html>
<html>
<head>
 <title>Page Layout</title>
 <style>
         body{
         font-family:arial;
         padding:4%;
      margin: 0 auto;
  background-position:center;
  background-size: contain;
  }

  .body_sec {
   margin-left:20px;
  }
 </style>
</head>

<body>
 <!-- Body section -->
 <div class = "body_sec">
  <section id="Content">
   <h3>Content section</h3>
  </section>
 </div>
</body>
</html>	

When you run the above HTML code, you will get the following output in the browser.

HTML Body Layout Example

HTML <footer>

The footer for a web page is defined by the HTML footer> element. It mostly comprises information about the author, copyright, and other references.

Example: HTML Footer Layout
<!DOCTYPE html>
<html>
<head>
 <title>Page Layout</title>
 <style>
         body{
         font-family:arial;
         padding:4%;
   margin: 0 auto;
   background-position:center;
   background-size: contain;
  }

  footer {
   width: 100%;
   bottom: 0px;
   background-color: #141414;
   color: #fff;
   position: absolute;
   padding-top:20px;
   padding-bottom:50px;
   text-align:center;
   font-size:30px;
   font-weight:bold;
  }
 
 </style>
</head>

<body>
 <!-- Footer Section -->
 <footer>Footer Section</footer>
</body>
</html>	

When you run the above HTML code, you will get the following output in the browser.

Layout in HTML with Examples

In the next article, I am going to discuss Entities in HTML with Examples. Here, in this article, I try to explain the Layout in HTML with Examples and I hope you enjoy this article.

Leave a Reply

Your email address will not be published.