X

HTML Boxes Summary

HTML lets you organize, box, and label content. This lets you stack and nest boxes of text, media, and interactive elements to create website layouts.

Web design decides where the boxes go and what they look like. Web development uses HTML and CSS to build and style the boxes based on design.

With the use of CSS, these boxes can have width, height, inner padding, outer margins, borders, background colors/gradients/images, opacity, etc. 

<div id="box-of-stuff">
	Stuff
</div>

#box-of-stuff {
	background: red;
}

Nested Boxes

A website is a bunch of nested boxes of content stacked and set next to each other. Nesting serves many purposes.

Styling

You could have four paragraphs all in a box that makes their color black and then have two of those paragraphs inside another box that makes them blue.

<div class="black-paragraphs">
	<p>Text</p>
	<p>Text</p>
	<div class="blue-paragraphs">
		<p>Text</p>
		<p>Text</p>
	</div>
</div>

Grouping

You might want a title and text on the left half of the screen and an image on the right. This would require putting the title and text together in a box so they can be moved together.

<div class="section">
	<div class="text">
		<h2>Title</h2>
		<p>Text Content</p>
	</div>
	<img src="/cat/jpg" />
</div>

Wrappers

You might want the content on the page to have a maximum width. And you may want to control that width for different screen sizes. To do this, you would put all the page content into a box and control its width with CSS.

<div class="wrapper">
	<div class="text">
		Content
	</div>
</div>

Sections

Web pages are often separated into full-width tiers. For example, on a home page, we might have a header, call-to-action, services, affiliations, reviews, contact info, and footer.

Then maybe nested within the services section are three boxes. You want each of those boxes to look the same so you give them the same class of ‘service.’

And then, inside each ‘service’ box you have boxes for ‘service-details,’ ‘service-image,’ ‘service-link,’ each containing content.

Code Sandbox