HTML - Forms and Tables Part 3

Instructors: Jess, Carmen, and Eda

Forms and Tables

Before this session, please:

• Read Working with HTML Tools: What Is an HTML Validator, and How Can It Help You Debug Your Code? and take notes
• Read Working with HTML Tools: How to Use the DOM Inspector and DevTools to Debug and Build Your Projects and take notes
• Read HTML Tables and Forms Review and take notes
• Complete HTML Tables and Forms Quiz solo to test your understanding
• Complete Build a Survey Form solo over the next week or so

During this session, we’ll:

• Review notes
• We’ll be looking at dev tools and dom inspectors from different browsers together.
• Review notes
• Review notes
• We’ll look at Build a Survey Form together, your first certification project. We want to explore how you might want to approach this project to better prepare you to complete this over the next week. You’ll need to work on these solo and will want to spend more time on these than labs.

After this session, please:

• Read Importance of Accessibility and Good HTML Structure: What Is Accessibility? and take notes
• Read Importance of Accessibility and Good HTML Structure: What Are Screen Readers, and Who Uses Them? and take notes
• Read Importance of Accessibility and Good HTML Structure: What Are Large Text or Braille Keyboards, and Who Uses Them? and take notes
• Read Importance of Accessibility and Good HTML Structure: What Are Alternative Pointing Devices Such as Trackballs, Joysticks, and Touchpads Used For? and take notes
• Read Importance of Accessibility and Good HTML Structure: What Are Screen Magnifiers Used For? and take notes
• Read Importance of Accessibility and Good HTML Structure: What Is Voice Recognition Software Used For? and take notes
• Read Importance of Accessibility and Good HTML Structure: What Are Some Common Accessibility Auditing Tools to Use? and take notes
• Read Importance of Accessibility and Good HTML Structure: How Does Proper Heading Level Structure Affect Accessibility? and take notes
• Try to complete all the steps in Debug a Coding Journey Blog Page

Instructor notes

Working with HTML Tools: What Is an HTML Validator, and How Can It Help You Debug Your Code?

HTML is a famously forgiving language. If you forget to close a tag, the browser doesn’t throw an error or refuse to render. It just does its best to figure out what you meant and shows you something. This is great when you’re starting out (typos don’t crash your page), but it can also let bugs hide in plain sight.

A concrete example. Imagine you have this:

1<h1>Article Topic</h1>
2<h2>Subheading 1 </h2>
3<h2>Subheading 2 </h2>
4
5<!-- This h2 does not have a closing tag -->
6<h2>Subheading 3

That last h2 has no closing tag. The browser renders it anyway and the page looks fine. But the moment you add paragraphs after each heading, things go sideways:

1<h2>Subheading 3
2<p>Lorem ipsum dolor...</p>

That <p> ends up being rendered as part of the still-open <h2>, so your paragraph text appears as a giant heading. The page looks broken and you have no idea why. The browser will not tell you what went wrong.

This is exactly the kind of bug an HTML validator catches.

HTML validator: a tool that checks the validity of your HTML code against the standard HTML specifications. It identifies errors and warnings in your code, helping make sure your pages are correctly structured and compliant with web standards.

Why use one?

• Catches bugs (like unclosed tags) that the browser silently hides
• Helps your future self when you come back to old code
• Helps teammates and open-source contributors who read your code
• Helps ensure compatibility across different browsers and assistive tech

Two validators to know:

1. W3.org markup validation service at validator.w3.org. This is the most widely accepted HTML validator. You can use the Validate by Direct Input button to paste in your HTML, then hit Check, and you’ll get a list of errors that need fixing.

2. jsonformatter.org, which also offers an HTML validator. Paste your code into the editor and hit Validate to see any errors.

Questions:

• If the browser renders my page fine, why should I bother validating it?
• Will a validator find every kind of bug?

Working with HTML Tools: How to Use the DOM Inspector and DevTools to Debug and Build Your Projects

When you’re building a project and something isn’t working as expected, you’re not just looking at it and guessing. Every browser ships with a set of tools to help you figure out what’s going on. Learning to use them is one of the biggest jumps you’ll make as a developer.

Bug: what programmers call an issue or problem with code.

Debugging: the process of finding and fixing those bugs.

To debug your code, you’ll use tools that come built into your browser. Two important ones are the DOM inspector and the developer tools (often called DevTools).

DOM inspector: a tool that lets you inspect the HTML structure of the page you’re currently on.

DOM (Document Object Model): a tree-like structure that represents the elements on a page. We’ll learn more about the DOM in later modules. For now, just think of it as a map of all the HTML elements on a page and how they nest inside each other.

Developer tools (DevTools): a set of tools built into your browser that lets you inspect the HTML, CSS, and JavaScript of the page you’re on. The DOM inspector is one part of DevTools.

How to open DevTools:

• Right-click anywhere on the page and select Inspect
• Or use the keyboard shortcut: Ctrl + Shift + I on Windows, Cmd + Option + I on Mac

The two tabs to know to start:

1. Elements tab: shows you the HTML structure of the page. You can click on elements to highlight them on the page, see their attributes, and even temporarily edit them to test changes.

2. Console tab: shows you any errors that might be occurring on the page. If something is broken, this is the first place to look.

A worked example. Imagine you have this:

1<a href="https://www.freecodecamp.org/larn/">freeCodeCamp curriculum</a>

When you click the link, it takes you to a 404 page (the error page that shows up when a URL doesn’t exist). The link looks fine at a glance. So how do you find the problem?

1. Open DevTools and check the Console tab. You’ll see a 404 error.
2. The 404 tells you the page wasn’t found, so the URL is wrong somewhere.
3. Switch to the Elements tab and inspect the anchor element. Look at the href value: /larn.
4. The correct path is /learn. There’s a typo.

Without DevTools you’d be poking at this for a while. With them, you found the bug in under a minute.

Questions:

• What does the Console tab actually show me when there’s no obvious bug?
• Can I edit my HTML in the Elements tab and have it save?