HTML Layout
HTML Layout:
The main
purpose of the Layout is structurally arranges content on a web page for clear
organization and visual hierarchy.
Key Elements:
<header>:
Defines a header section (often for logos, navigation, and introductory
content).
<nav>:
Creates a navigation section for links and menus.
<main>:
Contains the primary content of the page.
<article>:
Represents a self-contained piece of content (e.g., blog post, news article).
<section>:
Defines a thematic section with related content.
<aside>:
Represents content aside from the main flow (e.g., sidebars, ads).
<footer>:
Defines a footer section (often for copyright information, contact details,
links).
Syntax:
Example 1:
Single page blog layout:
<!DOCTYPE
html>
<html
lang=“en”>
<head>
<meta
charset=“UTF-8”>
<meta
name=“viewport”
content=“width=device-width,
initial-scale=1.0″>
<title>My
Blog</title>
<style>
body
{
font-family:
sans-serif;
margin:
0;
}
header
{
background-color:
#333;
color:
#fff;
padding:
20px;
display:
flex;
justify-content:
space-between;
align-items:
center;
}
header
h1 {
margin:
0;
}
main
{
padding:
20px;
}
article
{
margin-bottom:
20px;
border-bottom:
1px solid
#ddd;
padding:
20px;
}
article
h2 {
margin-bottom:
10px;
}
aside
{
background-color:
#eee;
padding:
20px;
flex:
1;
margin-left:
20px;
}
footer
{
background-color:
#333;
color:
#fff;
padding:
10px;
text-align:
center;
}
</style>
</head>
<body>
<header>
<h1>My
Blog</h1>
<nav>
<a
href=“#”>Home</a>
<a
href=“#”>About</a>
<a
href=“#”>Contact</a>
</nav>
</header>
<main>
<article>
<h2>My
First Blog Post</h2>
<p>This
is the content of my first blog post. It can be any kind of text, images, or
even videos.</p>
</article>
<aside>
<h2>Recent
Posts</h2>
<ul>
<li><a
href=“#”>My
First Blog Post</a></li>
<li><a
href=“#”>Another
Interesting Post</a></li>
<li><a
href=“#”>Yet
Another Awesome Post</a></li>
</ul>
</aside>
</main>
<footer>
©
My Blog 2024
</footer>
</body>
</html>
Output:
Example 2: E-commerce Product Page Layout
This layout
uses CSS grid for flexible product placement and information display.
<!DOCTYPE
html>
<html
lang=“en”>
<head>
<meta
charset=“UTF-8”>
<meta
name=“viewport”
content=“width=device-width,
initial-scale=1.0″>
<title>Product
Page</title>
<style>
body
{
font-family:
sans-serif;
margin:
0;
}
.product-page
{
display:
grid;
grid-template-columns:
1fr 2fr;
gap:
20px;
padding:
20px;
}
.product-image
{
background-color:
#ccc;
height:
300px;
}
.product-info
{
padding:
20px;
}
.product-info
h1 {
margin-bottom:
10px;
}
.product-info
p {
margin-bottom:
10px;
}
.product-price
{
font-weight:
bold;
}
.add-to-cart
{
background-color:
#333;
color:
#fff;
padding:
10px;
text-align:
center;
}
</style>
</head>
<body>
<div
class=“product-page”>
<div
class=“product-image”></div>
<div
class=“product-info”>
<h1>Cool
Product Name</h1>
<p>Description
of the product, its features, benefits, and any other relevant details.</p>
<p
class=“product-price”>$49.99</p>
<button
class=“add-to-cart”>
Output:
