HTML5 Layouts Explained

25 aug. 2022
Intermediate
9,41K Views
14 min read  

In this article, we will have a look at HTML5 layouts, the tags, and elements that help us to define a proper layout. Before diving into the article, let’s ponder on what exactly is a layout. A simple Google search says that layout is nothing but a way in which texts; images are laid out on a page. In web development terms, a layout would be an arrangement of putting things on a web page in a proper way so that the web page looks aesthetic, pleasing, and uniform.

The Web page layout is the most important part to keep in mind while creating the website or web applications so that our website will look professional with great design artifacts. For defining great user experience and layouts, there are so many UI frameworks are there such as Bootstrap that provide the robust components to achieve the best user interface and responsiveness together.

For Example

Let’s have a look at the Wikipedia website for example to understand layouts. https://en.wikipedia.org/wiki/Main_Page

The above screenshot is picked up from Wikipedia’s main page. Let’s try to understand the web page.

  • On the left-hand upper corner, we have the logo of Wikipedia.

  • We have the navigation links in the right upper corner for quick access to the information.

  • We have various sections which emphasize the texts written inside those sections (Ex: “In the news”, “From today’s featured article” sections)

  • We have the footer section as well, which remains common throughout the website.

The presences of the above points in a web page constitute a basic layout. Let’s have a look at what elements are used to create a layout.

Layout Elements

The elements which help create layouts are :

  • header

  • nav

  • section

  • article

  • aside

  • footer

  • details

  • summary

  • We have seen the above elements in the previous articles in an extensive way with examples. Let’s have a quick look again.

  • header: Used to include header content in the web page, like information about the page, summary, login/register links. shopping cart details etc.

  • nav: Used to provide navigational links, ex: menus for routing through across the application pages.

  • section: Used to represent a section in the web page and it can be anything such as quick news section, headline, etc.

  • article: As the name suggests, it’s a separate section used to include a blog, a forum post, a magazine article, etc.

  • aside: As the name suggests, it's used to include some extra information regarding the main content.

  • footer: Used to include footer content in the web page, like licensing information, copyright information, some quick access links, etc.

  • details: Creates an interactive section, which when clicked will display its information i.e. hide/show the section based on the request.

  • summary : Used to include the information within a <details> element, click on the <summary> element would display the info.

Let’s create an HTML document encompassing the above elements and view the display.

 
 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>HTML5 Layouts</title> 
 <link href="wwwroot/css/StyleSheet.css" rel="stylesheet" /> 
 </head> 
 <body> 
 <header> 
 <h1>Page Heading!!!</h1> 
 </header> 
 <nav> 
 <ul> 
 <li><a href="#">Home</a></li> 
 <li><a href="#">About Us</a></li> 
 <li><a href="#">Contact Us</a></li> 
 </ul> 
 </nav> 
 <article> 
 <h1>Article Heading!!!</h1> 
 <p> 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 </p> 
 </article> 
 <aside> 
 <figure> 
 <img src="wwwroot/images/images.jpg" height="100" width="100" /> 
 <figcaption>Random</figcaption> 
 </figure> 
 <p> 
 Random Image!!! 
 </p> 
 </aside> 
 <section> 
 <h1>Section Heading!!!</h1> 
 <p> 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 </p> 
 </section> 
 <footer> 
 <hr /> 
 Copyright (C) 2013. All rights reserved. 
 </footer> 
</body> 
 </html> 

Let’s talk about a few HTML layout techniques, to help us understand and create layouts.

Layout Techniques

There are 4 different ways with which a developer can start creating a layout. These are

  • CSS framework

  • CSS float property

  • CSS flexbox

  • HTML tables

CSS Framework

Nowadays, frameworks such as,

  • Bootstrap http://getbootstrap.com/

  • Foundationhttps://foundation.zurb.com/

  • Semantic UI and others https://semantic-ui.com/

  • provide all the basic plumbing and foundation codes to develop a cool-looking layout.

Bootstrap Example HTML Code
 
 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>Bootstrap Example</title> 
 <link href="wwwroot/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> 
 </head> 
 <body> 
 <div class="container"> 
 <div class="header clearfix"> 
 <nav> 
 <ul class="nav nav-pills float-right"> 
 <li class="nav-item"> 
 <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a> 
 </li> 
 <li class="nav-item"> 
 <a class="nav-link" href="#">About</a> 
 </li> 
 <li class="nav-item"> 
 <a class="nav-link" href="#">Contact</a> 
 </li> 
 </ul> 
 </nav> 
 <h3 class="text-muted">Website</h3> 
 </div> 
 
 <div class="jumbotron"> 
 <h1 class="display-3">Heading</h1> 
 <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p> 
 </div> 
 
 <div class="row marketing"> 
 <div class="col-lg-6"> 
 <h4>Subheading</h4> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
 <h4>Subheading</h4> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
 <h4>Subheading</h4> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 </div> 
 
 <div class="col-lg-6"> 
 <h4>Subheading</h4> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
 <h4>Subheading</h4> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
 <h4>Subheading</h4> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 </div> 
 </div> 
 
 <footer class="footer"> 
 <p>© Company 2017</p> 
 </footer> 
 
 </div> 
 </body> 
 </html> 

CSS float

CSS float and clear properties are used to create a complete layout extensively in the industry. Let’s see an example below.

HTML Code
 
 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>CSS Float</title> 
 <link href="wwwroot/css/StyleSheet1.css" rel="stylesheet" /> 
 </head> 
 <body> 
 <div id="content"> 
 <div class="section1"> 
 <h2>Header 1</h2> 
 <img src="wwwroot/images/1.jpg" height="150" width="200"> 
 <p>Image 1</p> 
 <a href="#">Read more</a> 
 </div> 
 <div class="section2"> 
 <h2>Header 2</h2> 
 <img src="wwwroot/images/2.jpg" height="150" width="200"> 
 <p>Image 2</p> 
 <a href="#">Read more</a> 
 </div> 
 </div> 
 
 <div id="article"> 
 <div> 
 <h3>Header 3</h3> 
 <p> 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 </p> 
 </div> 
 <div> 
 <h3>Header 4</h3> 
 <p> 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 </p> 
 </div> 
 </div> 
 </body> 
 </html> 
CSS code
 
 body{ 
 background-color:burlywood; 
 font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif 
 } 
 #content { 
 width: 500px; 
 float: right; 
 } 
 
 #article { 
 margin-left: 20px; 
 float: left; 
 width: 500px; 
 } 
The display in the browser is as below

We haven’t used any of the HTML5 layout elements above but still have managed to create a decent layout using the CSS float property.

CSS Flexbox

The use of the flexbox artifacts ensures that the elements should be rendered according to the configuration when the page layout must be adjusted for the different screen sizes and different display devices such as desktop, mobile, tablets, and other large screen resolutions.

CSS3 has introduced a Flexible Box module, which is in short called Flexbox, to basically align items in the same row. Let’s see an example

HTML Code
 
 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>CSS Flex</title> 
 <link href="wwwroot/css/StyleSheet2.css" rel="stylesheet" /> 
 </head> 
 <body> 
 <div id="container"> 
 <ul class="flex-container"> 
 <li>Item 1 Lorem ipsum dolor sit amet</li> 
 <li>Item 2 Lorem ipsum dolor sit amet</li> 
 <li>Item 3 Lorem ipsum dolor sit amet</li> 
 <li>Item 4 Lorem ipsum dolor sit amet</li> 
 <li>Item 5 Lorem ipsum dolor sit amet</li> 
 <li>Item 6 Lorem ipsum dolor sit amet</li> 
 </ul> 
 </div> 
 </body> 
 </html> 
CSS Code
 
 body { 
 background-color: burlywood; 
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
 border: 5px solid black; 
 } 
 
 #container { 
 width: 780px; 
 height: 500px; 
 border-radius: 5px; 
 padding: 20px 
 
 } 
 .flex-container { 
 height: 300px; 
 display: flex; 
 flex-direction:column; 
 justify-content: center; 
 align-items:flex-end 
 } 
 

HTML Tables

HTML tables are nothing but a structure that is the collection of various markup tags such as <table>, <tr>, <td>, <the> and others. Easily a layout can be developed using these. Let’s see an example

HTML Code
 
 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>HTML Tables</title> 
 <link href="wwwroot/css/StyleSheet3.css" rel="stylesheet" /> 
 </head> 
 <body> 
 <table height="230"> 
 <tr> 
 <td colspan="3"></td> 
 <td colspan="3" style="font-size: 4em; font-weight: bold" valign="bottom">Website!!!</td> 
 </tr> 
 <tr> 
 <td colspan="2"></td> 
 <td colspan="4" style="font-size: 1.3em; font-weight: bold;" valign="top">Sample pages with search option.</td> 
 </tr> 
 <tr> 
 <td width="400px"></td> 
 <td width="100"><a href="#">Home</a></td> 
 <td width="100"><a href="#">Property</a></td> 
 <td width="100"><a href="#">Office</a></td> 
 <td width="100"><a href="#">Contact Us</a></td> 
 <td><input type="search" placeholder="search"></td> 
 </tr> 
 </table> 
 </body> 
 </html>
CSS Code
 
 body { 
 background-color: burlywood; 
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
 } 
 

The question arises as to which technique to follow. The answer is it depends upon the nature of the project, developer skills, project deadlines, and stuff. Ex: A CSS framework when used will lessen the developer load and provide the basic plumbing codes and kinds of stuff, need to just import the framework’s CSS and js files.

SUMMARY

A webpage layout is a very essential aspect to give better look to our website. It takes considerable time and effort to design a website's layout from the scratch along with a great look and feel for a better user experience and satisfaction.

All modern websites are using CSS or CSS3 and JavaScript-based frameworks such as Angular, Vuejs to come up with responsive and dynamic websites layouts but we can also create a straightforward layout using simple HTML tables or divisions (<div>) tags in combination with other formatting tags. We already have covered the four different approaches to defining the layout configuration that adjusts according to the resolution and devices.

we have looked at what is an HTML layout, different semantic HTML5 layout elements, techniques to follow when creating a basic layout, etc. In the coming articles, we shall deep dive into other nitty-gritty of HTML5.

Share Article
About Author
Anurag Sinha (Author and Full Stack Developer)

He is a Full stack developer, and Author. He has more than 8 years of industry expertise on .NET Core, Web API, jQuery, HTML5. He is passionate about learning and sharing new technical stacks.
Learn to Crack Your Technical Interview

Accept cookies & close this