Home HTML HTML Layout: Elements and Techniques

HTML Layout: Elements and Techniques

HTML Layout Elements and Techniques
HTML Layout: Elements and Techniques

HTML Layout is a design or draft used to arrange web pages in a well-defined method. It is easy to navigate, simple to understand and uses HTML tags to customize web design elements. Crucial for any website, an HTML layout that uses the correct format will easily improve a website’s impression and appearance.

  • HTML layouts furnish a way to put out web pages in well-mannered, well-structured, and in responsive form.
  • HTML layout specifies a way in which the web pages can be arranged.
  • Web-page layout works with arrangement of visual elements of an HTML document.
  • Every website has a specific layout to display content in a specific manner.
  • 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.
  • We 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


also read:

Data Structure Aptitude
C Programming Reasoning


Previous articleLogical Reasoning: Letter Series
Next articleISRO: Young Scientist Programme_’YUVIKA’ for Students


Please enter your comment!
Please enter your name here