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:
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 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!
Update
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"
Awesome dude! Just what I wanted :D
Glad it came in handy, Tim!
Yeeee!
Definitely looking forward to more Sublime content!
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.Rob, rather than choosing the ‘Add Repository’ option, look for the ‘Install Package’ option.
@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?
It should just work. What other packages have you got installed?
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?
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.
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 :)
Ah, I see the problem! Move it from the ‘Installed Packages’ folder to the ‘Packages’ folder.
Thank you! I knew it would be something simple, works a treat!
No worries, Rob. Glad it’s working for you!
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.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
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).
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)
Greets!
I do now! Thanks, Bram.
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.
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
todoctype
and now there aren’t any issue with Emmet (restart Sublime Text to update automatically)!Sorry for the delay but Josh for the WIN!
Thanks :)
Oh, also might want to update this post :0
Ah, good call!
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’.
Daniel, what other packages do you have installed?
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?
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.
I have Alignment, ColorPicker, and SFTP. As I said, I disabled HTML and HTML5 packages. Just installed tag ’cause I like auto closing tags.
Okay, so it sounds like it must be a keyword built into Sublime Text. Hopefully the change to the trigger fixes it.
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.
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!
Thanks for the heads up, Niek. Unfortunately, I have no idea why it isn’t working for a few people :(
HTML Snippets Really Helpfull
http://joshnh.com owasame
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 :)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.
Thanks for the tip Nick. It doesn’t work for me in a blank document until you save it with the .html extension either.
Yeah, that’s standard behaviour, Cory. Sublime Text doesn’t know the scope of the file until you save it with an extension.
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"
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
Hi, Babangida. You would be better off asking those questions on the Sublime Text forums: http://www.sublimetext.com/forum/
Thanks Josh for these amazing snippets. Works perfectly with emmet after updating properly emmet user settings.
Awesome work Josh ! I can go back towork faster than ever, now! <3
Thank You!!
Sry my bad english..
witch font you used in this blog???
i haven´t this font on my computer, but i can see . how ??
Hi, Amy. I’m using Futura and Ratio which are being served through Typekit.
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.
Thanks
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!
Great Post! :)
Hello,
I type doctype+tab and nothing happened ?please can you tell me what going wrong ? even I see “HTML snippets” directory in Packages.
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.
Nice snippets Dude!
Hi Josh thanks for share,i’ve got installed your html snippets
however I still can’t get the syntax to work
I use sublime text 2 for window 7 64bit portable
what I need to do ? is there something else step ?
Thank you..
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 !
No worries! Glad you got it working :)
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.