HTML Layout

    Generally, the content of the website is divided into multiple columns. And this division of content makes the page more responsive and interactive.

    Layout Element

    In HTML5 we have some specific elements which can be used for page layout.

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

    Mostly all of these are sementic elements which mean they provide a meaning to the content. You won't find any visual difference in <p> and <article> tag when their content display on the browser. But <article> provide a meaning to the content whereas <p> can also be used to represent normal text.

    • <header> define the heading for content or section of content.
    • <nav> is used to provide a list of links that can provide different routes of the website.
    • <section> element can specify a section in a document.
    • <article> specify the main content of the section.
    • <aside> element define that content which is not a part of section or article.
    • <detail> it defines the extra information about the article or section.
    • <summary> element can be used as a heading for the <detail> element.
    • <footer> element define the footnote for the page.

    Syntax

    <header>

    <nav>

    <section>

    <aside>

    <article>

    <footer>

    Example 

    <!DOCTYPE html>
<html lang="en">
<head>
<title>Layout</title>
</head>
<body>
  <header >
    <h2>Tutorial</h2>
  </header>
   <section>
    <nav>
      <ul>
        <li><a href="#">HTML</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">Python</a></li>
      </ul>
     </nav>
     <article>
       <h1>HTML</h1>
       <p>HTML stand for HyperText Markup Language. It is not a programming language tha's why it does not through any error.
       </p>
     </article>
    </section>
    <footer>
     <p>Copyright © 2017- 2020 TechgeekbuzzAbout Us   |  Contact us
     </p>
    </footer>
</body>
</html>

    Layout Techniques

    Four major layout techniques work on multicolumn.

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

    CSS Framework

    There are various open-source CSS frameworks such as Bootstrap and W3.CSS, that provide pre-written code for page layout.

    CSS Float Property

    float is a CSS property that specifies how an element content will be float on the web page. The element can either float left or right. The main objective of float to position the content or image. float property accepts four values:

    • left: It makes the content float left side of the page.
    • right: It makes the content float right side of the page
    • none: The content won't float and remain still.
    • inherit: The content follows the floating property of its parent element.

    Example 

    aside p {
float: right;
}

    CSS Flexbox

    flex is a value for the CSS display property. It makes the content of the page shrink and expands according to the browser viewport.

    Example 

    <div style="display:flex;">
  <div>HTML</div>
  <div>Java</div>
  <div>Python</div>
</div>

    Grid Base Layout

    In this layout technique, the complete web page is divided into 12 columns and n number of rows. And the element and its content can be float around the grids.

    HTML Layout Quick Summary

    • HTML5 provide specific element for semantic meaning.
    • <header>, <section>, <article>, <footer>, etc are semantic elements.
    • <semantic> elements are used to provide layout to the web-page.
    • Before HTML 5 we would use <div> element for all the layout.
    Previous Tutorial Next Tutorial