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>
<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
</h1>
</header>
</html>
|
 |
HTML <nav>
|
<!DOCTYPE html> <html>
<body>
<nav style=”background-color:lavender;”>
<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>
|
 |
HTML <section>
|
<!DOCTYPE html>
<html>
<body>
<section style=”background-color:#C8A2C8; width: 100%; border: 1px solid black;”>
<h2>Introduction to HTML</h2>
<p>HTML is a markup language.</p>
</section>
</body>
</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>
</article>
|
HTML <aside>
|
<aside style=”background-color:#C8A2C8″>
<h2>Sidebar information</h2>
<p>This is sidebar</p>
</aside>
|
HTML <footer>
|
<footer style=”background-color: #C8A2C8; width: 100%; text-align: center;”>
<h3>Footer Example</h3>
<p>© Copyright 2021. </p>
</footer>
|
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>
</details>
|
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 |
