HTML Layout Elements and Techniques

HTML Layout Elements and Techniques

Creating a good page layout means organizing content in a clear, responsive, and accessible way.

HTML provides semantic layout elements, and CSS provides layout techniques to arrange them.

1. Semantic HTML Layout Elements (Recommended)

Semantic elements describe meaning, not just appearance. They improve SEO and accessibility.

Common Layout Elements

Basic Semantic Layout Example

<!DOCTYPE html>
<html>
<head>
<title>Semantic Layout</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<nav>
<a href="#">Home</a> |
<a href="#">About</a>
</nav>
<main>
<section>
<h2>Main Content</h2>
<p>This is the main section.</p>
</section>
<aside>
<p>Sidebar content</p>
</aside>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Semantic Layout</title>

</head>

<body>

<h1>My Website</h1>

</header>

<nav>

<a href="#">Home</a> |

<a href="#">About</a>

</nav>

<main>

<h2>Main Content</h2>

<p>This is the main section.</p>

</section>

<aside>

<p>Sidebar content</p>

</aside>

</main>

</footer>

</body>

</html>

2. Layout Using `<div>` (Traditional Way)

Before semantic tags, layouts were built with <div>.

Still works
Less meaningful than semantic HTML
Prefer semantic elements when possible.

3. CSS Layout Techniques (Very Important)

HTML defines structure, CSS controls layout.

3.1 CSS Float (Old Technique)

Hard to manage
Not responsive-friendly
Avoid in new projects

3.2 CSS Flexbox (Most Common)

Best for 1-dimensional layouts (row or column).

Common Flexbox Properties

display: flex
justify-content
align-items
flex-direction
Easy
Responsive
Modern

3.3 CSS Grid (Advanced & Powerful)

Best for 2-dimensional layouts (rows + columns).

Perfect for full page layouts
Very powerful

4. Responsive Layout Techniques

Media Queries

Layout adapts to mobile

Mobile-First Approach (Best Practice)

5. Typical Page Layout Pattern

Styled with:

Flexbox → simple layouts
Grid → complex layouts

6. Layout Technique Comparison

Technique	Use Case	Status
Tables	Data only	No
Float	Old layouts	No
Flexbox	One-direction layout	Yes
Grid	Full page layout	Yes
Semantic HTML	Structure	Yes

Common Layout Mistakes

Using tables for layout
Too many <div> (div soup)
Ignoring mobile users
Not using semantic tags

Key Takeaways

Use semantic elements for structure
Use Flexbox for simple layouts
Use Grid for complex layouts
Avoid old techniques like floats
Always design responsive layouts

HTML Layout Elements and Techniques