Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

HTML Layouts

HTML layouts provide a way to arrange web pages in well-mannered, well-structured, and in responsive form or we can say that HTML layout specifies a way in which the web pages can be arranged. Web-page layout works with an arrangement of visual elements of an HTML document.

Web page layout is the most important part to keep in mind while creating a website so that our website can appear professional with the great look. You can also use CSS and JAVASCRIPT based frameworks for creating layouts for responsive and dynamic website designing.


Using Tables

In this table, data is arranged in the form of a table with rows and columns. We can modify it to whatever way we like.

Example

<body>
      <table width = "100%" border = "0">
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>Frontend webpage</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50">
               HTML<br />
               CSS<br />
               JAVASCRIPT
            </td>
            
            <td bgcolor = "#eee" width = "100" height = "200">
               These are frontend development languages.
            </td>
         </tr>
      </table>
   </body>

Using Div and Span

We can also display layout using div and span. Div is a block-level element which helps in displaying data with full width.

Although we can create a layout using tables as well, but the primary use of tables is to present tabular form data.

Example

<body>
      <div>
         <h1 style="background-color: #b5dcb3;">Frontend webpage</h1>
      </div>
      <div  style= "background: #aaa;width: 300px;height: 200px;float: left;">
         HTML<br />
         CSS<br />
         JAVASCRIPT
      </div>
      <div style="background: #eee;width: 310px;height: 200px;float: left;">
         These are frontend development languages.
      </div>
</body>

Using HTML5 elements

HTML5 elements helps in controlling different layout in a better way.

Following are different HTML5 elements which are used to define the different parts of a webpage.

  • <header>: It is used to define a header for a document or a section.
  • <nav>: It is used to define a container for navigation links
  • <section>: It is used to define a section in a document
  • <article>: It is used to define an independent self-contained article
  • <aside>: It is used to define content aside from the content (like a sidebar)
  • <footer>: It is used to define a footer for a document or a section
  • <details>: It is used to define additional details
  • <summary>: It is used to define a heading for the <details> element

HTML layouts create an individual space for every part of the web page. So that, every element can arrange in a significant order.


HTML <header>

The <header> element is used to create header section of web pages. The header contains the introductory content, heading element, logo or icon for the webpage, and authorship information.

Example

<body>
	<header>
         <h1 style="background-color: #b5dcb3;">Frontend webpage</h1>
      </header>
</body>

HTML <nav>

The <nav> elements is a container for the main block of navigation links. It can contain links for the same page or for other pages.

Example

<body>
	<header>
     <h1 style="background-color: #b5dcb3;">Frontend webpage</h1>
  </header>
	<nav style="background-color:#bcdeef;">   
         <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 <section>

HTML <section> elements represent a separate section of a web page which contains related element grouped together. It can contain: text, images, tables, videos, etc.

Example

<body>
	<header>
     <h1 style="background-color: #b5dcb3;">Frontend webpage</h1>
  </header>
	<nav style="background-color:#bcdeef;">   
         <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>
	<section  style="background: #aaa;width: 300px;height: 200px;float: left;">
         <h2>HTML</h2>
         <p>This is frontend development language.</p>
     </section>
</body>

HTML <article>

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

Example

<body>
	<header>
     <h1 style="background-color: #b5dcb3;">Frontend webpage</h1>
  </header>
	<nav style="background-color:#bcdeef;">   
         <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>
	<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 <aside>

This tag defines aside content related to primary content. The <aside> content must be related to the primary content. It can function as a sidebar for the main content of web page.

Example

<body>
	<header>
     <h1 style="background-color: #b5dcb3;">Frontend webpage</h1>
  </header>
	<nav style="background-color:#bcdeef;">   
         <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>
	     <aside style="background-color:#e6e6fa">  
      <h2>Sidebar information</h2>  
      <p>This contains information which will represent like a side bar for a webpage</p>  
    </aside>
</body>

HTML <footer> element defines the footer for that document or web page. It mostly contains information about the author, copyright, other links, etc.

Example

<body>
	<header>
     <h1 style="background-color: #b5dcb3;">Frontend webpage</h1>
  </header>
	<nav style="background-color:#bcdeef;">   
         <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>
	     <footer style="background-color: #f0f8ff; width: 100%; text-align: center;">  
         <p>© Copyright 2020-2022. </p>  
     </footer>  
</body>

HTML <details> and <summary>

HTML <details> element is used to add extra details about the web page and use can hide or show the details as per requirement.

HTML <summary> element is used with the <details> element in a web page. It is used as summary, captions about the content of <details> element.

Example

<body>
	<header>
     <h1 style="background-color: #b5dcb3;">Frontend webpage</h1>
  </header>
	<nav style="background-color:#bcdeef;">   
         <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>
	<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>