Concept Explanation
Refactoring in HTML is mostly about improving structure without changing what the page means. In this lesson, you will start with a simple block of markup and turn it into cleaner, more semantic HTML. The goal is to spot generic elements that can be replaced with better tags, group related content more clearly, and make the document easier to read, maintain, and style later.
Where to Put the Code
- Start with variables and inputs. Place markup in semantic sections with clear structure.
- Add processing logic in the middle section.
- Finish with output and quick validation.
Command Reference
- Replace at least two non-semantic containers with tags that describe the content better.
- Run the page and confirm that the browser output still matches the original intent.
- Explain one refactoring choice in plain language, such as why <article> or <header> fits better.
- Review the final markup and check whether another developer could understand it quickly.
Step-by-step Guide
- Read the starting markup and mark the parts that feel too generic or repetitive.
- Rewrite the structure with semantic elements such as header, main, article, section, or footer where appropriate.
- Open the page and confirm that the visible content did not break after the refactor.
- Compare the old and new versions and note which one is easier to scan.
- Write one sentence about how semantic HTML improves maintainability.
Practice Exercises
- Refactor a plain event card built with div elements into a more meaningful semantic structure.
- Take a short product description block and reorganize it using heading, paragraph, list, and footer elements.
- Build a second version of the same page with cleaner structure but the same visible content.
Coding Challenges
- Create two valid semantic solutions for the same content and compare which one reads more clearly.
- Refactor a cluttered page section while keeping the markup accessible and easy to style later.
Mini Practice Tasks
- Replace one generic wrapper with a semantic tag.
- Check that headings follow a logical order.
- Summarize in one line what changed in the refactor.
Common Mistake
Skipping input validation or mixing logic/output in one unstructured block.
Real-life Mini Challenge
Build a small real-life example for this lesson topic using 3 clear steps: input, process, output.