HTML Layout Page Structure

HTML layout refers to the arrangement and structure of elements within a web page. It defines the overall structure and visual presentation of the webpage. It involves various HTML elements, such as headings, paragraphs, images, navigation menus, and other content to define the different sections of a webpage.

HTML allows us to use several techniques for creating page layouts, including using semantic HTML5 elements, as well as employing CSS for styling and positioning elements on the page.

HTML5 is the most recent version of HTML, which introduces several new elements such as header, nav, main, and footer to better define the different sections of a webpage. They are known as structural elements because they define the overall structure of a webpage.

These new elements also are considered semantic HTML5 elements because they provide meaning about the content of the tags. For example, <header> is a semantic element because it defines content that appears at the top of a webpage. The name and purpose of the <header> tag reflect its meaning.

HTML Layout Elements

A template is a predefined layout of the webpage that contains a special HTML structure to be used by all pages within the website. HTML5 provides several semantic elements that define the different sections of a web page, such as:

  • <header> – Defines a header section for an HTML document.
  • <nav> – Defines a set of navigation links.
  • <section> – Defines a section in a document.
  • <article> – Defines an independent, self-contained content.
  • <aside> – Defines content aside from the content (like a sidebar).
  • <footer> – Defines a footer section for an HTML document.
  • <details> – Defines additional details that the user can open and close on choice.
  • <summary> – Defines a heading for the <details> element.

These semantic elements help to define a clear structure of HTML documents, making them more understandable for both web developers and search engines.

You can read more about semantic elements in HTML5 Semantics elements chapter.

How to Create a Webpage Template Document in HTML?

To create a webpage template, we will need to create an HTML document with the HTML semantic elements that will define the webpage layout structure. A simple and basic layout of a webpage in HTML is shown in the below figure.

An example of HTML webpage layout structure with semantic elements.


HTML Code Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Webpage Layout</title>
    <meta charset="utf-8">
</head>
<body>

<header>
     <!--Place the header content here, such as company name or logo.-->
</header>

<nav>
    <!--Place webpage links in this section.-->
</nav>

<main>
    <!--Place the main content of the webpage in this area.-->
</main>

<footer>
      <!--Place the footer information within section-->
</footer>

</body>
</html>

Example 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML Webpage Layout</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
   <header>
      <h1>Scientech Easy</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Java</a></li>
          <li><a href="#">Python</a></li>
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </nav>
   </header>

  <main>
    <section>
       <h2>About Us</h2>
           <p>Scientech Easy is the best learning platform designed to cater to both beginners and professionals. Our primary goal is to provide a unique learning experience that's not only informative but also engaging and enjoyable. We make tons of efforts to make the learning process easy and fun with real-time examples, practical scenarios, and various programs based on concepts.</p>
    </section>
  
    <section>
       <h2>Our Services</h2>
       <ul>
          <li>Web Design</li>
          <li>Graphic Design</li>
          <li>Software Training</li>
          <li>SEO</li>
       </ul>
    </section>
  </main>

  <footer>
      <p>&copy; 2024 Scientech Easy. All rights reserved.</p>
  </footer>
</body>
</html>

Customize HTML Webpage Layout with CSS

Let’s customize the above example code with CSS style rules, which defines a simple layout of an HTML web page.

Example 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of Basic HTML Webpage Layout</title>
    <!-- Meta tag for responsive design -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* CSS styles for the webpage layout */
body {
   font-family: Arial, sans-serif;
   background-color: #f2f2f2;
   margin: 0;
   padding: 0;
}
header {
   background-color: #333;
   color: #fff;
   padding: 20px;
   text-align: center;
}
nav ul {
   list-style-type: none;
   padding: 0;
}
nav ul li {
   display: inline;
   margin-right: 20px;
}
nav ul li a {
   text-decoration: none;
   color: #fff;
}
main {
   padding: 20px;
}
section {
   background-color: #fff;
   padding: 20px;
   margin-bottom: 20px;
}
footer {
   background-color: #333;
   color: #fff;
   padding: 10px 20px;
   text-align: center;
}
</style>
</head>
<body>
  <!-- Header section -->
  <header>
     <h1>Scientech Easy</h1>
  <!-- Navigation section -->
  <nav>
     <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Java</a></li>
       <li><a href="#">Python</a></li>
       <li><a href="#">HTML</a></li>
       <li><a href="#">CSS</a></li>
       <li><a href="#">JavaScript</a></li>
     </ul>
   </nav>
  </header>
  <main>
   <section>
     <h2>About Us</h2>
     <p>Scientech Easy is the best learning platform designed to cater to both beginners and professionals. Our primary goal is to provide a unique learning experience that's not only informative but also engaging and enjoyable. We make tons of efforts to make the learning process easy and fun with real-time examples, practical scenarios, and various programs based on concepts.</p>
   </section>
   
   <section>
     <h2>Our Services</h2>
     <ul>
        <li>Web Design</li>
        <li>Graphic Design</li>
        <li>Software Training</li>
        <li>SEO</li>
     </ul>
   </section>
</main>

<!-- Footer section -->
<footer>
     <p>&copy; 2024 Scientech Easy. All rights reserved.</p>
</footer>
</body>
</html>

Output:

An example of HTML webpage layout structure using semantic elements and CSS styles.

This HTML code represents a basic webpage layout with a header, navigation bar, main content area, and footer. Let’s understand the explanation of each part of the code structure:

(1) <!DOCTYPE html>: This declaration specifies the use of HTML version, which is HTML5 in this case.

(2) <html lang=”en”>: This is a starting html tag with lang attribute which represents the root element of the HTML document, containing all other HTML elements.

(3) <head>: This is a starting head tag which contains meta-information about the HTML document, such as the title of the page and any external resources like style sheets or scripts.

(4) <title>: This element inside the head section sets the title of the webpage, which appears in the browser’s title bar or tab.

(5) <meta name=”viewport” content=”width=device-width, initial-scale=1″>: The meta tag sets the viewport properties for responsive design of the webpage, ensuring proper scaling on different devices.

(6) <style>: This is a starting style tag which contains CSS (Cascading Style Sheets) rules for styling the elements of the HTML document.

(7) <body>: This is a starting body tag which encloses the main content of the webpage, including headers, paragraphs, images, links, etc.

(8) <header>: This is a header tag which defines the header area of the webpage. It typically contains the site’s name, logo, and primary navigation links.

(9) <nav>: This is a navigational element which structurally defines the navigation area of a webpage. It mainly contains the navigation bar or menu of the webpage.

(10) <ul> and <li>: These elements are used to create an unordered list of navigation links.

(11) <main>: This is a starting main tag which structurally defines the main content area of a webpage, where the primary content is displayed. Here, the main content area is using a flexbox layout.

(12) <section>: This element defines a section within the main content area, typically used to group related content together.

(13) <footer>: This is a starting footer tag which represents the footer section of the webpage, containing copyright information, contact details, or other relevant information.

In this example HTML code, we have built a simple webpage layout with semantic HTML5 elements, such as <header>, <nav>, <main>, <section>,<footer>, along with some CSS style rules to enhance the visual presentation of the webpage.

HTML Webpage Layout with Sidebar

Let’s take an example in which we will add sidebar in the above layout of the page structure.

Example 2:

<!DOCTYPE html>
<html>
<head>
    <title>Example of Basic HTML Webpage Layout</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
   font-family: Arial, sans-serif;
   background-color: #f2f2f2;
   margin: 0;
   padding: 0;
}
header {
   background-color: #333;
   color: #fff;
   padding: 20px;
   text-align: center;
}
nav ul {
   list-style-type: none;
   padding: 0;
}
nav ul li {
   display: inline;
   margin-right: 20px;
}
nav ul li a {
   text-decoration: none;
   color: #fff;
}
main {
   display: flex; /* Use flexbox for layout */
   padding: 20px;
}
.content {
   flex: 2; /* 2/3 of the main content area */
}
.sidebar {
flex: 1; /* 1/3 of the main content area */
background-color: #f9f9f9;
padding: 20px;
margin-left: 20px;
}
section {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
}
footer {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
}
</style>
</head>
<body>
  <header>
     <h1>Scientech Easy</h1>
     <nav>
       <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Java</a></li>
          <li><a href="#">Python</a></li>
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
       </ul>
     </nav>
   </header>

<main>
   <div class="content">
   <section>
      <h2>About Us</h2>
      <p>Scientech Easy is the best learning platform designed to cater to both beginners and professionals.</p>
   </section>
   <section>
      <h2>Our Services</h2>
     <ul>
        <li>Web Design</li>
        <li>Graphic Design</li>
        <li>Software Training</li>
        <li>SEO</li>
     </ul>
   </section>
   </div>

<aside class="sidebar">
   <h2>Latest Updates</h2>
   <ul>
      <li>New Course Launched</li>
      <li>Upcoming Webinar</li>
      <li>Technical Blog Post</li>
   </ul>
</aside>
</main>

<footer>
      <p>&copy; 2024 Scientech Easy. All rights reserved.</p>
</footer>
</body>
</html>

Output:

An example of HTML webpage structure with sidebar.

In this example code, the main content area is still using a flexbox layout. We have wrapped both sections inside a <div> element with the class content, which takes up 2/3 of the available space. We have created a sidebar using <aside> semantic element, which takes up 1/3 of the available space.

Related Posts

Trending now

How to Upload File in PHP (Step by Step)
How to Copy File in PHP
Transparency and Knowledge Sharing Across Departments
Window dressing with AI
Window Dressing With AI: Shopfronts That Change With Weather