{ "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-elements", "title": "HTML Block & Inline", "description": "Understanding the fundamental difference between container (block) and inline elements", "mode": "html", "difficulty": "beginner", "lessons": [ { "id": "block-vs-inline-intro", "title": "Block vs Inline Elements", "description": "HTML elements fall into two main categories:

Block elements (containers) start on a new line and take full width. Examples: <div>, <p>, <h1>, <section>

Inline elements flow within text and only take needed width. Examples: <span>, <a>, <strong>, <em>", "task": "Wrap the word important with <strong> tags to make it bold. Notice how the paragraph (block) takes full width while strong (inline) flows with text.", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }", "sandboxCSS": "", "initialCode": "

This is a paragraph with an important word.

", "solution": "

This is a paragraph with an important word.

", "previewContainer": "preview-area", "concept": { "explanation": "The browser's layout engine treats block and inline elements fundamentally differently. Block elements create a rectangular box that starts on a new line and expands to fill available width, stacking vertically like building blocks. Inline elements flow horizontally within text content, wrapping to new lines only when they run out of space—like words in a paragraph. This distinction controls document flow: use block for structure (sections, paragraphs) and inline for content emphasis (bold, links) without breaking the text flow.", "diagram": "Block vs Inline Layout\n\nBlock elements (vertical stacking):\n┌─────────────────────────────┐\n│
Full width block │ ← New line\n└─────────────────────────────┘\n┌─────────────────────────────┐\n│

Another block element │ ← New line\n└─────────────────────────────┘\n\nInline elements (horizontal flow):\n┌─────────────────────────────┐\n│ Text with link and │\n│ bold flows │ ← Wraps naturally\n│ like words in a sentence. │\n└─────────────────────────────┘\n\nKey differences:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nBlock: New line, full width\nInline: Same line, auto width\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" }, "validations": [ { "type": "element_exists", "value": "p", "message": "Add a <p> paragraph element" }, { "type": "parent_child", "value": { "parent": "p", "child": "strong" }, "message": "Wrap the word important with <strong> tags" } ] }, { "id": "semantic-containers", "title": "Semantic Tags", "description": "Modern HTML uses semantic containers that describe their content:

<header> - Page or section header
<nav> - Navigation links
<main> - Main content area
<section> - Thematic grouping
<article> - Self-contained content
<footer> - Page or section footer", "task": "Create a basic page structure:
1. Add a <header> with an <h1> containing the text My Website
2. Add a <main> element with a paragraph saying Welcome to my site!
3. Add a <footer> with a paragraph saying Copyright 2026", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }", "sandboxCSS": "", "initialCode": "", "solution": "

\n

My Website

\n
\n
\n

Welcome to my site!

\n
\n", "previewContainer": "preview-area", "concept": { "explanation": "Semantic HTML elements convey meaning about their content, not just appearance. Screen readers use semantic tags to help blind users navigate (\"skip to main content\" relies on
), search engines rank pages higher when structure is clear (
signals important content), and developers understand code faster when tags describe purpose. Using
instead of
gives the same visual result but adds machine-readable meaning that assistive technology and search crawlers can understand. This is the foundation of accessible, SEO-friendly web development.", "diagram": "Semantic Page Structure\n\n┌─────────────────────────────┐\n│
│ ← Page header\n│

Site Title

│ (branding, logo)\n│ │ (navigation)\n└─────────────────────────────┘\n┌─────────────────────────────┐\n│
│ ← Primary content\n│
Blog Post
(unique per page)\n│
Comments
(landmarks)\n└─────────────────────────────┘\n┌─────────────────────────────┐\n│