A Set of HTML Snippets for Sublime Text 2

A Set of HTML Snippets for Sublime Text 2

Download

This post will take 1 minute to read.

Considering how pop­u­lar my CSS snip­pets for Sublime Text have been, I thought I’d bet­ter col­late and release some of the HTML snip­pets I use reg­u­larly. Put simply, they allow you to turn this:

doctype

Into this:

<!doctype html>
<html>
    <head>
        <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">
        <title>$2</title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        $3
        <script src="js/main.js"></script>
    </body>
</html>

Note: the dol­lar signs indic­ate tab mark­ers.

Further details can be found on the GitHub repos­it­ory. If you have any sug­ges­tions, send a pull request, or let me know in the com­ments below.

Installation instructions

The easi­est way to install these snip­pets is through Package Control; simply search for ‘HTML snip­pets’. If you don’t use Package Control (you really should, it’s awe­some) then you can copy the set into the Sublime Text pack­ages 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 art­icle on Sublime Text, includ­ing why I use it, a few hid­den tricks, some of my favour­ite pack­ages, and oth­er work flow enhance­ments!

Update

If you are also using Emmet then you need to add the fol­low­ing to Emmet’s user set­tings file to avoid con­flicts:

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

Tweet this

Looking for more articles? Find them here

54 Comments

  3. Billy Sea

    Yeeee!
    Definitely look­ing for­ward to more Sublime con­tent!

  4. 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 assum­ing I’m way off the mark & should be doing some­thing com­pletely dif­fer­ent, can you help? Thanks in advance.

  5. Josh

    Rob, rather than choos­ing the ‘Add Repository’ option, look for the ‘Install Package’ option.

  6. Rob Salaman

    @Josh, thank you, I’ve got it installed; how­ever I still can­’t get the syn­tax to work, is there some­thing else I need to do, or should it be work­ing?

  8. Rob Salaman

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

  9. Josh

    Right, that’s very strange. It should work without any set­ting up. Would you mind giv­ing me a little bit more inform­a­tion about what it is that you are doing? I’ll try to recre­ate your steps on my end and see what hap­pens.

  10. Rob Salaman

    Sure, I down­loaded Sublime Text 2 and then Package Control, then I down­loaded your HTML-Snippets manu­ally (.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 appre­ci­ate it :)

  11. Josh

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

  12. Rob Salaman

    Thank you! I knew it would be some­thing simple, works a treat!

  14. Josh Green

    Hi Josh, I was just won­der­ing if you have come across the the pack­age Emmet, pre­vi­ously known as Zen Coding. It more or less does what all your snip­pets are doing but has the added bene­fit of being able to write out short lines which expand into full blocks of code. So ul>li*4>a would expand to.

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

    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

  15. Josh

    Hi, Josh. Thanks for the com­ment! I actu­ally use Emmet myself, but unfor­tu­nately it does­n’t cov­er everything. So that is why I decided to cre­ate my own snip­pets, and as I wanted them to be an inde­pend­ent lib­rary, I also included a few things that Emmet takes care of (for those that use it).

  16. Bram

    Nice snip­pets!
    As Josh Green said, Emmet is a won­der­ful exten­sions.
    I see you use a loremIspum snip­pet. Did you know that Emmet has a very use­ful fea­ture. Try and type:
    lorem5 + TAB
    or Lorem150 + TAB
    (= lor­em ipsum + num­ber of words)

    Greets!

  18. Chris

    For some reas­on all of the snip­pets work except ‘html’ for some reas­on still expands to <html></html>. Which is a total bum­mer because it was the one I was actu­ally after… the sil­ver lin­ing though? Now I have a bunch of oth­er badass snip­pets! Thanks Josh!

    If you could help me pos­sibly hunt down a reas­on that would be awe­some, here is what I cur­rently have installed via pack­age con­trol
    AdvancedNewFile, CSSComb, Emmet, Gist, HTML Snippets (obvi­ously), Less, Nettuts+ Fetch, Package Control, PyV8 (no clue what this one is) and SublimeLinter.

  19. Josh

    Hi, Chris. I’m 99% sure that Emmet is what is caus­ing the prob­lems, and I’m not entirely sure why :(

    UPDATE: I have changed the tab trig­ger from html to doctype and now there aren’t any issue with Emmet (restart Sublime Text to update auto­mat­ic­ally)!

  23. Daniel

    Just start­ing out with Sublime Text 2 and all this set up. It seems I have HTML and HTML5 snip­pets and then added your HTML Snippets. When I type doc­type and hit tab, I just get . I tried dis­abling the oth­er snip­pets, but now typ­ing doc­type and tab just gives me ‘doc­type’.

  25. Dan

    Having the same issue as Daniel. I’ve got a clean install of Sublime and this is the only addi­tion­al pack­age I’ve installed. When I type ‘doc­type’ + tab, all I get is an extra space. Any sug­ges­tions on how to rem­edy this?

  26. Josh

    Okay, Dan and Daniel, I’ve updated the snip­pet so that it is triggered by ‘doc’, so as soon as that is updated, that should sort out your prob­lems.

  27. Daniel

    I have Alignment, ColorPicker, and SFTP. As I said, I dis­abled HTML and HTML5 pack­ages. Just installed tag ’cause I like auto clos­ing tags.

  28. Josh

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

  29. Dan

    Josh — still no luck. I prob­ably should have poin­ted out that none of the snip­pets work for me. The excep­tion is ‘lor­em.’ That expands cor­rectly for some reas­on.

  30. Niek

    Hi guys, just installed this and tried all snip­pets; noth­ing worked in blank doc­u­ment; how­ever when you save it as some­thing, 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!

  31. Josh

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

  33. Wayne

    For some reas­on script is not work­ing… it just res­ults in <script></script> without the source attrib­ute. I am try­ing 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 try­ing to fig­ure it out. Thanks :)

  34. 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 con­flict.

    A tem­por­ary solu­tion would be to paste the fol­low­ing into Emmet’s user set­tings:

    "disable_tab_abbreviations_for_scopes": "text.html"

    This essen­tially dis­ables Emmet for that scope. I am cur­rently try­ing to sort out a more com­pat­ible solu­tion.

  35. Cory

    Thanks for the tip Nick. It does­n’t work for me in a blank doc­u­ment until you save it with the .html exten­sion either.

  36. Josh

    Yeah, that’s stand­ard beha­viour, Cory. Sublime Text does­n’t know the scope of the file until you save it with an exten­sion.

  37. Josh

    Okay, Wayne, Emmet has been updated and now offers a fix. Add the fol­low­ing to your Emmet user set­tings file:

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

  38. Babangida

    Hi Josh. Thanks for this use­ful snip­pet.
    I would like to know if you could provide me with a tip how to get all the css prop­er­ties by simply typ­ing first let­ters in sub­lime. Sublime seems to have very little amount com­pared to Dreamweaver. Also, I’d like to know how the font to be used would be sug­ges­ted to me in the prop­er­ties.
    Thank you

  40. Ermand

    Thanks Josh for these amaz­ing snip­pets. Works per­fectly with emmet after updat­ing prop­erly emmet user set­tings.

  41. Leo

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

  43. Amy

    Sry my bad eng­lish..
    witch font you used in this blog???
    i haven´t this font on my com­puter, but i can see . how ??

  45. Terri

    Hi Josh,
    Thanks for shar­ing! I’m came across your post as I’m try­ing to learn how to cre­ate my own snip­pets and found you’ve already cre­ate ones I wanted.

    I installed Package Control manu­ally which I see sit­ting in my Packages folder, then restar­ted Sublime Text 2. I then added your HTML Snippets via GitHub URL, and I see that folder/files sit­ting in the pack­ages folder as well. And restar­ted it again.

    Am I miss­ing some­thing? I should just type doc­type and hit enter or tab to get the full doc­type snip­pet cor­rect?

    Sorry, I’m a bit new to this. Any help is appre­ci­ated.
    Thanks

  46. Terri

    Disregard my pre­vi­ous com­ment. It seems to be work­ing now. Although, for cer­tain ones it seems I have to press tab twice for it to pop­u­late the snip­pet.

    Not sure why, who knows maybe I need to clean my key­board.

    Thanks again!

  48. mezgani

    Hello,

    I type doctype+tab and noth­ing happened ?please can you tell me what going wrong ? even I see “HTML snip­pets” dir­ect­ory in Packages.

  49. Josh

    Mezgani, it’s very hard for me to troubleshoot without more inform­a­tion. I would sug­gest restart­ing Sublime Text, and per­haps try­ing to rein­stall the pack­age.

  51. sepoer

    Hi Josh thanks for share,i’ve got installed your html snip­pets
    how­ever I still can’t get the syn­tax to work
    I use sub­lime text 2 for win­dow 7 64bit port­able
    what I need to do ? is there some­thing else step ?
    Thank you..

  52. sepoer

    owh damn my stu­pid fault..sorry i for­get to save file
    so if i type ex :“doc­type” not saved the file which is (untitled),the snip­pet does­nt work / loaded
    and i try­ing to save the file first,and tadaaaaa..the snip­pets is great work fine..
    Thank YOU Josh !

  54. Bruno De Bondt

    Had a sim­il­ar prob­lem as a few oth­er people: I was only able to insert the lor­em snip­pet after installing HTML Snippets.

    Confirming that all snip­pets work after sav­ing the file.