Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

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.

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



Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides