HTML Layout
HTML layout involves structuring and organizing the content on a webpage. It's crucial for creating a coherent and user-friendly design. Here's an overview of HTML layout with examples:
Basic HTML Structure
Before diving into layout techniques, let's start with a basic HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Add CSS styles here */
</style>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
Layout Techniques
1. Block-Level Elements
Block-level elements take up the full width available and start on a new line. Common block-level elements include <div>, <header>, <footer>, <article>, and <section>.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block-Level Example</title>
<style>
header, footer, section {
border: 1px solid black;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<section>
<h2>Section</h2>
<p>This is a section of content.</p>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
2. Inline Elements
Inline elements take up only as much width as necessary and do not start on a new line. Examples include <span>, <a>, and <img>.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Example</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p>This is a <span class="highlight">highlighted</span> word in a paragraph.</p>
</body>
</html>
3. Flexbox
Flexbox is a CSS layout module that allows you to create complex layouts easily by aligning items in rows or columns.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
justify-content: space-between;
}
.box {
width: 30%;
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
4. Grid Layout
CSS Grid Layout is a powerful tool for creating complex grid-based layouts.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>
Summary
- Block-level Elements: Create sections that take up the full width and start on new lines.
- Inline Elements: Fit within other elements and do not start new lines.
- Flexbox: Align items in rows or columns with flexible sizing.
- Grid Layout: Create complex grid-based layouts with precise control over columns and rows.
These techniques can be combined and adjusted to create various layouts tailored to specific design needs.
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.