# Don't DIV everything

Are you writing your basic html layouts with markup/css similar to this?

<div class="container">
	<div class="header">HEADER</div>
	<div class="content">CONTENT</div>
	<div class="footer">FOOTER</div>
</div>

.container {
	position: absolute;
	top: 0;
	left: 50%;
	bottom: 0;
	width: 800px;
	margin-left: -400px;
}
.header {
	position: absolute;
	top: 0;
}
.footer {
	position: absolute;
	bottom: 0;
}

Full example on CodePen

Nothing technically wrong with it , but it is quite heavy on the div tags and absolutely positioned elements can be a nightmare if you're not careful. Perhaps we can make use of semantic tags from HTML5 with a little more modern CSS.

# Instead of div tags...

Since the advent of HTML5 there are several tags in HTML I don't see get used a lot like...

• <header/>
• <section/>
• <footer/>

Using these tags can take your basic layout to a more semantic level like so:

<div class="container">
	<header>HEADER</header>
	<section>SECTION</section>
	<footer>FOOTER</footer>
</div>

...and for the CSS using the flex value in your display property along with other flex mechanics can get you out of absolute positioning.

.container {
	display: flex;
	flex-direction: column;
}
header {
	background-color: #ffb3ba;
}
section {
	flex: auto;
}
footer {
	background-color: #bae1ff;
}

Full example on CodePen

# Why do it?

The end result may remain the same but with a semantic approach you are providing web crawlers, screen readers, document processors, etc with an easier way of analyzing your content. You as a developer will have a better idea of what each part of the page is intended for making it easier to contribute.

~ zan0