</>

HTML Cheat Sheet

Practical HTML cheat sheet with setup steps, core workflows, debugging, and copy-paste examples.

Languages
html syntax examples reference

HTML cheat sheet with real commands and snippets for setup, core workflows, debugging, and production-safe automation patterns. If you are working across tools, pair this with the CSS Cheat Sheet and JavaScript Cheat Sheet.

Setup and Validation

Goal: Run formatters and linters for content files

# Format project files when formatter is available
npx prettier -w . || true

# Lint Markdown/YAML/JSON if linters exist
npx markdownlint-cli2 '**/*.md' || npx yaml-language-server --help || true

# Search for TODO placeholders before publish
rg "TODO|TBD" .

Core Patterns

Goal: Use a production-safe snippet

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Accessible Example</title>
  </head>
  <body>
    <main>
      <h1>Profile</h1>
      <button aria-label="Save profile">Save</button>
    </main>
  </body>
</html>

Automation and CI

Goal: Add validation step to CI pipeline

# Run strict shell mode in CI
set -euo pipefail

# Validate syntax and formatting in one pass
npx prettier -c .

# Fail build if broken references exist
rg "](/[^)]+)" src/content -n

Debugging and Troubleshooting

Goal: Track parse failures quickly

# Use ripgrep to isolate malformed syntax
rg "{{|}}|<[^>]*$" src -n

# Print files with potential encoding issues
file -I src/content/sheets/*.md

# Re-run formatter with explicit parser
npx prettier --parser markdown src/content/sheets/*.md || true

Common Gotchas

  • Keep HTML content valid and machine-readable for build pipelines.
  • Avoid trailing commas or comments in strict JSON files.
  • Use consistent heading depth to keep TOC generation stable.
  • Prefer explicit encoding (UTF-8) for portability.
  • Run formatter checks before committing content edits.

Related Cheat Sheets

CSS Cheat Sheet

Practical CSS cheat sheet with setup steps, core workflows, debugging, and copy-paste examples.

JavaScript Cheat Sheet

Practical JavaScript cheat sheet with setup steps, core workflows, debugging, and copy-paste examples.

Go Cheat Sheet

Practical Go cheat sheet with setup steps, core workflows, debugging, and copy-paste examples.