Module 11: Best Practices

📖 HTML Validation

Validation ensures your HTML follows the official rules. Valid HTML is more predictable across browsers, more accessible, and better for SEO.

The W3C Markup Validation Service

The W3C Validator is the official tool maintained by the same organization that writes HTML standards.

Three Ways to Validate

Validate by URI: Enter a live website URL
Validate by File Upload: Upload your HTML file directly
Validate by Direct Input: Copy and paste your HTML code

Common Validation Errors

Error	Cause	Fix
Missing DOCTYPE	No `<!DOCTYPE html>`	Add it as the very first line
Unclosed tag	Missing closing tag	Add `</tag>`
Missing alt attribute	Image without `alt`	Add descriptive alt text or `alt=""` for decorative images
Duplicate ID	Same `id` used twice	IDs must be unique; use `class` for repeated styling
Invalid nesting	Block element inside inline element	Restructure (e.g., don't put `<div>` inside `<span>`)

✏️ Exercise 11.1: Fix Broken HTML

Download this broken.html file (or create it with intentional errors) and:

Validate it at validator.w3.org
Fix every error and warning
Re-validate until you see: "Document checking completed. No errors or warnings to show."

📝 HTML Comments

Comments are notes in your code that browsers ignore. They help you and other developers understand your code.

Comment Syntax

<!-- This is a single-line comment -->

<!-- 
    This is a multi-line comment.
    Use comments to explain complex sections
    or mark TODO items.
-->

<!-- TODO: Add navigation menu here -->
<nav>...</nav>
            

When to Use Comments

Explaining complex or unusual code choices
Marking sections in large files
TODO items and reminders
Temporarily disabling code during testing

When NOT to Use Comments

Don't state the obvious: 
Don't use comments instead of proper semantic HTML
Don't leave sensitive information in comments (users can see them in View Source)

⚠️ Security: Never put passwords, API keys, or private notes in HTML comments. Anyone can view them by right-clicking → "View Page Source".

📁 File and Folder Organization

A well-organized project is easier to maintain and scale.

Recommended Project Structure

my-website/
├── index.html          <!-- Homepage (always at root) -->
├── about.html          <!-- About page -->
├── contact.html        <!-- Contact page -->
├── css/
│   └── style.css       <-- Stylesheets -->
├── js/
│   └── script.js       <-- JavaScript files -->
├── images/
│   ├── logo.png
│   ├── banner.jpg
│   └── team/
│       ├── john.jpg
│       └── jane.jpg
├── videos/
│   └── intro.mp4
└── favicon.ico         <!-- Site icon -->
            

Naming Conventions

Good	Bad	Why
`about-us.html`	`About Us.html`	No spaces, no caps (URL-friendly)
`contact.html`	`page3.html`	Descriptive names
`logo.png`	`IMG_20230513_143022.jpg`	Simple, meaningful names
`team/john.jpg`	`johnprofilepicturefinal2.jpg`	Organize with folders

💡 Best Practice: Use lowercase for all filenames and folders. Separate words with hyphens (not underscores or spaces). This prevents cross-platform issues (Linux servers are case-sensitive).

🎨 Code Formatting Standards

Clean, consistent code is professional and easier to debug.

Indentation Rules

Use 2 or 4 spaces per indentation level (never mix both!)
Indent child elements one level deeper than their parent
Align sibling elements at the same level

<!-- Good indentation -->
<nav>
    <ul>
        <li>
            <a href="/">Home</a>
        </li>
        <li>
            <a href="/about">About</a>
        </li>
    </ul>
</nav>

<!-- Bad indentation (hard to read) -->
<nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav>
            

Attribute Formatting

<!-- Good: one attribute per line for long tags -->
<img
    src="images/photo.jpg"
    alt="Sunset over Lalibela churches in Ethiopia"
    width="800"
    height="600"
    loading="lazy">
            

✏️ Exercise 11.2: Audit and Fix a Page

Your Task

Take any HTML file you've created in this course and perform a complete audit:

Validate it at validator.w3.org
Check all images have alt attributes
Ensure all id values are unique
Verify every <a> has an href
Check all form inputs have associated <label> elements
Ensure proper heading hierarchy (no skipped levels)
Fix indentation to be consistent (2 or 4 spaces)
Add helpful comments for complex sections
Re-validate until zero errors

📝 Module 11 Quiz

🎯 Module Summary

✅ Validate all HTML with the W3C Validator
✅ Use comments wisely — explain why, not what
✅ Organize files in logical folders (css/, js/, images/)
✅ Use lowercase filenames with hyphens
✅ Maintain consistent indentation (2 or 4 spaces)
✅ Never put sensitive data in HTML comments

← Previous Module Next: Module 12 →