refactor: shorten lesson titles and improve content

- Shorten verbose lesson titles for better sidebar display
- Minor content improvements across lessons

lessons/20-html-elements.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "html-elements",
-	"title": "HTML Elements: Block vs Inline",
+	"title": "HTML Elements",
 	"description": "Understanding the fundamental difference between container (block) and inline elements",
 	"mode": "html",
 	"difficulty": "beginner",
@@ -32,7 +32,7 @@
 		},
 		{
 			"id": "semantic-containers",
-			"title": "Semantic Container Elements",
+			"title": "Semantic Tags",
 			"description": "Modern HTML uses semantic containers that describe their content:<br><br><kbd>&lt;header&gt;</kbd> - Page or section header<br><kbd>&lt;nav&gt;</kbd> - Navigation links<br><kbd>&lt;main&gt;</kbd> - Main content area<br><kbd>&lt;section&gt;</kbd> - Thematic grouping<br><kbd>&lt;article&gt;</kbd> - Self-contained content<br><kbd>&lt;footer&gt;</kbd> - Page or section footer",
 			"task": "Create a basic page structure:<br>1. Add a <kbd>&lt;header&gt;</kbd> with an <kbd>&lt;h1&gt;</kbd> containing the text 'My Website'<br>2. Add a <kbd>&lt;main&gt;</kbd> element with a paragraph saying 'Welcome to my site!'<br>3. Add a <kbd>&lt;footer&gt;</kbd> with a paragraph saying 'Copyright 2025'",
 			"previewHTML": "",
@@ -66,7 +66,7 @@
 		},
 		{
 			"id": "div-vs-span",
-			"title": "Generic Containers: div and span",
+			"title": "div & span",
 			"description": "When you need a container without semantic meaning:<br><br><kbd>&lt;div&gt;</kbd> - Generic block container (for layout/grouping)<br><kbd>&lt;span&gt;</kbd> - Generic inline container (for styling text portions)<br><br>Use semantic elements when possible, div/span when no semantic element fits.",
 			"task": "Wrap the word 'highlighted' in a <kbd>&lt;span&gt;</kbd> to style it differently. Wrap the whole quote in a <kbd>&lt;div&gt;</kbd>.",
 			"previewHTML": "",