Layout in HTML

Back to: HTML Tutorials

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.

Webpage Layout Sections

Header: In web pages, the <header> tag is used to add the header section.
Navigation bar: The navigation bar is very much like the menu list. It is used to display content information via hyperlinks.
Sidebar: It contains extra information or advertisements and is not necessarily required to be included on a page.
Content Section: The content section is the major part of the website where content is shown.
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.

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 <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 <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 <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.

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.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.

Leave a Reply Cancel reply