HTML Block Elements
Modern WebBlock-level elements create the structure of your webpage and naturally stack vertically.
Core Concepts
Essential KnowledgeBlock Element Behavior
How blocks work in document flow
Always start on a new line
Take up full available width
Can contain other elements
Basic Example
Simple block structure
<div class="container">
<h1>Page Title</h1>
<p>Paragraph content</p>
<div class="content-block">
<p>Nested content</p>
</div>
</div>Element Reference
divGeneric Container
The most versatile block element
<div class="card">
<div class="card-body">
Content goes here
</div>
</div>pParagraph
For blocks of text content
<p>This is a paragraph that
forms a distinct block of text
in your document flow.</p>sectionDocument Section
Thematic grouping of content
<section aria-labelledby="about-heading">
<h2 id="about-heading">About Us</h2>
<p>Company history...</p>
</section>articleIndependent Content
Self-contained composition
<article class="blog-post">
<h2>Post Title</h2>
<p>Post content...</p>
</article>h1-h6Headings
Document section headings
<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>Maintain proper heading hierarchy for accessibility
blockquoteQuotations
Extended quoted content
<blockquote cite="source-url">
<p>Important quoted text...</p>
<footer>— Author Name</footer>
</blockquote>Modern Layout Example
Semantic Page Structure
Modern HTML5 document layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Page</title>
</head>
<body>
<header class="site-header">
<nav>...</nav>
</header>
<main class="container">
<article>
<h1>Article Title</h1>
<section class="intro">
<p>Introduction content...</p>
</section>
<section class="content">
<p>Main content...</p>
</section>
</article>
<aside class="sidebar">
<div class="widget">...</div>
</aside>
</main>
<footer class="site-footer">
<p>Copyright information</p>
</footer>
</body>
</html>Block vs Inline
Block Elements
- Form page structure
- Stack vertically
- Full available width
Examples:
divsectionh1-h6pInline Elements
- Flow within text
- Only necessary width
- Can't contain blocks
Examples:
spanastrongimg