Semmet — ARIA & Semantic HTML Patterns
Emmet expands structure. Semmet expands meaning.
Type the name of a UI pattern — accordion, tabs, modal, tooltip... — in a plain .html file, press Tab/Enter or click the suggestion, and get markup that follows the W3C ARIA Authoring Practices Guide (APG): correct roles, aria-* wiring, and unique ids — nothing else.
Semmet is framework-agnostic. No Bootstrap, no Tailwind, no DaisyUI required — just semantic HTML you can style however you want, exactly like Emmet only ever gives you structure and leaves the CSS to you.
Why
Every existing "component snippet" extension for VS Code (Bootstrap 5 Lazy Snippets, DaisyUI Snippet, Flowbite Snippets...) is tied to a specific CSS framework. If you write plain HTML, or use your own design system, there was no equivalent — and no extension used the W3C ARIA APG as its source of truth. Semmet fills that gap.
Usage
- Open any
.html file.
- Start typing a pattern name, e.g.
accordion.
- Pick the Semmet suggestion from the list (it always sorts to the top) and press
Tab, Enter, or click it.
- The first tabstop is a shared id — type it once and it mirrors into every
id, aria-controls, and aria-labelledby the pattern needs, so multiple instances on the same page never collide.
Don't remember the trigger words? Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P) and run Semmet: Show Available Components to browse all patterns and insert one at the cursor.
Patterns (28)
Overlays & disclosure
| Trigger words |
Pattern |
Reference |
accordion, acc |
Accordion |
APG |
disclosure, collapse |
Disclosure |
APG |
modal, dialog |
Dialog (Modal) |
APG |
alertdialog, confirm |
Alert Dialog |
APG |
tooltip |
Tooltip |
APG |
dropdown, menubutton |
Menu Button |
APG |
Navigation & structure
| Trigger words |
Pattern |
Reference |
tabs, tab |
Tabs |
APG |
breadcrumb |
Breadcrumb |
APG |
navmenu, submenu |
Navigation Menu (Disclosure) |
APG |
pagination |
Pagination |
WAI-ARIA |
skiplink, skipnav |
Skip Link |
WCAG G1 |
landmarks, pageskeleton |
Landmarks (Page Skeleton) |
APG |
tree, treeview |
Tree View |
APG |
toolbar |
Toolbar |
APG |
card |
Card |
WAI Tutorial |
table, datatable |
Table |
APG |
Forms & inputs
| Trigger words |
Pattern |
Reference |
checkbox |
Checkbox |
APG |
radiogroup, radio |
Radio Group |
APG |
switch, toggle |
Switch |
APG |
combobox, autocomplete |
Combobox |
APG |
listbox |
Listbox |
APG |
slider, range |
Slider |
APG |
spinbutton, stepper |
Spinbutton |
APG |
meter, gauge |
Meter |
WAI-ARIA |
progress, progressbar |
Progress Bar |
WAI-ARIA |
Feedback & media
| Trigger words |
Pattern |
Reference |
alert |
Alert |
APG |
toast, notification, snackbar |
Toast / Notification |
WAI-ARIA |
carousel, gallery |
Carousel |
APG |
What Semmet does not do
Semmet inserts markup only — roles, aria-* attributes, and structure — the same way Emmet inserts elements without styling them. It does not inject CSS or JavaScript. For patterns like Tabs or Combobox, the W3C APG requires keyboard interaction (arrow-key navigation, aria-expanded toggling, roving tabindex) for full conformance — you still need to wire that up yourself, or use it as the starting point for your own component.
Settings
semmet.showDocsLink (default true) — insert an HTML comment with the APG reference link above each generated block.semmet.enabledPatterns (default: all 28) — restrict which patterns show up as suggestions.
Contributing
New patterns are welcome — the vocabulary is meant to grow with the community. Open an issue or PR with the W3C APG reference for the pattern you'd like added.
License
MIT
