HTML: The Web's Foundation

  • Created: 1991 by Tim Berners-Lee at CERN—originally just 18 tags!
  • HTML5: Released 2014 after 15 years of development, added <video>, <canvas>, <article>
  • Today: ~115 standard elements, but most pages use fewer than 30

Common HTML Mistakes This Catches

  • Unclosed tags: <div><p>Text</div> ← Missing </p> breaks layout unpredictably
  • Missing alt: <img src='photo.jpg'> ← Screen readers can't describe this image
  • Empty href: <a href=''>Click</a> ← Reloads page instead of doing nothing
  • Inline styles: style='color:red' works but makes maintenance nightmare
  • Deprecated tags: <center>, <font>, <marquee>—use CSS instead (it's 2024!)

Accessibility Must-Haves

  • alt on images: Describe what's IN the image, not 'image of...'
  • label for inputs: <label for='email'>Email</label><input id='email'>
  • Heading hierarchy: Don't skip levels (h1 → h3 without h2)
  • Button vs link: <button> for actions, <a> for navigation
  • lang attribute: <html lang='en'> helps screen readers pronounce correctly

SEO HTML Essentials

  • <title>: 50-60 chars, unique per page, keyword near front
  • <meta description>: 150-160 chars, compelling summary for search results
  • Semantic tags: <header>, <nav>, <main>, <article>, <footer>—helps Google understand structure
  • Heading structure: One <h1> per page, logical hierarchy signals importance
  • Image alt text: Helps Google Images understand and rank your images

HTML5 Semantic Elements

  • <header>: Introductory content, typically contains logo and nav
  • <nav>: Navigation links (main menu, breadcrumbs)
  • <main>: Primary content—only ONE per page
  • <article>: Self-contained content (blog post, news story, comment)
  • <section>: Thematic grouping of content, usually with heading
  • <aside>: Tangentially related content (sidebars, pull quotes)
  • <footer>: Footer info—copyright, links, contact

Minification Benefits

  • Removes whitespace, comments, and unnecessary quotes
  • Typical savings: 10-30% file size reduction
  • Faster page loads = better SEO ranking (Core Web Vitals)
  • Combined with GZIP: 70-90% total reduction
  • Warning: Minified HTML is nearly unreadable—keep source files formatted!

Modern HTML Best Practices

  • DOCTYPE: <!DOCTYPE html> is all you need (HTML5 simplified this)
  • charset: <meta charset='UTF-8'> should be in first 1024 bytes
  • viewport: <meta name='viewport' content='width=device-width, initial-scale=1'> for mobile
  • Avoid div soup: Use semantic elements instead of <div class='header'>
  • Self-closing tags: <br>, <img>, <input>—no need for <br /> anymore in HTML5