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:

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

📦 Installation

Via VS Code (Smart Way)

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

Via VS Code (Alternate Way)

Open VSCode.
Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window.
Search for HTML Snippets Pro (Ritu Raj).
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?

🍴 Fork the repo
🌿 Create a branch (git checkout -b feature/amazing)
📝 Make changes
✅ Commit (git commit -m 'Added amazing feature')
📌 Push (git push origin feature/amazing)
🔄 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

HTML Snippets Pro

Ritu Raj Pratap Singh

HTML Snippets Pro

Complete HTML & HTML5 code snippets for faster development

✨ Features

Core Features

Developer Experience

📚 Available Snippets

⚡ Quick Start

📦 Installation

Via VS Code (Smart Way)

Via VS Code (Alternate Way)

Via Marketplace

⚙️ Configuration

Extension Settings

Customization

🤝 Contributing

📝 License

👨‍💻 Developer

Show your support