HTML Snippets Pro

Complete HTML & HTML5 code snippets for faster development

✨ Features

Transform your HTML coding experience with powerful features:

Core Features

• 🏃‍♂️ Lightning Fast Snippets: Type and insert common HTML patterns instantly
• 📱 Responsive Templates: Mobile-first design patterns
• ♿ Accessibility Ready: ARIA landmarks and semantic HTML included
• 🎨 Modern Markup: Latest HTML5 elements and structures

Developer Experience

• 📝 IntelliSense Support: Smart suggestions as you type
• 🔍 Smart Completion: Context-aware code completion
• 🎯 Tab Stops: Quickly navigate through important code points
• 🔄 Dynamic Updates: Regular new snippet additions

📚 Available Snippets

Prefix	Description
!	HTML5 basic structure
html5:full	HTML5 complete structure with header, main, footer
meta:all	Complete set of common meta tags including SEO and social media
nav:responsive	Responsive navigation bar with toggle button
form:contact	Contact form with common fields and styling classes
cards	Card component with image, title, text, and button
hero	Hero section with title, text, and CTA buttons
table:responsive	Responsive table with wrapper
modal	Accessible modal dialog
grid	CSS Grid container with items
flex	Flexbox container with items
input:group	Input group with label and help text
video:responsive	Responsive video container
footer:full	Full footer with multiple sections
script:all	Common script tag variations with best practices
a11y:landmarks	Common accessibility landmarks with ARIA roles
cookie:banner	GDPR compliant cookie consent banner
skeleton	Loading skeleton placeholder
search:advanced	Advanced search bar with suggestions support
accordion	Accessible accordion component
testimonial-card	Testimonial card with quote and author
pricing-table	Pricing table card
timeline	Vertical timeline component
stats-counter	Animated statistics counter
image-gallery	Responsive image gallery with lightbox
file-upload	Drag and drop file upload component
breadcrumbs	Accessible breadcrumb navigation
error-404	404 error page template
doctype	the document type
a	a hyperlink
abbr	an abbreviation
address	an address element
area	an area inside an image map
article	an article
aside	content aside from the page content
audio	sounds content
b	bold text
base	a base URL for all the links in a page
bdi	Used to isolate text that is of unknown directionality
bdo	the direction of text display
big	Used to make text bigger
blockquote	a long quotation
body	the body element
br	Inserts a single line break
button	a push button
canvas	graphics
caption	a table caption
cite	a citation
code	computer code text
col	attributes for table columns
colgroup	group of table columns
command	a command button [not supported]
datalist	a dropdown list
dd	a definition description
del	deleted text
details	details of an element
dialog	a dialog (conversation)
dfn	a definition term
div	a section in a document
dl	a definition list
dt	a definition term
em	emphasized text
embed	external interactive content or plugin
fieldset	a fieldset
figcaption	a caption for a figure
figure	a group of media content, and their caption
footer	a footer for a section or page
form	a form
h1	header 1
h2	header 2
h3	header 3
h4	header 4
h5	header 5
h6	header 6
head	information about the document
header	a header for a section or page
hgroup	information about a section in a document
hr	a horizontal rule
html	an html document
i	italic text
iframe	an inline sub window
img	an image
input	an input field
ins	inserted text
keygen	a generated key in a form
kbd	keyboard text
label	an inline window
legend	a title in a fieldset
li	a list item
link	a resource reference
main	the main content of a document
map	an image map
mark	marked text
menu	a menu list
menuitem	a menu item [Firefox only]
meta	meta information
meter	measurement within a predefined range
nav	navigation links
noscript	a noscript section
object	an embedded object
ol	an ordered list
optgroup	an option group
option	an option in a drop-down list
output	some types of output
p	a paragraph
param	a parameter for an object
pre	preformatted text
progress	progress of a task
q	a short quotation
rp	Used in ruby annotations to define what to show in unsupported browsers
rt	explanation to ruby annotations
ruby	ruby annotations
s	Used to define strikethrough text
samp	sample computer code
script	a script
section	a section
select	a selectable list
small	small text
source	media resource
span	a section in a document
strong	strong text
style	a style definition
sub	sub-scripted text
sup	super-scripted text
summary	a visible heading for the detail element [limited support]
table	a table
tbody	a table body
td	a table cell
textarea	a text area
tfoot	a table footer
thead	a table head
th	a table header
time	a date/time
title	the document title
tr	a table row
track	a track for media files
u	Used to define underlined text
ul	an unordered list
var	a variable
video	a video

View All Snippet List →

⚡ Quick Start

Get started in 3 easy steps:

1. Install the extension
2. Open an HTML file
3. Type ! and press Tab for basic HTML5 boilerplate

📦 Installation

Via VS Code (Smart Way)

1. Launch VSCode
2. Press Ctrl+P / Cmd+P
3. Run: ext install riturajps.html-snippets-pro

Via VS Code (Alternate Way)

1. Open VSCode.
2. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window.
3. Search for HTML Snippets Pro (Ritu Raj).
4. Click Install.

Via Marketplace

⚙️ Configuration

Extension Settings

{
  "html.snippets.triggerOnSpace": true,
  "html.snippets.showExpandedAbbreviation": "always"
}

Customization

You can override snippets in your settings.json:

{
  "html.snippets.customSnippets": {
    "!": "Your custom boilerplate"
  }
}

🤝 Contributing

We love your input! Want to contribute?

1. 🍴 Fork the repo
2. 🌿 Create a branch (git checkout -b feature/amazing)
3. 📝 Make changes
4. ✅ Commit (git commit -m 'Added amazing feature')
5. 📌 Push (git push origin feature/amazing)
6. 🔄 Open a Pull Request

Contributing Guidelines →

📝 License

Released under the MIT License.

👨‍💻 Developer

Name : Ritu Raj Pratap Singh GitHub : @theriturajps VS Code Marketplace : riturajps

---

Show your support

⭐️ Star this repo if you found it helpful!

Report Bug · Request Feature · Contribute