What is a HTML Layout ?
HTML layout provides better look to our website.
HTML layout is a process flow by which we can arrange our web pages in well-mannered, well-structured format.
Why we use HTML Layout ?
To design a website in structured form with great look and feel.
To design the overall appearance in responsive form and to achieve effective visual elements in the HTML document.
It takes some more time to design a website’s layout in well-structured form.
This also provides the visual design appearance like real time experience.
How HTML Layout is works ?
Every website will have their own layout structure, some of the common layout parts are listed below,
- Header Part
- Navigation Part
- Section Part
- Article Part
- Aside Part
- Footer Part
1. Header Part
<header></header> tag is used to define a header elements for a document.
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 100%;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
</body>
</html>
Output :
2.Navigation Part
<nav></nav> tag is used to define a container for navigation links
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 100%;
}
nav{
background-color:brown;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
<nav>
<h1 style="text-align: center;">Nav section</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>
Output :
HTML coding for a website !!!
Click to Learn More about – HTML Tutorial for beginners
3.Section Part
<section></section> tag is used to define a section in a document.
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 100%;
}
nav{
background-color:brown;
}
section{
background-color:#ff7f50;
width: 100%;
border: 1px solid black;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
<nav>
<h1 style="text-align: center;">Nav section</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>
<section>
<h2>HTML Section</h2>
<p>HTML Section part</p>
</section>
</body>
</html>
Output :
4.Article Part
<article></article> tag is used to define an independent self-contained article.
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 100%;
}
nav{
background-color:brown;
}
section{
background-color:#ff7f50;
width: 100%;
border: 1px solid black;
}
article{
width: 100%;
border:2px solid black;
background-color: #fff0f5;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
<nav>
<h1 style="text-align: center;">Nav section</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>
<section>
<h2>HTML Section</h2>
<p>HTML Section part</p>
</section>
<article>
<h2>HTML Article</h2>
<p>HTML Article part</p>
</article>
</body>
</html>
Output :
5.Aside Part
<aside></aside> tag is used to define content aside from the content (like a sidebar)
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 100%;
}
nav{
background-color:brown;
}
section{
background-color:#ff7f50;
width: 100%;
border: 1px solid black;
}
article{
width: 100%;
border:2px solid black;
background-color: #fff0f5;
}
aside{
background-color:#e6e6fa;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
<nav>
<h1 style="text-align: center;">Nav section</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>
<section>
<h2>HTML Section</h2>
<p>HTML Section part</p>
</section>
<article>
<h2>HTML Article</h2>
<p>HTML Article part</p>
</article>
<aside>
<h2>HTML Aside part</h2>
<p>HTML Aside part</p>
</aside>
</body>
</html>
Output :
6.Footer Part
<footer></footer> tag is used to define a footer for a document or a section.
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 100%;
}
nav{
background-color:brown;
}
section{
background-color:#ff7f50;
width: 100%;
border: 1px solid black;
}
article{
width: 100%;
border:2px solid black;
background-color: #fff0f5;
}
aside{
background-color:#e6e6fa;
}
footer{
background-color: #f0f8ff;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
<nav>
<h1 style="text-align: center;">Nav section</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>
<section>
<h2>HTML Section</h2>
<p>HTML Section part</p>
</section>
<article>
<h2>HTML Article</h2>
<p>HTML Article part</p>
</article>
<aside>
<h2>HTML Aside part</h2>
<p>HTML Aside part</p>
</aside>
<footer>
<h3>HTML Footer</h3>
<p>HTML Footer part</p>
</footer>
</body>
</html>
Output :
