📖 Testing and Debugging HTML and CSS

Introduction to Debugging

Debugging is the process of identifying and fixing errors in your code. Whether it's a missing HTML tag, a misplaced CSS property, or an accessibility oversight, debugging is an essential skill for web developers.

This lesson will help you understand common debugging techniques using industry-standard tools like Visual Studio Code and browser Developer Tools.

Why Debugging Matters

Errors in your code can lead to:

  • Broken layouts
  • Non-functional features
  • Accessibility issues

Debugging early and often saves time and prevents frustration by ensuring your web pages meet the required standards and function as intended.

Common Errors in HTML and CSS

HTML Errors
Examples include missing closing tags, improper nesting, and incorrect attributes.
CSS Errors
Issues such as conflicting styles, broken layouts, and invalid property names.
Accessibility Violations
Errors like missing alt attributes, insufficient color contrast, and non-descriptive link text.

Types of Errors by Severity

Critical Errors (Highly Pronounced)
HTML Structural Issues
Missing closing tags, improperly nested elements, and incorrect <!DOCTYPE> declarations.
CSS Issues
Broken layouts, overlapping content, or elements disappearing due to incorrect styles.
Accessibility Violations
Missing form labels, no keyboard navigability, or absent alt attributes on images.
Moderate Errors (Subtle but Noticeable)
HTML Issues
Misusing HTML for styling/layout, incorrect attributes, or redundant elements.
Misuse of HTML for Styling/Layout
  • Using <br> tags for spacing instead of CSS.
  • Applying inline styles directly in HTML.
  • Using heading tags to format text (size, weight, etc.), disrupting document structure.
CSS Issues
Improper media queries, mismatched styles, or conflicting selectors.
Accessibility Violations
Poor contrast ratios, improper heading hierarchy, or overuse of ARIA roles.
Minor Errors (Barely Noticeable or Hidden)
HTML Issues
Unused tags, invalid attributes, or missing meta tags.
CSS Issues
Overly specific selectors, deprecated properties, or inefficient animations.
Accessibility Violations
Missing focus styles, non-descriptive links, or subtle timing issues in animations.

Debugging Techniques

Validate the Code

± Validate HTML at http://validator.w3.org. Correct any errors and warnings.

± Validate your CSS at http://jigsaw.w3.org/css-validator/. Not a perfect tool but may help find CSS anomalies.

± Validate the accessibility using the Wave Accessibility checker. This will help you see your site HTML errors, structure and contrast errors.

± Check for browser-specific fixes. Can-I-Use ia a good resource for checking browser compatibility with specific HTML and CSS elements.

General Practices

± Work incrementally. Make small changes and test after each one.

± Watch for errors while writing your code. Many IDE editors will provide immediate feedback to common errors by underlining the error in red. Often you can hover the error to view help.

± Open the code in your browser using the View Page Source tool. Many errors will be underlined in red. Often you can hover the error to view help.

± Comment out code to help isolate the problem. <!-- This is a HTML comment --> /* This is a CSS comment */

Check for Required Assets

± If testing on the server, make sure you uploaded your changes including all dependencies (HTML, CSS, images and JavaScript files).

± On your computer, make sure you saved your changes and you are looking at the correct file (in the correct directory).

± If your entire page disappears after adding an embedded style sheet, you probably left off the closing </style> tag.

± Missing images or styles may be result of not uploaded the files or having the incorrect path.

Testing on Multiple Devices

± Test in multiple browsers.

± Test with multiple view ports (desktop, tablet and mobile).

Programming Errors

± Look for missing brackets and closing tags in HTML.

± Look for missing curly braces, colons, and semi-colons in CSS.

± Look for properly nested elements.

± Look for opened tags.

± Take a break.

Advanced Techniques

± Perform a "hard refresh." Modern browsers save a copy of web pages in a cache to speed up performance. While browsers are supposed to reload pages that have changed, sometimes they don't. This can be very frustrating when you are trying to test your page and it won't update. Try performing a hard refresh to force the browser to get the file from the server.

± Open the browser dev tools Ctrl+Shift+I or F12 (PC) or Cmd+Opt+I (Mac). Click the Console tab. Many CSS and JavaScript errors will appear here. Be careful though, many JS errors don't effect the page load process and may distract you from the actual problem.

± For CSS problems, open the browser dev tools and click the Elements tab. Select the page element that is not behaving well and review the source code especially the CSS properties. See if any CSS properties are being ignored by the browser. These can be identified as having a strikethrough or greyed out text.

These methods might help you find where a problem resides in your code, it might not help you to understand what to do about it. Unfortunately, there are way too many possible problems that could be associated with the code to attempt to mention them here. When the solution to the problem isn't apparent, look for information information icon and help help icon icons for more information.

Real-World Debugging Examples

Example 1: Fixing a Broken Form

Severity Level: Critical

Reason: Missing labels directly affect accessibility, while improper handling of void tags may cause warnings that confuse less experienced developers. Properly coded labels significantly enhance usability for controls like radio buttons and checkboxes.

Consider a form with missing labels and void tags written as self-closing (e.g., <input />). Using browser Developer Tools, you can inspect the DOM and identify the issues.

<form>
    <input type="text" name="username" />
    <input type="submit" />
</form>

Symptoms: The form may appear functional but could trigger validator warnings due to self-closing void tags in an HTML5 document, depending on the DOCTYPE declaration. Additionally, missing label elements impact accessibility. For example, clicking a label does not activate the associated control, making radio buttons and checkboxes particularly challenging for some users.

Solution: Add the missing label elements and ensure consistency with the declared DOCTYPE. For HTML5, avoid unnecessary self-closing slashes on void tags to prevent warnings. Validate the updated form using W3C tools.

Example 2: Debugging a CSS Selector Issue

Severity Level: Moderate

Reason: Misspelled selectors or broken stylesheet links are common issues that disrupt the visual design without breaking functionality.

Imagine a style rule that doesn't seem to be applied because of a typo in the selector or a broken link to the stylesheet.

<link rel="stylesheet" href="styles.css">
.header-title {
    color: blue;
    font-size: 24px;
}

Symptoms: The intended styles do not appear on the page. Upon inspection, either the stylesheet is missing or there is a typo in the selector.

Solution: Use browser Developer Tools to confirm that the stylesheet is loading correctly. Check the "Network" tab for missing file errors or inspect the selector in the "Elements" tab to ensure it matches the HTML structure.

Example 3: Identifying Subtle Accessibility Issues

Severity Level: Moderate to Minor

Reason: Insufficient color contrast and poor color choices impact usability, particularly for colorblind users, even if validators do not flag them as errors.

Accessibility errors often go unnoticed unless explicitly tested. Consider text styled with a background color but lacking sufficient color contrast:

.text-container {
    background-color: #C0C0C0;
    color: #D3D3D3;
}

Symptoms: Users with visual impairments may struggle to read the text due to insufficient contrast. Color combinations such as red and blue or others may not trigger validator errors but can be hard for colorblind users to differentiate.

Solution: Use the "Accessibility" tab in Developer Tools or online contrast checkers to verify compliance with WCAG standards. Adjust the colors to improve contrast ratios.

.text-container {
        background-color: #333333;
        color: #FFFFFF;
      }

References

Debugging is an iterative process that improves with practice. By mastering these techniques, you'll become a more effective and efficient web developer. Here are some resources to further support your debugging and web development journey:

MDN: Debugging HTML

MDN: Debugging CSS

A11y Project – A community-driven resource for building accessible websites.

Can I Use – A reference for checking browser support for various web technologies.