Article Title
This is an article.
Introduction
Welcome to my website.
HTML layout is the structure of a web page that organizes content into a readable and visually appealing format. Understanding layout techniques is essential for creating well-designed web pages.
A basic HTML layout often includes the following elements:
<header>: Contains introductory content or navigational links.<nav>: Defines navigation links.<main>: Represents the main content of the document.<section>: Defines sections within the document.<article>: Represents a self-contained piece of content.<footer>: Contains footer information.<header>
<h1>My Website</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section>
<h2>Introduction</h2>
<p>Welcome to my website.</p>
</section>
<article>
<h2>Article Title</h2>
<p>This is an article.</p>
</article>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>Welcome to my website.
This is an article.
The CSS Grid Layout allows for more complex layouts. It divides the page into rows and columns to position content:
body {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
header {
grid-column: span 3;
}
main {
grid-column: span 2;
}
aside {
grid-column: span 1;
}
footer {
grid-column: span 3;
}The CSS Flexbox Layout allows for flexible and responsive layouts. It distributes space within a container:
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header, footer {
flex: 0 0 auto;
}
main {
flex: 1 1 auto;
}Responsive layouts adjust based on the screen size using media queries:
@media (max-width: 600px) {
body {
display: block;
}
header, footer {
text-align: center;
}
}