Boxes

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 also inside another box that makes them blue.

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

Grouping

You might want to have 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.

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

Wrappers

HTML Boxes Examples

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.’ In CSS you indicate that the class should apply text-align: center;.

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




To keep these parts separate we wrap them in an HTML box and make it 100% width using CSS.

Grouping