HTML5 Layouts Explained

Anurag Sinha  Print 
19 Nov 2018
 
Intermediate
138

In this article, we will have a look at HTML5 layouts, the tags and elements which help us to define a proper layout. Before diving in 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.

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.

  • We have the navigation links in the right upper corner.

  • 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 above points in a web page constitute a basic layout. Let’s have a look on what elements are used to create a layout.

Layout Elements

The elements which are helpful in creating 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 etc.

  • nav : Used to provide navigational links, ex: menus.

  • section : Used to represent a section in the web page.

  • 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, its 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 etc.

  • details : Creates an interactive section, which when clicked will display its information.

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

Let’s create a 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 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 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 CSS float property.

CSS Flexbox

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 with <table>, <tr>, <td> tags. 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 stuffs. Ex: A CSS framework when used will lessen the developer load and provide with the basic plumbing codes and stuffs, need to just import the framework’s css and js files.

SUMMARY

In this article, we have looked as to 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 gritties of HTML5.

Crack Your Technical Interview

 
Join Our Hands-on Training Programs
+