How to Create Layout in HTML

HTML Layouts are containers which help to manage the webpage look well structured and arranged in a user-friendly way with the use of multiple row and columns. Let us understand about HTML Layout.

How To Create HTML Layout?

HTML Layout is very important for creating websites, It works with the arrangement of the visual elements of the HTML text on the webpage which deals with the overall appearance of the website.

  • HTML Layout deals with graphic designing for better and responsive flow of information on the webpage.
  • Javascript and Cascading Style Sheets and based frameworks are used for advance and dynamic Layouts on the websites.
  • HTML <table > tag is mainly used in creating HTML layout document which is arranged in rows and columns.

Let us know the content and description of the  Layout for the webpages.

HTML Layout tags

  • header –  This is the <header> tag used to define the head of the document.
  • navigation – This is the <nav> tag used to define the information through hyperlinks.
  • section – This is the <section> tag used to define the part of the webpage and gives the extra information.
  • heading – This is the <heading> tag used to define the heading section of the document.
  • article – This is the <article> tag used to define the content of the HTML document.
  • aside – This is the <aside> tag used to define the sidebar content of the HTML document.
  • footer – This is the <footer> tag used to define the queries of the webpage on the bottom of the layout.
  • summary –This the the <summary> tag used to define a heading for the <details> element.

Basic Example of HTML Layout

The following are the Examples of creating simple Layouts using HTML tag and attributes.

1. Example of HTML Layout using the navigation tag :

<!DOCTYPE html>
<html>

   <head>
      <title> Example of HTML Layout</title>
   </head>  
   <body>
   <nav style="background-color:#eee;">  
            <h1 style="text-align: left;">Navgation Hyperlinks</h1>  
            <ul>  
                <li><a href="#">codedec.com</a></li>  
                <li><a href="#">codebun.com</a></li>  
                 
            </ul>  
        </nav>  
        </body>
       </html>

OUTPUT:

2. Example of HTML Layout using  Div & Span tag :

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layouts using Div and Span</title>
   </head>

   <body>
      <div style = "width:100%">
    
         <div style = "background-color: yellow; width:100%">
            <h1>This is Web Page Main title</h1>
         </div>
      
   		<div style = "background-color:red; height:200px; width:550px; float:left;" >
            <p>welcome to codedec tutorials</p>
         </div>
    
         <div style = "background-color:green; height:200px; width:140px; float:right;">
            <div><b>side bar</b></div>
            HTML<br />
            css<br />
            javascript
         </div>
      <div style = "background-color:lightblue; clear:both">
            <center>
               © Copyright 2020. All Rights Reserved codedec.com
            </center>
         </div>
      
      </div>
   </body>

</html>

OUTPUT:

2. Example of HTML Layout  using detail tag :

<!DOCTYPE html>
<html>
<head>
  <title>Example of HTML Layout</title>
</head>
<body>
 <details style="background-color: orange">
 	<summary>visible content: click the arrow to show the other information.(HTML tutorial)</summary>
 	<p>required detail afer user click the arrow : Introduction with HTML-Html is defined as HyperText Markup Language.
It is a standard markup language for specifying the structure and layout of a web page. Let us understand the HTML in detail.
</p>
 </details>
</body>
</html>

 

OUTPUT:  before the user clicks on the arrow button.

After the user clicks on the arrow button for extra information.