Categories
HTML Web development

Understanding the HTML Layout

A website layout is very important to give your website a better look. Professional website layout can be achieved using a combination of HTML, CSS, and JavaSript but you can create at home now a layout using HTML tags. Today I will create a simple layout for a website using HTML and its attributes and we will move a bit further and start learning CSS to style our webpage and make our page looks good.  

HTML Layout Gif
Do you like this gif? Check more gifs in theĀ store.

To understand the HTML layout, we should know first, which information the webpage layout usually contain. 

Websites display contents in columns (like in newspaper):

Where: 

<header> Defines a header for a document or section. Typically contain the site logo or banner. 


<nav> The section which is dedicated to links, or navigation. For example the menu of the page. 

<main> Defines the main content of the webpage.

<article> Element defines a self-contained composition on the webpage. 

<div> Defines a division or a section on the webpage. 


<section> Definies section on the webpage. 


<aside> It holds additional information. 


<footer> Definesa footer for a website or section, and is always on the bottom of the webpage. 

HTML Layout example: 

<!DOCTYPE html>
<html>
<head>
   <title>The title of your website</title>
   <meta name="description" content="You can add description of your website here.">
   <meta name="author" content="author">
</head>
<body>
   <!-- HEADER SECTION -->
   <header>
   Your website logo or banner.
   </header>

   <!-- NAVIGATION BAR -->
   <nav>
    <a href="#">Main page</a>
    <a href="#">You can add link here</a>
    <a href="#">You can add link here</a>
   </nav>

   <!-- MAIN BODY -->
   <main>
    <!-- ARTICLE -->
   <article>
      <h1>Article Title</h1>

   <section>
      <h2>Section A</h2>
    You can add main text or informations here.
      <aside>Additional information.</aside>
   </section>

   <section>
      <h2>Section B</h2>
    You can add more contents here.
   </section>
   </article>

   <!-- DIVISIONS -->
   <div id="div-container">
     <div>Block 1</div>
     <div>Block 2</div>
   </div>
   </main>

   <!-- FOOTER SECTION -->
   <footer>
    FOOTER
   </footer>
</body>
</html>

Once we have done with basic HTML layout (inserted the upper code into HTML/text editor), we will receive this:

Previously, I planned to show you how to create columns using only HTML (table tag), however, I know now and also from my experience, the <table> element was not designed to be a layout tool. The HTML <table> element should represent tabular data. Using this element in your layout can later bring a mess in your code and not always this element displays properly in the browser.   

To avoid errors in our code, I added to HTML document CSS code to create 3 columns. If you completely do not know anything about CSS do not worry, I will try to post in the next few days tutorial about CSS too. Today you can just use ready code with columns. 

As you can see below, I used the internal method to insert code CSS to the file (by using a <style> element in the <head> section, which you can see on the top part of the code.

<!DOCTYPE html>
<html>
<head>
  <style>
    #main {
      display: flex;
    }
    #first-col {
      width: 30%;
      background: green;
    }
    #second-col {
      width: 40%;
      background: yellow;
    }
    #third-col {
      width: 30%;
      background: red;
    }
    @media all and (max-width: 800px) {
      #main {
        display: block;
      }
      #first-col, #second-col, #third-col {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <!-- HEADER SECTION -->
  <header>
    Your website logo or banner.  </header>

   <!-- NAVIGATION BAR -->
  <nav>
    <a href="#">Main Page</a>
    <a href="#">You can add link here.</a>
    <a href="#">You can add link here.</a>
  </nav>

  <div id="main">
    <!-- LEFT SIDEBAR -->
    <div id="first-col">
      LEFT
    </div>

    <!-- CENTER MAIN -->
    <main id="second-col">
      <h1>Main</h1>
      <p>You can add main text or informations here</p>
    </main>

    <!-- RIGHT SIDEBAR -->
    <div id="third-col">
      RIGHT
    </div>
  </div>

  <!-- FOOTER SECTION -->
  <footer>
    Footer.
  </footer>
</body>
</html>

And it displays in the browser now like this: 

Hope it helped you to understand more HTML Layout and you are ready now to start creating your own amazing layout. You can start with this what I created today and modify in your own original way. 

Enjoy coding!

Leave a Reply