HTML Layout
HTML layouts are the backbone of web pages, structuring content for user-friendly navigation. They ensure organized presentation and enhance user experience. This guide explores elements and techniques vital for crafting effective HTML layouts.
Understanding HTML Layouts
HTML Layout refers to the structure of a web page, achieved through elements like <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>. These elements help organize content, define the page’s sections, and enhance accessibility and SEO.
Syntax:
<div class = "header"> Content... </div>
<div class = "section"> Content... </div>
<div class = "footer"> Content... </div>
Layout Components
Layouts | Descriptions |
|---|---|
Header | The part of the front end which is used at the top of the page. <header> tag is used to add a header section on web pages. |
Navigation bar | The navigation bar is the same as the menu list. It is used to display the content information using hyperlinks. <nav> tag is used to add the nav section(nav elements) in web pages. |
Index / Sidebar | It holds additional information or advertisements and is not always necessary to be added to the page. |
Content Section | The content section is the central part where content is displayed.<main> tag is used to add the main content of the webpages. |
Footer | The footer section contains the contact information and other query related to web pages. The footer section is always put on the bottom of the web pages. The <footer> tag sets the footer on web pages. |
Example: In this example we defines a page layout with a header, navigation menu, body section, and footer. It includes CSS styling for elements like headings, menu, and footer, enhancing visual appeal and user experience.
<!DOCTYPE html>
<html>
<head>
<title>Page Layout</title>
<style>
.head1 {
font-size: 40px;
color: #009900;
font-weight: bold;
}
.head2 {
font-size: 17px;
margin-left: 10px;
margin-bottom: 15px;
}
body {
margin: 0 auto;
background-position: center;
background-size: contain;
}
.menu {
position: sticky;
top: 0;
background-color: #009900;
padding: 10px 0px 10px 0px;
color: white;
margin: 0 auto;
overflow: hidden;
}
.menu a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.menu-log {
right: auto;
float: right;
}
footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top: 20px;
padding-bottom: 50px;
text-align: center;
font-size: 30px;
font-weight: bold;
}
.body_sec {
margin-left: 20px;
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<div class="head1">
w3wiki
</div>
<div class="head2">
A computer science portal for Beginner
</div>
</header>
<!-- Menu Navigation Bar -->
<nav class="menu">
<a href="#home">HOME</a>
<a href="#news">NEWS</a>
<a href="#notification">
NOTIFICATIONS
</a>
<div class="menu-log">
<a href="#login">LOGIN</a>
</div>
</nav>
<!-- Body section -->
<main class="body_sec">
<section id="Content">
<h3>Content section</h3>
</section>
</main>
<!-- Footer Section -->
<footer>Footer Section</footer>
</body>
</html>
Output:
HTML Layout Example Output
Techniques for Creating HTML Layouts
There are several techniques to create multi-column layouts in HTML:
- CSS Frameworks (like Bootstrap): Speed up layout design with pre-built components and grid systems.
- CSS Float Property: A classic way to position elements, but be aware of how it interacts with normal document flow.
- CSS Flexbox: Ideal for dynamic layouts, easily adjusting content across different screen sizes.
- CSS Grid: Create complex, two-dimensional layouts with ease.
HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Contact Us