HTML Layout

A layout in HTML refers to the visual organization of a web page.  Websites often organize their content in rows and columns -- much like a magazine or newspaper.

HTML Tutorial

Example

HTML offers several semantic layout elements that define the different parts of a web page.

A page layout with semantic elements.

HTML Layout
Tag Description
<header> Specifies a header for a document or section
<nav> Defines a navigation area
<main> Specifies the main content of a document
<aside> Defines content aside from the page content
<section> Defines a section in a document
<article> Defines an article
<footer> Defines a footer for a document or section

HTML Layout Techniques

There are 5 ways to create multicolumn layouts. Each has its pros and cons.

  • HTML tables
  • CSS flexbox
  • CSS grid
  • CSS float property
  • CSS framework

We'll look at each one.


HTML Tables

Tables are designed to display tabular data and not to create HTML layouts. It is easy to create a layout with the <table> element, but it not a good choice for responsive pages, because they don't easily reconfigure with different browser sizes. Therefore, tables should not be used as a layout technique.

To learn more about tables, see our Html tables Reference.


CSS Flexbox

Flexbox is a layout mode introduced in CSS3. Use of flexbox ensures that elements behave predictably when the page has to accommodate different screen sizes and different display devices. Flexbox is a good choice for building layouts.

A flexbox layout.

Programming in C#

What is C#?

C# is a simple, type-safe, general-purpose, object oriented programming language. C# balances simplicity, performance, and expresiveness. The language is platform-neutral and runs on Windows, Linux, and Mac. C# is pronouned "See Sharp".

C# is a general-purpose programming language designed to develop solutions for Windows, Linux, and the Mac. It can be used to create a wide variety of software, including desktop, web, mobile, cloud, and device solutions. C# is also a good choice for games and embedded IoT programming.

Footer

Next are some of the flex CSS definitions for that layout.
Select the 'Try It live' button to see all the code.

.flex-main {
  display: -webkit-flex;
  display: flex;
  border-right: 1px solid #aaa;
}

.flex-nav {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flex-content {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
}

CSS Grid View

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. Grid is not supported by IE or Edge 15 and earlier. Other than that, Grid is a solid choice for creating layouts.


CSS Floats

Until recently it was common to create entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. The disadvantage is that floating elements are tied to the document flow, which makes it less flexible. Today there are better alternatives when building a new website.


CSS Frameworks

To create a layout fast you can use any of the popular CSS frameworks, such as, Bootstrap, Foundation, Tailwind CSS, and Bulma. These frameworks have their own set of CSS styling and pre-defined classes. They can be a great choice.


Did you know?

Did you know?

Creating dynamic layouts with Templating

The <template> tag contains HTML code fragments that can be cloned and reused in a page. Its content is hidden and will only be visible when cloned by JavaScript.

Here is a <template> element and the JavaScript using it.
Click the button multiple times and each time a template clone is added.

<div id="mydiv">

  <button onclick="clone();">Clone template</button>

  <template>
    <div>This is the cloned template.</div>
  </template>

</div>

<script>

   let clone = () => {

     let template = document.getElementsByTagName("template")[0];
     let clone = template.content.cloneNode(true);

     let div = document.getElementById("mydiv");
     div.appendChild(clone);
   };

</script>

To learn more about <template> see our HTML template Reference.


You may also like

Guides