HTML Layout

Websites/ Web pages may contain multiple columns. HTML layout provides a way to arrange web page in a well structured manner. It gives the website a professional look. You can also use CSS for designing and JavaScript for making the web page responsive and dynamic.

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

Tags Use
<header> To define a header for a document or a section.
<nav> To define a container for navigation links
<section> To define a section in a document
<article> To define an independent self-contained article
<aside> To define content aside from the content (like a sidebar)
<footer> To define a footer for a document or a section
<details> To define additional details
<summary> To define a heading for the <details> element

HTML <header>

<!DOCTYPE html>
<header style=”background-color: #303030; height: 80px; width: 100%”>
<h1 style=”font-size: 30px; color: white;text-align: center; padding-top: 15px;”>
Header Layout


HTML <nav>

<!DOCTYPE html>

<nav style=”background-color:lavender;”>
<h1 style=”text-align: center;”>Navgation Links</h1>
<li><a href=”#”>link1</a></li>
<li><a href=”#”>link2</a></li>
<li><a href=”#”>link3</a></li>
<li><a href=”#”>link4</a></li>
Lab Course - HTML

HTML <section>

<!DOCTYPE html>
<section style=”background-color:#C8A2C8; width: 100%; border: 1px solid black;”>
<h2>Introduction to HTML</h2>
<p>HTML is a markup language.</p>
Lab Course - HTML

HTML <article>

<article style=”width: 100%; border:2px solid black; background-color: #fff0f5;”>
<h2>What is HTML</h2>
<p>Write your content here</p>

HTML <aside>

<aside style=”background-color:#C8A2C8″>
<h2>Sidebar information</h2>
<p>This is sidebar</p>

HTML <footer>

<footer style=”background-color: #C8A2C8; width: 100%; text-align: center;”>
<h3>Footer Example</h3>
<p>© Copyright 2021. </p>

HTML <details> & <summary>

<details style=”background-color: #C8A2C8″>
<summary>This is visible section: click to show other details</summary>
<p>This section only shows if user clicks on summary section. </p>

Demonstration of Article, Aside, Footer, Details and Summary Tags

If you like the post HTML Layout, please share your feedback!

also see

C Programming language
Go Programming language
Linked List Array
Simplification Queue
DBMS Reasoning
Aptitude HTML
Previous articleC program to Find the Sum of two Matrices
Next articleLab Course – HTML


Please enter your comment!
Please enter your name here