A comprehensive collection of high-utility HTML snippets for faster, more semantic, and accessible web development.
✨ Features
The HTML Utility Kit is designed to eliminate repetitive typing and ensure you use modern, semantic, and accessible HTML structures right from the start.
This extension provides two ways to access all snippets:
1. Prefix-Based Snippets (Fast Typing)
Simply type the prefix fuk- (for Front-end Utility Kit) followed by the snippet name, and hit Tab or Enter.
Prefix Example
Description
fuk-html-base
Inserts a full HTML5 boilerplate.
fuk-input-email
Inserts a <label> and <input type="email"> with required.
fuk-layout-header
Inserts a semantic <header> with a basic <nav>.
2. Interactive Command Palette (Browse & Insert)
For when you can't remember the exact prefix, use the Command Palette to browse all available snippets visually.
Press Ctrl+Shift+P (or Cmd+Shift+P on Mac).
Type HTML Utility Kit: Insert Snippet and select the command.
A quick-pick menu will appear, allowing you to select and insert any snippet.
📦 Snippet Categories
The snippets are organized into logical categories to cover the most common development needs:
1. Base Structure & Metadata
Snippet Name
Prefix
Description
HTML Boilerplate
fuk-html-base
Full HTML5 document structure.
Meta Tag Viewport
fuk-meta-viewport
Standard responsive viewport meta tag.
Meta Tag Description
fuk-meta-desc
SEO description meta tag.
Open Graph Tags (Basic)
fuk-meta-og
Basic tags for social media sharing.
Twitter Card Tags (Basic)
fuk-meta-twitter
Basic Twitter Card tags.
2. Forms & Inputs
Snippet Name
Prefix
Description
Basic Form Structure
fuk-form-base
A basic <form> with submit button.
Email Input with Label
fuk-input-email
Email input with label and required.
Password Input with Label
fuk-input-password
Password input with label, required, and minlength.
Textarea with Label
fuk-textarea
A standard <textarea> element.
Checkbox with Label
fuk-input-checkbox
A checkbox input with an associated label.
Radio Button Group
fuk-input-radio
A group of two radio buttons.
Select Dropdown
fuk-select
A standard <select> dropdown menu.
3. Layout & Semantics
Snippet Name
Prefix
Description
Semantic Header
fuk-layout-header
Semantic <header> with a basic <nav>.
Semantic Footer
fuk-layout-footer
Semantic <footer> with a copyright notice.
Main Content Section
fuk-layout-main
The <main> content area with an ID for accessibility.
Article Element
fuk-article
A self-contained <article> element.
Section Element
fuk-section
A generic <section> of a document.
Aside Element
fuk-aside
Content related to the main content (e.g., a sidebar).
4. Lists & Tables
Snippet Name
Prefix
Description
Ordered List
fuk-list-ol
An ordered list with three items.
Unordered List
fuk-list-ul
An unordered list with three items.
Definition List
fuk-list-dl
A definition list for terms and descriptions.
HTML Table
fuk-table
A basic HTML table structure with <thead> and <tbody>.
5. Media & Accessibility
Snippet Name
Prefix
Description
Responsive Image
fuk-img-resp
A responsive <picture> element with WebP support.
Skip to Content Link
fuk-a11y-skip
Accessibility link for keyboard users to bypass navigation.
⚙️ Installation
Open Extensions in VS Code (Ctrl+Shift+X or Cmd+Shift+X).
