HTML Semantic Recipes is a free, open-source VS Code extension that gives developers instant access to properly structured, accessible HTML5 snippet patterns for the most common UI components. Rather than generating visually-styled boilerplate, it focuses on getting the semantic foundation right — the layer that screen readers, search engines, and future maintainers all depend on. It's live on the VS Code Marketplace with 370+ installs.

The Problem with Generic HTML Snippets

Most HTML snippets prioritize speed over correctness. They hand you a <div> when you need a <nav>, a <span> when you need a <button>, and skip ARIA attributes entirely. The result is codebases that look fine visually but fail accessibility audits and give search engines nothing useful to work with.

HTML Semantic Recipes was built as the antidote: snippets that encode the right semantic structure from the start, so developers don't have to remember whether a breadcrumb needs a <nav> or whether a checkbox list belongs in a <fieldset> with a <legend>.

Framework-Aware Snippets

The extension covers 11 of the most commonly built UI patterns — breadcrumbs, cards, card lists, checkbox lists, definition lists, basic forms, forms with validation, forms with validation summaries, login forms, navigation menus, and accordions.

What makes it practical across different projects is automatic framework detection. The same card prefix produces different output depending on the file you're editing:

• HTML — standard semantic HTML5 markup
• React (.jsx/.tsx) — className instead of class, htmlFor instead of for, self-closing inputs
• Vue — Vue-specific attribute binding, directives, and router integration
• Angular — Angular template binding syntax and form validation states
• Svelte (.svelte) — bind:value, bind:group, {#each} and {#if} blocks
• Astro (.astro) — Astro component syntax with {items.map(...)} templating

This means the extension works the same way whether you're dropping into a legacy HTML project or a modern Astro site — you type the prefix, hit Tab, and get the right output for your context.

Accessibility & Semantics by Default

Every snippet in the extension is built around proper semantic structure and includes ARIA attributes where they're necessary. The focus is always on what the markup means, not what it looks like. Styling is left entirely to the developer's own CSS or utility classes.

The practical payoff: better screen reader support out of the box, a cleaner document structure for SEO, and code that communicates its intent to the next developer who reads it.

Open Source

The extension is MIT licensed and open for contributions on GitHub. The simplicity of the contribution model — add a snippet, improve a pattern, extend framework support — makes it a straightforward project to participate in.

Results

• 370+ installs on the VS Code Marketplace
• 6 frameworks supported — HTML, React, Vue, Angular, Svelte, Astro
• 11 semantic UI patterns available as instant snippets
• MIT licensed and open source on GitHub