A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore validity vs accessibility vs visual rendering using a short example that you can inspect and change.
The Idea in Plain English
When debugging or reviewing a document, check semantic structure, element nesting, file loading, form behavior and accessibility separately. A page can look normal while still being incorrect.
Try the example with a keyboard and an accessibility inspector. Visible appearance alone does not tell you whether its meaning is announced correctly.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Check My Markup</title>
</head>
<body>
<main>
<h1>Markup Review</h1>
<p>A well-structured example.</p>
</main>
</body>
</html>What Each Part Does
- The meta element supplies machine-readable settings; its name or charset decides which setting.
- The title gives the document a name in tabs and other browser surfaces.
- The main landmark identifies the page’s primary content.
- lang identifies the natural language for text-to-speech and language tools.
- charset identifies the character encoding used by the document.
The validator and developer tools can expose problems that are not obvious to sighted mouse users.
Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.
Try It Yourself
Try this next: compare authored source against the DOM tree in DevTools focused on HTML Validity vs Accessibility vs Visual Rendering, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Fixing one visual symptom without checking the underlying HTML structure.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- When debugging or reviewing a document, check semantic structure, element nesting, file loading, form behavior and accessibility separately. A page can look normal while still being incorrect.
- The validator and developer tools can expose problems that are not obvious to sighted mouse users.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.