Boxes

HTML Boxes Summary

HTML boxes are elements that group content so a page can be organized into sections, cards, wrappers, and smaller nested parts.

A website is easier to understand when you imagine it as boxes inside other boxes. HTML creates the boxes and describes what they contain. CSS controls their size, spacing, color, and layout.

<section class="card">
	<h2>Beginner Lesson</h2>
	<p>Learn how HTML organizes a page.</p>
</section>

Boxes Group Related Content

A box can hold content that belongs together, such as a heading and a paragraph. This makes the page structure clearer and gives CSS one area to style.

<section class="service">
	<h2>Website Review</h2>
	<p>We check pages for clarity and accessibility.</p>
</section>

The section element tells the browser that this content is one part of the page. The class gives CSS a reusable name to target.

Boxes Can Be Nested

Nesting means placing one element inside another. This lets a larger box hold smaller parts.

<section class="profile-card">
	<div class="profile-text">
		<h2>Maya Chen</h2>
		<p>Front-end designer and teacher.</p>
	</div>
	<img src="maya.jpg" alt="Portrait of Maya Chen">
</section>

The text box and image are inside the larger card box. CSS can later place them beside each other or stack them, depending on the layout.

Use Meaningful Boxes When Possible

Some boxes have meaning built into their element names. A section groups one topic. A header introduces a page or section. A footer contains ending information.

A div is a general-purpose box. Use it when you need a box for styling or layout and no more specific HTML element fits.

<section>
	<h2>Featured Projects</h2>
	<div class="project-grid">
		Project cards go here.
	</div>
</section>

The HTML Structure lesson explains semantic structure elements in more detail.

CSS Styles The Box

After HTML creates a box, CSS can control its width, padding, margin, border, background, and layout behavior.

.card {
	padding: 20px;
	border: 1px solid gray;
	background: white;
}

The CSS Box Model lesson explains the spacing and sizing parts of a box.