HTML Layouts

Example

<header>
  <p>Header</p>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  
  <article>
    <h2>HTML</h2>
    <p>The first version of HTML was written by Tim Berners-Lee in 1993. Since then, there have been many different versions of HTML. The most widely used version throughout the 2000`s was HTML 4.01, which became an official standard in December 1999.</p>
  </article>
</section>

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

Try this code ❯

HTML Layout Elements

The HTML has semantic elements that define the different parts of a web page layout:

<nav>

<aside>

Tags	Description
<aside>	This element defines a section of a document that encloses content that is related to the other content the element may be associated with.
<header>	Defines the header section of a document or a section element it is contained within.
<footer>	Defines a footer section of a document.
<nav>	Defines a group of links to other locations either inside or outside of a document.
<section>	Defines a generic section of a document and it may contain a heading and footer of its own.

HTML Layouts

You can create layouts in many way but most popular are:

Normal flow
Table Not recommended
CSS float
CSS framework
CSS flexbox
CSS grid

Normal flow

The normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout.

This example shows how normal flow works:

Example

<h1>Page Heading</h1>
<p>Page paragraph.</p>

Try this code ❯

Table (Not recommended)

HTML tables are fine for displaying tabular data, but many years ago — before even basic CSS was supported reliably across browsers — web developers used to also use tables for entire web page layouts, putting their headers, footers, columns, etc. into various table rows and columns. This worked at the time, but it has many problems: table layouts are inflexible, very heavy on markup, difficult to debug, and semantically wrong (e.g., screen reader users have problems navigating table layouts).

CSS float

The floating an element changes the behavior of that element and the block level elements that follow it in normal flow.

The floating elements are tied to the document flow, which may harm the flexibility.

Example

Try this code ❯

CSS framework

You can create your layout fast, by use a CSS framework, like Bootstrap.

CSS flexbox

The flexbox is the short name for the Flexible Box Layout CSS module, designed to make it easy for us to lay things out in one dimension — either as a row or as a column. To use flexbox, you apply display: flex; to the parent element of the elements you want to lay out; all its direct children then become flex items.

This example shows how to use CSS flexbox:

Example

Try this code ❯

CSS grid

While flexbox is designed for one-dimensional layout, Grid Layout is designed for two dimensions — lining things up in rows and columns.