HTML Layout Tag Group

The Layout Tag Group is a group of tags that define document layouts. Layout tags include <header>, <main>, <footer>, <nav>, <article> and others.

HTML Reference

Page Layout

Most web pages require a layout with headers, columns, footers, and other sections.

This is similare to how a magazine or a newspaper page is organized.

An example layout with the tags that create the sections.

HTML Layout

Layout Tags

Here is a list of layout tags that help with the visual organization of a web page.

Element Description
<header> Defines a header section on a page or a section of a page
<main> Creates a container for the main content of the page
<footer> Defines a footer section on a page or a section of a page
<nav> Creates a container for navigation links
<aside> Creates a content area that is related to the primary content on a page
<article> Defines a container for independent and self contained text
<section> Defines a piece of content that can stand on its own
<div> Creates a division or section on a page

Note: Layout tags define areas on a page that contain content. By default these tags have no visual appearance, but they are often styled with, say, a border or background color.


Example

#

Web pages often have a header, a navigation area, a main area, and a footer.
This is an example of this layout.

This is the header
This is the main content area
This is the footer
<style>
  .head {background-color:black;padding:10px 20px;color:white;}
  .flex {display:flex;min-height:300px;}
  .side {background-color:darkslategray;color:white;padding:10px;flex-grow:1;}
  .main {padding:10px;flex-grow:6;}
  .foot {background-color:black;padding:10px 20px;color:white;}
</style>

<header class="head">
 This is the header
</header>

<div class="flex">
 <aside class="side">
  <nav>
   menu 1<br />
   menu 2<br />
   menu 3<br />
  </nav>
 </aside>
 <main class="main">
   This is the main content area
 </main>
</div>

<footer class="foot">
  This is the footer
</footer>

Code explanation

  • The <style> tag contains CSS class definitions used in the layout.
  • The <header> tag creates the header of the page.
  • The <div> tag is a container for the middle area of the layout.
  • The <aside> tag represents the left menu area.
  • The <nav> tag defines a navigation container with navigation links.
  • The <footer> tag creates the footer of the page.

Tip: When creating layouts try using the appropriate semantic layout tags.
Only when none are appropriate, use a div tag.


Did you know?

Did you know?

Flexbox and Grid are CSS tools to create layouts

Flexbox and Grid layout modules allow you to create complex page layouts.

CSS Flexbox is a bit older than CSS Grid and has good browser support.

CSS Grid is not supported by IE and Edge 15, but newer Edge versions do support it.

Today, all modern browsers support Flexbox and Grid.


You may also like

 Back to Tag Groups


Guides