The Layout Tag Group is a group of tags that define document layouts.
Layout tags include <header>, <main>, <footer>, <nav>, <article> and others.
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.
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.
Web pages often have a header, a navigation area, a main area, and a footer.
This is an example of this layout.
<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>
Tip: When creating layouts try using the appropriate semantic layout tags.
Only when none are appropriate, use a div tag.
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.