What Is Page Layout in HTML

The page layout in HTML contains different elements and is used to arrange the web pages in a structured order. While understanding page layout, it is also important to understand page layout with responsiveness to different screen sizes. Check out how to make your page layout responsive

Page Layout in HTML

They are:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <footer>
  • <details>
  • <summary>

The Page Layout in <header> Element

The header specifies the heading of a document on a web page layout in HTML. It is specified by using the <header> tag. The header section has a lot of information that defines the page and tells the search engine what the page is about. Checkout out to properly format the header section

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML LAYOUT</title>
</head>
    <style>
        li {display:inline-block;    
            padding:15px;}
        a {text-decoration:none;}
    </style>
<body>
    <nav style="background-color:#bcdeef;">
     <h1 style="text-align: center;">Navigation Links</h1>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Products</a></li>
        </ul>
    </nav>
 </body>
</html>

The <section> Element

A section holds groups of related items together in HTML on the web. Checkout common basic tags in the HTML body

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <section style="background-color:#ff7f50; width: 100%; border: 1px solid black;">
        <h3>WRITING BETTER CODES</h3>
        <p>The codes you write today are not for your today self. Practice documentation, you'll thank yourself later.</p>
        </section>
</body>
</html

The Page Layout in HTML <article> Element

The article tag on a web page layout in HTML contains a self-dependent item, which could be big news, a historical record and the likes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
   <article style="width: 100%; border:2px solid black; background-color: #fff0f5;">
        <h3>OUR BIG STORY</h3>
        <p>This story dates as far back as in the 19th century...</p>
        </section>
</body>
</html>

The Page Layout in HTML <footer> Element

The footer is the last section on a web page. You'll find information like email addresses, copyright, company information, and more on the footer.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
   <footer style="background-color:#f0f8ff; width: 100%; text-align: center;">
        <h3>Footer</h3>
        <p>©  Copyright 2022</p>
        </section>
</body>
</html>

The Page Layout in HTML <details> Element

The <details> tag contains extra information that the user can open or close at will. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
   <details style="background-color: #ff00ee;">
     <summary>Click to show other details</summary>
     <p>This section will pop open at the user's will. </p>
</body>
</html>

The <summary> Element

The summary works with the <details> tag. It gives more information about the <details> tag.

THE HTML LAYOUT TECHNIQUE

To create the HTML layout, there are four different techniques that can be used.

  • CSS framework
  • CSS float property
  • CSS flexbox
  • CSS grid

Each of these has been covered extensively in the CSS tutorial.

CSS FRAMEWORKS

CSS frameworks are additional CSS libraries that allow you to style your web. You can use a CSS framework like W3.CSS or Bootstrap.

CSS FLOAT PROPERTY

The float property is one of the easiest layout techniques to learn. The disadvantage of this technique is that it doesn't give room for flexibility as the floating element is tied to the document flow.

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: #000080;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>
</head>
<body>

<div class="container">

<header>
<h1>Tutorials Gallery</h1>
</header>

<nav>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
<article>
<h1>HTML</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor.</p>
</article>
<footer>Copyright © Hubtolearn</footer>
</div>
</body>
</html>

CSS FLEXBOX LAYOUT

The CSS flexbox layout technique makes it possible for the elements to predictively behave the same way on different screen sizes.

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Container for flexboxes */
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}

/* Style the navigation menu */
nav {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #ccc;
  padding: 20px;
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

/* Style the content */
article {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #f1f1f1;
  padding: 10px;
  }
  /* Style the footer */
  
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 600px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

</style>
</head>
<body>
<h2>CSS Layout Flexbox</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect.</p>
<p><strong>Note:</strong> </strong> Flexbox is not supported in Internet Explorer 10 and earlier versions.</p>

<header>
  <h2>Cities</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li><li><a href="#">Link</a></li>
    </ul>
  </nav>
  
  <article>
    <h1>FLEXBOX</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna. Nam eget eros non orci consectetur congue at ac augue. Proin eget arcu in enim feugiat ultricies. Curabitur maximus metus nec metus pretium viverra at et orci. Integer hendrerit ante ut placerat cursus.</p>
  </article>
</section>

<footer>
  <p>Footer</p>
</footer>

</body>
</html>

CSS GRID

The CSS grid layout technique arranges web pages in rows and columns.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>Grid</h1>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>