HTML Layout

Last Updated : 27 Dec, 2024

HTML layouts are a technique used to divide a web page into multiple sections, making it easier to apply styles, organize content, and manage operations efficiently. This division improves readability, accessibility, and overall user experience.

HTML layout is achieved through elements like <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> which help organize content, define the page's sections, and improve SEO.

page layout

Syntax:

<header> Content... </header>
<nav> Content... </nav>
<main> Content... </main>
<footer> Content... </footer>

HTML

<html>
<body>
	<header>
		<h1>My Website</h1>
	</header>
	<main>
		<p>Welcome to my website!</p>
	</main>
	<footer>
		<p> 2024 My Website</p>
	</footer>
</body></html>

<header> contains the main heading of the page.
<main> holds the primary content.
<footer> includes the footer information.

Layout Components

Layouts	Descriptions
Header	The top section of a webpage, often containing the website title, logo, or navigation links. The <header> tag is used to define this part of the page.
Navigation bar	A menu that provides links to the main sections of the website. The <nav> tag is used to define navigation elements in the webpage.
Index / Sidebar	An optional section often found on the side, used for additional content such as ads, links, or other related information.
Content Section	The central area where the primary content of the page is displayed. The <main> tag is used to define the main content of a webpage.
Footer	The bottom section of the webpage, typically containing contact information, legal links, or additional site-related information. The <footer> tag is used to define this area.

More Examples:

Layout with Additional Semantic Tags

html

<html>
<body>
	<header>
		<h1>My Blog</h1>
	</header>
	<nav>
		<a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a>
	</nav>
	<section>
		<h2>Latest Posts</h2>
		<article>
			<h3>Post Title</h3>
			<p>This is a brief introduction to the blog post.</p>
		</article>
	</section>
	<aside>
		<h2>About Me</h2>
		<p>Short bio or profile information.</p>
	</aside>
	<footer>
		<p>&copy; 2024 My Blog</p>
	</footer>
</body>
</html>

<nav> provides navigation links for the website.
<section> groups related content, here titled "Latest Posts."
<article> represents an individual blog post.
<aside> contains supplementary information, such as an "About Me" section

Styled Layout with Semantic Tags

HTML

<html >
<head>
	<style>
		header {
			background-color: #4caf50;
			color: white;
			text-align: center;
			padding: 1em;
		}
		nav {
			background-color: #333;
			overflow: hidden;
		}
		main {
			padding: 20px;
		}
		footer {
			background-color: #4caf50;
			color: white;
			text-align: center;
			padding: 1em;
		}
	</style>
</head>
<body>
	<header>
		<h1>Styled Page</h1>
	</header>
	<nav>
		<a href="#">Home</a>
		<a href="#">Services</a>
		<a href="#">Contact</a>
	</nav>
	<main>
		<h2>Welcome!</h2>
		<p>This is a simple page.</p>
	</main>
	<footer>
		<p>&copy; 2024 Styled Page</p>
	</footer>
</body>

</html>

Header: The <header> element contains the main heading of the page, providing a clear introduction.
Main: The <main> element holds the primary content, ensuring semantic clarity and improved accessibility.

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 method for positioning elements, though it requires careful handling to avoid layout issues with normal document flow.
CSS Flexbox: Ideal for responsive and dynamic layouts, easily adjusting content across different screen sizes.
CSS Grid: Allows for complex, two-dimensional layouts with ease, providing more control over placement.

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.

Best Practices for HTML Layout

Use semantic HTML5 elements like <header>, <nav>, <main>, and <footer> to clearly define the structure of your webpage.
Ensure responsive design by using relative units and media queries to make your layout adaptable to different screen size

HTML File Paths

rajusinghbhati

Improve

Article Tags :

HTML Layout

Layout Components

Layout with Additional Semantic Tags

Styled Layout with Semantic Tags

Techniques for Creating HTML Layouts

Best Practices for HTML Layout

Similar Reads

Basics

HTML Structure & Elements

HTML List

HTML Visuals & Media

HTML Layout & Design

HTML Projects& Advanced Topics

HTML Tutorial References

Thank You!

What kind of Experience do you want to share?