Block Element Summary
Block elements create the main boxes of a web page, usually starting on a new line and stretching across the available width.
<section>
<h2>About The Project</h2>
<p>This section explains what the project does.</p>
</section>Many page parts are block elements by default, including headings, paragraphs, sections, lists, and tables. They help divide a page into readable chunks.
Block Elements Start New Lines
A block element normally begins on a new line. The next block element appears below it, so the page feels like a stack of boxes.
<h2>Services</h2>
<p>We build simple websites.</p>
<p>We also review existing pages.</p>Each heading or paragraph takes its own row in the normal page flow.
Block Elements Create Layout Structure
Block elements are useful for grouping content that belongs together. A section can contain a heading, paragraphs, images, links, and other elements.
<section>
<h2>Contact</h2>
<p>Send us a message any time.</p>
<a href="contact.html">Contact Us</a>
</section>The HTML Boxes lesson explains how these larger page boxes can contain smaller boxes.
Common Block Elements
Common block elements include headings, paragraphs, lists, tables, sections, headers, main areas, and footers.
- Paragraphs hold regular text.
- Lists group related items.
- Tables arrange data into rows and columns.
Block And Inline Elements Are Different
Inline elements usually fit inside a line of content instead of starting a new row. Links, images, and small text-formatting elements are common inline elements.
CSS can change how an element is displayed, but learning the default difference helps you predict how simple HTML will appear before styling is added.