A Set of HTML Snippets for Sublime Text 2

A Set of HTML Snippets for Sublime Text 2


This post will take 1 minute to read.

Considering how popular my CSS snippets for Sublime Text have been, I thought I’d better collate and release some of the HTML snippets I use regularly. Put simply, they allow you to turn this:


Into this:

<!doctype html>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="$1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/main.js"></script>

Note: the dollar signs indicate tab markers.

Further details can be found on the GitHub repository. If you have any suggestions, send a pull request, or let me know in the comments below.

Installation instructions

The easiest way to install these snippets is through Package Control; simply search for ‘HTML snippets’. If you don’t use Package Control (you really should, it’s awesome) then you can copy the set into the Sublime Text packages folder. On a Mac this can be found in:

Library > Application Support > Sublime Text 2 > Packages

For Windows, it can be found in:

C: > Users > {username} > AppData > Roaming > Sublime Text 2 > Packages.

Stay tuned for a more in-depth article on Sublime Text, including why I use it, a few hidden tricks, some of my favourite packages, and other work flow enhancements!


If you are also using Emmet then you need to add the following to Emmet’s user settings file to avoid conflicts:

"disabled_single_snippets": "fig meta nav ol script style ul"

Tweet this


  1. Billy Sea

    Definitely looking forward to more Sublime content!

  2. Rob Salaman

    Sorry to be a bit of a prat, but I can’t get the files to install. I’ve been in Package Control and clicked ‘add repository’, but it then won’t show up on the ‘Install Package’ option. I’m assuming I’m way off the mark & should be doing something completely different, can you help? Thanks in advance.

  3. Josh

    Rob, rather than choosing the ‘Add Repository’ option, look for the ‘Install Package’ option.

  4. Rob Salaman

    @Josh, thank you, I’ve got it installed; however I still can’t get the syntax to work, is there something else I need to do, or should it be working?

  5. Rob Salaman

    I only downloaded Sublime Text 2 because I saw this post, so only yours, unless there are some pre-installed ones that I need to remove?

  6. Josh

    Right, that’s very strange. It should work without any setting up. Would you mind giving me a little bit more information about what it is that you are doing? I’ll try to recreate your steps on my end and see what happens.

  7. Rob Salaman

    Sure, I downloaded Sublime Text 2 and then Package Control, then I downloaded your HTML-Snippets manually (.zip file) and installed it at:
    Library > Application Support > Sublime Text 2 > Installed Packages & then via Sublime Text I enabled it.
    Thank you for all your help, I really appreciate it :)

  8. Josh

    Ah, I see the problem! Move it from the ‘Installed Packages’ folder to the ‘Packages’ folder.

  9. Rob Salaman

    Thank you! I knew it would be something simple, works a treat!

  10. Josh Green

    Hi Josh, I was just wondering if you have come across the the package Emmet, previously known as Zen Coding. It more or less does what all your snippets are doing but has the added benefit of being able to write out short lines which expand into full blocks of code. So ul>li*4>a would expand to.

        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>

    You can get emmet here https://github.com/sergeche/emmet-sublime and its docs are here. http://docs.emmet.io/ Hope this is of some use to you

  11. Josh

    Hi, Josh. Thanks for the comment! I actually use Emmet myself, but unfortunately it doesn’t cover everything. So that is why I decided to create my own snippets, and as I wanted them to be an independent library, I also included a few things that Emmet takes care of (for those that use it).

  12. Bram

    Nice snippets!
    As Josh Green said, Emmet is a wonderful extensions.
    I see you use a loremIspum snippet. Did you know that Emmet has a very useful feature. Try and type:
    lorem5 + TAB
    or Lorem150 + TAB
    (= lorem ipsum + number of words)


  13. Chris

    For some reason all of the snippets work except ‘html’ for some reason still expands to <html></html>. Which is a total bummer because it was the one I was actually after… the silver lining though? Now I have a bunch of other badass snippets! Thanks Josh!

    If you could help me possibly hunt down a reason that would be awesome, here is what I currently have installed via package control
    AdvancedNewFile, CSSComb, Emmet, Gist, HTML Snippets (obviously), Less, Nettuts+ Fetch, Package Control, PyV8 (no clue what this one is) and SublimeLinter.

  14. Josh

    Hi, Chris. I’m 99% sure that Emmet is what is causing the problems, and I’m not entirely sure why :(

    UPDATE: I have changed the tab trigger from html to doctype and now there aren’t any issue with Emmet (restart Sublime Text to update automatically)!

  15. Daniel

    Just starting out with Sublime Text 2 and all this set up. It seems I have HTML and HTML5 snippets and then added your HTML Snippets. When I type doctype and hit tab, I just get . I tried disabling the other snippets, but now typing doctype and tab just gives me ‘doctype’.

  16. Dan

    Having the same issue as Daniel. I’ve got a clean install of Sublime and this is the only additional package I’ve installed. When I type ‘doctype’ + tab, all I get is an extra space. Any suggestions on how to remedy this?

  17. Josh

    Okay, Dan and Daniel, I’ve updated the snippet so that it is triggered by ‘doc’, so as soon as that is updated, that should sort out your problems.

  18. Daniel

    I have Alignment, ColorPicker, and SFTP. As I said, I disabled HTML and HTML5 packages. Just installed tag ’cause I like auto closing tags.

  19. Josh

    Okay, so it sounds like it must be a keyword built into Sublime Text. Hopefully the change to the trigger fixes it.

  20. Dan

    Josh — still no luck. I probably should have pointed out that none of the snippets work for me. The exception is ‘lorem.’ That expands correctly for some reason.

  21. Niek

    Hi guys, just installed this and tried all snippets; nothing worked in blank document; however when you save it as something, html, or md, it does. Just thought i’d post, am sure i’m not the only one who tries this in a blank doc.
    Thanks Josh!

  22. Josh

    Thanks for the heads up, Niek. Unfortunately, I have no idea why it isn’t working for a few people :(

  23. Wayne

    For some reason script is not working… it just results in <script></script> without the source attribute. I am trying it in an HTML file. The weird thing is that if I cmd+p and search for “script” it gives me the option there and it works just fine… Totally weird. Pulling out hair trying to figure it out. Thanks :)

  24. Josh

    Thanks for the heads up, Wayne. As far as I can tell, it’s only an issue when someone also has Emmet installed due to a conflict.

    A temporary solution would be to paste the following into Emmet’s user settings:

    "disable_tab_abbreviations_for_scopes": "text.html"

    This essentially disables Emmet for that scope. I am currently trying to sort out a more compatible solution.

  25. Cory

    Thanks for the tip Nick. It doesn’t work for me in a blank document until you save it with the .html extension either.

  26. Josh

    Yeah, that’s standard behaviour, Cory. Sublime Text doesn’t know the scope of the file until you save it with an extension.

  27. Josh

    Okay, Wayne, Emmet has been updated and now offers a fix. Add the following to your Emmet user settings file:

    "disabled_single_snippets": "fig meta nav ol script style ul"

  28. Babangida

    Hi Josh. Thanks for this useful snippet.
    I would like to know if you could provide me with a tip how to get all the css properties by simply typing first letters in sublime. Sublime seems to have very little amount compared to Dreamweaver. Also, I’d like to know how the font to be used would be suggested to me in the properties.
    Thank you

  29. Ermand

    Thanks Josh for these amazing snippets. Works perfectly with emmet after updating properly emmet user settings.

  30. Leo

    Awesome work Josh ! I can go back towork faster than ever, now! <3

  31. Amy

    Sry my bad english..
    witch font you used in this blog???
    i haven´t this font on my computer, but i can see . how ??

  32. Terri

    Hi Josh,
    Thanks for sharing! I’m came across your post as I’m trying to learn how to create my own snippets and found you’ve already create ones I wanted.

    I installed Package Control manually which I see sitting in my Packages folder, then restarted Sublime Text 2. I then added your HTML Snippets via GitHub URL, and I see that folder/files sitting in the packages folder as well. And restarted it again.

    Am I missing something? I should just type doctype and hit enter or tab to get the full doctype snippet correct?

    Sorry, I’m a bit new to this. Any help is appreciated.

  33. Terri

    Disregard my previous comment. It seems to be working now. Although, for certain ones it seems I have to press tab twice for it to populate the snippet.

    Not sure why, who knows maybe I need to clean my keyboard.

    Thanks again!

  34. mezgani


    I type doctype+tab and nothing happened ?please can you tell me what going wrong ? even I see “HTML snippets” directory in Packages.

  35. Josh

    Mezgani, it’s very hard for me to troubleshoot without more information. I would suggest restarting Sublime Text, and perhaps trying to reinstall the package.

  36. sepoer

    Hi Josh thanks for share,i’ve got installed your html snippets
    how­ever I still can’t get the syn­tax to work
    I use sublime text 2 for window 7 64bit portable
    what I need to do ? is there some­thing else step ?
    Thank you..

  37. sepoer

    owh damn my stupid fault..sorry i forget to save file
    so if i type ex :”doctype” not saved the file which is (untitled),the snippet doesnt work / loaded
    and i trying to save the file first,and tadaaaaa..the snippets is great work fine..
    Thank YOU Josh !

  38. Bruno De Bondt

    Had a similar problem as a few other people: I was only able to insert the lorem snippet after installing HTML Snippets.

    Confirming that all snippets work after saving the file.