HTML Layouts

HTML Layouts

HTML templates provide a way for well-managed, well-structured responsive web pages to be organized. We could say that the HTML layout specifies how web pages can be set up. Web page architecture operates with the visual elements of an HTML document being structured.

Web page layout is the most important thing to bear in mind when designing a website so that with the great, look our website will look professional. We can also use the CSS and JAVASCRIPT based framework to build a responsive and interactive website design models.

HTML Layouts

Each website has a specific style to look at the contents in a particular way.

The following are various elements of HTML5 used to describe the different sections of the webpage.

  • <header>: It is used to define a document header or section header.
  • <nav>: It is used to define a navigation link container.
  • <section>: It is used to identify a document section.
  • <article>: It is used to define a self-contained, independent article.
  • <aside>: It is used to define content in addition to the content (like a sidebar).
  • <footer>: It is used to describe a footer or section of a text.
  • <details>: It is used to define additional data.
  • <summary>: It is used to define the heading for the < details > element.

Description of various Layout elements

HTML <header>

The < header > element is used to create a web page header section. The header contains the webpage introductory content, heading part, logo or icon, and information about authorship.

Example:

 <!DOCTYPE html> 
<html>     
<head>                 
<title>First     Webpage</title>
</head>     
<body>     
<header     style="background-color: #303030; height: 80px;width: 100%">    
 <h1     style="font-size: 30px; color: white;text-align: center; padding-top:     15px;">Welcome to MyFirstWebpage</h1>
</header>   
</body>  
</html>                     

Output:

HTML Layouts

HTML <nav>

< nav > is the container for the main navigation link block. It may contain links to the same page or to other pages.

Example:

 <!DOCTYPE html>
<html>   
<head>       
<style>      
  li{  display: inline-block;         padding:     10px}         </style>  
  </head>
 <body> 
<nav     style="background-color:#bcdeef;">                          
<h1     style="text-align: center;">Navgation Links</h1>                             
<ul>    
 <li><a     href="#">link1</a></li>                                        
 <li><a     href="#">link2</a></li>                                         
<li><a     href="#">link3</a></li>                                        
 <li><a     href="#">link4</a></li>  
</ul>                
</nav>    
</body>    
</html> 

Output:

HTML Layouts

HTML <section>

HTML < section > elements are a separate section of a web page that contains a related group of elements. It may include text, photos, tables, videos, etc.

Example:

 <!DOCTYPE html>
<html>     
<head>               
<title>Page     Section</title>     
</head>    
 <body>     
<section     style="background-color:#ff7f50; width: 100%; border: 1px solid     black;">      <h2>Introduction     to HTML</h2>     
<p>HTML     is a markup language which is used for creating attractive web pages with     the help of styling, and which looks in a nice format on a web     browser.</p>     </section>  
 </body>    
 </html>               

Output:

HTML Layouts

HTML <article>

The HTML tag is used to contain a self-contained article, such as a big story, a big article, etc.

Example:

  <!DOCTYPE html> 
    <html>   
  <head>         
        <title>Article     Example</title>   
  </head>   
  <body>   
  <article style="width:     100%; border:2px solid black; background-color: #fff0f5;">       <h2>History     of Computer</h2>        
<p>Write     your content here for the history of computer</p>   
  </article>    
 </body>    
 </html>      

Output:

HTML Layouts

HTML <aside>

HTML < aside > Set aside content related to primary content. The content of the < aside > must be linked to the primary content. It can be used as a sidebar for the main content of the web page.

Example:

           <!DOCTYPE html>    \
 <html>   
  <head>           
     <title>Aside     Example</title>   
  </head>  
   <body>     <aside     style="background-color:#e6e6fa">           
      <h2>Sidebar     information</h2>       
          <p>Thiscontains     information which will represent like a side bar for a webpage</p>     </aside>    
 </body>    
 </html>                     

Output:

HTML Layouts

HTML <footer>

The HTML < footer > element defines the footer for this document or web page. It mostly includes author information, copyright information, other links, etc.

Example:

           <!DOCTYPE html> 
   <html>  
   <head>    
             <title>Footer     Section</title>
    </head>  
   <body>   
  <footer     style="background-color:#f0f8ff; width: 100%; text-align: left;">                 <h3>Footer     Example</h3>     
            <p>©     Copyright 2018-2020. </p> 
    </footer>  
   </body>    
 </html>                     

Output:

HTML Layouts

HTML <details>

The HTML < details > element is used to add extra details to the web page and can be used to hide or display the details as required.

Example:

           <!DOCTYPE html>  
   <html>  
   <head>    
             <title>Deatils     element</title>  
   </head>  
   <body>  
   <details     style="background-color: #f5deb3">   
              <summary>This     is visible section: click to show other details</summary>                 <p>This     section only shows if user want to see it. </p>   
  </details>  
  </body>   
  </html>     
     

Output:

HTML Layouts

HTML <summary>

The HTML < summary > element is used with the < details > element on the web page. It is used as a summary of the content of the < details > element.

Example:

<!DOCTYPE html>    
 <html>    
 <head>   
              <title>Summary     Example</title>  
   </head>   
  <body>    
 <details>     
            <summary>HTML     is acronym for?</summary>     
           <p     style="color: blue; font-size: 20px;">Hypertext Markup     Language</p>     </details>   
  </body>   
  </html>                     

Output:

HTML Layouts