The HTML Layouts specifies the arrangement of components on an HTML web page. There are many HTML semantic elements that defines different section of a web page.
Following are the semantic HTML elements used for HTML layout:
| Tag | Explanation |
|---|---|
| header | It specifies a header for a section or for a document. |
| section | It represents a section in a document. |
| nav | It specifies a container for navigation links. |
| article | It specifies an independent self-containing article. |
| aside | It specifies a tag for content aside from main content (like a sidebar). |
| footer | It specifies a footer for a section or for a document. |
| details | It specifies a tag for additional details. |
| summary | It specifies a header for the <details> element. |
Techniques used for HTML web page layouts:
- CSS float property
- CSS flexbox
- CSS framework
- CSS grid
- HTML tables
Example
Let us see an example of HTML Layouts:
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
color: #000;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
header {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
nav {
float: left;
width: 20%;
height: 200px;
background: #282828;
padding: 60px 10px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
article {
float: left;
padding: 80px 10px;
width: 80%;
background-color: #fff;
height: 200px;
text-align: center;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
</style>
<body>
<h1>HTML Layouts Demo</h1>
<header>This is Header</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>This is an article element.</article>
</section>
<footer>This is Footer</footer>
</body>
</html>Output
