Markdown XSS Prevention: Sanitizing User-Generated Content

Markdown's ability to include raw HTML is a feature for power users but a security risk for applications that accept user-generated content. A malicious user can inject <script> tags, onerror handlers, or javascript: URLs. Sanitization is non-negotiable for any Markdown source that didn't come from you.

Sanitization Strategies

Strip all HTML: only allow Markdown syntax — safest but most restrictive. Allowlist safe HTML: let through common formatting tags (b, i, em, strong, code) and block everything else. Allow all HTML, then sanitize output: use DOMPurify (browser/Node) or sanitize-html (Node) to strip dangerous elements and attributes. Never roll your own escape function — the XSS surface is enormous. For user-generated content, the allowlist approach is the safest default.

Why This Matters in 2026

HTML is the foundation of the web, yet many developers take it for granted. In 2026, with AI tools generating HTML at scale, understanding proper HTML structure, semantics, and formatting is more important than ever. AI-generated HTML often looks correct but breaks in real browsers due to unclosed tags, invalid nesting, and missing accessibility attributes. Proper HTML formatting and validation catches these issues before they reach users.

Key Takeaways

• Always use semantic HTML elements — header, nav, main, section, article, footer
• Format HTML during development, minify for production via build tools
• Validate the document outline — check doctype, head, body, and container flow
• Never nest interactive elements — no links inside buttons or vice versa
• Include descriptive alt text for all images for accessibility
• Use proper heading hierarchy — do not skip heading levels

Common Mistakes to Avoid

• Nesting interactive elements like buttons inside links — invalid HTML
• Using div for everything instead of semantic elements like nav, main, article
• Skipping heading levels (h1 to h3) — breaks the document outline for screen readers
• Missing alt text on images — accessibility violation and SEO penalty
• Not closing tags properly, relying on browser error-recovery
• Using inline styles instead of CSS classes — unmaintainable code

Best Practices

• Use semantic HTML5 elements for structure and accessibility
• Format HTML with 2-space indentation during development
• Minify HTML at build time using html-minifier-terser or Vite
• Validate with the W3C validator before deploying to production
• Test with keyboard navigation and screen readers for accessibility
• Use ARIA attributes only when semantic HTML does not suffice

Quick Reference

Here is a quick reference for semantic HTML structure and common formatting patterns:

<!-- Semantic HTML5 document structure -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <header>
    <nav><!-- Navigation --></nav>
  </header>
  <main>
    <article>
      <h1>Article Title</h1>
      <section>
        <h2>Section Heading</h2>
        <p>Content paragraph.</p>
      </section>
    </article>
  </main>
  <footer><!-- Footer content --></footer>
</body>
</html>

Real-World Example

A practical example: converting a design mockup into semantic, accessible HTML. This structure works for blog posts, landing pages, and documentation sites:

<article>
  <header>
    <h1>Getting Started with DevKit</h1>
    <time datetime="2026-08-06">August 6, 2026</time>
  </header>
  <section aria-label="Introduction">
    <p>DevKit is a collection of free, browser-based developer tools.</p>
  </section>
  <section aria-label="Features">
    <h2>Features</h2>
    <ul>
      <li>JSON formatting and validation</li>
      <li>Base64 encoding and decoding</li>
      <li>JWT token inspection</li>
    </ul>
  </section>
  <footer>
    <p>Written by the DevKit Team</p>
  </footer>
</article>

Tools and Resources

• DevKit HTML Formatter — beautify HTML with proper indentation
• DevKit HTML Minifier — reduce HTML file size for production
• DevKit Markdown to HTML — convert Markdown to clean, semantic HTML
• W3C Markup Validator — validate HTML structure and compliance
• Lighthouse — audit HTML for accessibility, SEO, and best practices

"The web is the most powerful platform ever built. HTML is its foundation. Respect the foundation."

HTML is the foundation of every web page, and writing it correctly matters more than ever in the AI era. Use semantic elements, maintain proper heading hierarchy, validate before deploying, and never trust AI-generated HTML without review. Good HTML is accessible, maintainable, and performant.