Lesson 5: HTML foundations: Testing focus

Concept Explanation

Testing HTML means checking more than whether the page appears on screen. You also want to verify structure, text order, labels, landmarks, and links. In this lesson, you will practice using a simple checklist to inspect markup and catch issues early. The focus is on building the habit of checking HTML with intent instead of assuming it is correct because it renders.

Where to Put the Code

1. Start with variables and inputs. Place markup in semantic sections with clear structure.
2. Add processing logic in the middle section.
3. Finish with output and quick validation.

Command Reference

• Check that every section has a clear heading or accessible label.
• Verify that links use meaningful text instead of vague wording like “click here”.
• Inspect the reading order and confirm it still makes sense without CSS.
• Write down one issue you found and how you corrected it.

Step-by-step Guide

1. Create the example markup and load it in the browser.
2. Review the HTML with a short checklist: headings, links, lists, labels, and nesting.
3. Identify one normal case and one edge case, such as missing text or an unlabeled section.
4. Fix the problem and rerun the same checks.
5. Write one sentence describing why HTML testing matters even on simple pages.

Practice Exercises

• Build a contact block and test whether the structure is clear without styling.
• Review a short navigation menu and improve any weak link text.
• Create a checklist for testing a basic article page and use it on your own markup.

Coding Challenges

• Test two versions of the same page and explain which one is more accessible.
• Find three structural issues in a practice page and fix them without changing the visible content too much.

Mini Practice Tasks

• Confirm that every heading introduces the content below it.
• Check that lists are marked up as lists, not just lines of text.
• Fix one small HTML issue and note the result.