HTML Layouts

by

To arrange web pages in well-mannered, well-structured, and responsive form, HTML Layouts are used. It thus clarifies how the web pages can be arranged by creating an individual space for every part of the web page. An arrangement of visual elements of an HTML document is also used together to serve the complete purpose. Web page layout is a must to be considered for a website to appear professional with an attractive look. CSS and JAVASCRIPT-based frameworks can also be used for this.

To define the different parts of a webpage, different elements are used in HTML, including:

  • <header>: Specifies a header for a document or a section.
  • <nav>: Specifies a container for navigation links.
  • <section>: Specifies a section in a document.
  • <article>: Specifies an independent self-contained article.
  • <aside>: Specifies content aside from the primary content.
  • <footer>: Specifies a footer for a document or a section.
  • <details>: Specifies additional details.
  • <summary>: Specifies a heading for the <details> element.

HTML <header> element:

The <header> element creates a header for a document or a section. The header is required to define introductory content, a heading element, a logo or icon for the web page, and authorship information.

Example:

<!DOCTYPE html>
<html>
<body>
<header style="background-color: crimson;  height: 100px; width: 50%">  
<h1 style="font-size: 40px; color: white;text-align: center; 
padding-top: 25px;">Hello World!!</h1>  
</header>  
</body>
</html>

Explanation:

In the above example, we created a header for an HTML page.

HTML <nav> element:

The HTML <nav> element is used to specify a container for the main block of navigation links. Links can be on the same page or on other pages.

Example:

<!DOCTYPE html>
<html>
<body>
<nav style="background-color:lightpink; padding: 25px">		
<h1 style="text-align: center; color: brown">HTML TOPICS</h1>
<ul>
<li><a href="#">Topic 1</a></li>
<li><a href="#">Topic 2</a></li>
<li><a href="#">Topic 3</a></li>
<li><a href="#">Topic 4</a></li>
</ul>
</nav>
</body>
</html>

Explanation:

In the above example, we defined a container for the main block of navigation links.

HTML <section> element:

The HTML <section> element is used to specify a separate section in a document. The section contains related elements like text, images, tables, and videos which are grouped together.

Example:

<!DOCTYPE html>
<html>
<body>
<section style="background-color:crimson; color: white; text-align: 
center; width: 50%; border: 5px solid yellow;">
<h1>HELLO WORLD!!</h1>
</section>
</body>
</html>

Explanation:

In the above example, we defined a separate section in a document.

HTML <article> element:

The HTML <article> element is used to specify an independent self-contained article like a big story or huge article.

Example:

<!DOCTYPE html>
<html>
<body>
<article style="background-color:crimson; color: white; text-align: 
center; width: 50%; border: 5px solid yellow;">
<h1>HELLO WORLD!!</h1> 
</article>  
</body>
</html>

Explanation:

In the above example, we defined an independent self-contained article.

HTML <aside> element:

The HTML <aside> element is used to specify aside content. The content so defined must be related to the main content. Thus this element works as a sidebar for the primary content of the page.

Example:

<!DOCTYPE html>
<html>
<body>
<aside style="background-color:crimson; color: white; text-align: center; 
width: 50%; border: 5px solid yellow;">
<h1>HELLO WORLD!!</h1> 
</aside>
</body>
</html>

Explanation:

In the above example, we displayed the working of the HTML <aside> element.

HTML <footer> element:

The HTML <footer> element is used to specify a footer for a document or a section to include info related to the author, copyright, and other links.

Example:

<!DOCTYPE html>
<html>
<body>
<footer style="background-color:lightgray; width: 50%; text-align: center; padding:15px">  
<h3 style="color:brown;">w3schools.com</h3>  
<p>© Copyright 2014-2022. </p>  
</footer>  
</body>
</html>

Explanation:

In the above example, we defined a footer for an HTML page.

HTML <details> element:

The HTML <details> element is used to specify additional details about a web page. The details can be hidden by the user if required.

Example:

<!DOCTYPE html>
<html>
<body>
<details style="background-color: lightgray; padding:10px;">
<summary>To define the different parts of a webpage, different elements are used in HTML.</summary>
<p>The HTML Details element is used to specify additional details about a web page.</p>
</details> 
</body>
</html>

Explanation:

In the above example, we used the HTML <details> element to specify additional details about a web page.

HTML <summary> element:

The HTML <summary> element is used with the <details> element to specify the summary or captions for the contents of the <details> element.

Example:

<!DOCTYPE html>
<html>
<body>
<details>
<summary>HTML</summary>
<p style="color: crimson; font-size: 30px; text-align: center;">HELLO WORLD!!</p>
</details> 
</body>
</html>

Explanation:

In the above example, the HTML <summary> element is used to specify the heading for the contents of the <details> element.