HTML Snippets
A set of custom HTML snippets for Sublime Text
Details
Installs
- Total 226K
- Win 154K
- Mac 40K
- Linux 31K
| Jul 27 | Jul 26 | Jul 25 | Jul 24 | Jul 23 | Jul 22 | Jul 21 | Jul 20 | Jul 19 | Jul 18 | Jul 17 | Jul 16 | Jul 15 | Jul 14 | Jul 13 | Jul 12 | Jul 11 | Jul 10 | Jul 9 | Jul 8 | Jul 7 | Jul 6 | Jul 5 | Jul 4 | Jul 3 | Jul 2 | Jul 1 | Jun 30 | Jun 29 | Jun 28 | Jun 27 | Jun 26 | Jun 25 | Jun 24 | Jun 23 | Jun 22 | Jun 21 | Jun 20 | Jun 19 | Jun 18 | Jun 17 | Jun 16 | Jun 15 | Jun 14 | Jun 13 | Jun 12 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Windows | 0 | 4 | 3 | 6 | 4 | 10 | 2 | 1 | 6 | 4 | 7 | 3 | 9 | 2 | 1 | 6 | 6 | 6 | 5 | 4 | 3 | 3 | 5 | 2 | 5 | 3 | 3 | 7 | 5 | 8 | 2 | 4 | 3 | 4 | 2 | 7 | 3 | 4 | 3 | 7 | 2 | 1 | 4 | 4 | 9 | 2 |
| Mac | 0 | 2 | 1 | 0 | 2 | 0 | 0 | 1 | 0 | 3 | 2 | 0 | 1 | 1 | 0 | 0 | 1 | 0 | 2 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 1 | 1 | 0 | 1 | 0 | 1 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 1 | 1 | 0 | 0 | 1 |
| Linux | 0 | 2 | 0 | 1 | 0 | 3 | 3 | 0 | 0 | 0 | 2 | 1 | 1 | 0 | 1 | 1 | 1 | 2 | 1 | 0 | 2 | 1 | 0 | 2 | 1 | 2 | 1 | 4 | 2 | 2 | 1 | 1 | 1 | 0 | 2 | 1 | 1 | 2 | 2 | 1 | 3 | 2 | 0 | 1 | 2 | 1 |
Readme
- Source
- raw.githubusercontent.com
Sublime Text HTML Snippets
A work in progress.
Type the snippet shortcode and then press Tab to complete the snippet.
The snippets are listed below in alphabetical order. The '$1' indicates the position of the caret/s. Some snippets have been set up so that pressing Tab jumps the caret/s to the next predefined spot. It's a little hard to explain, but any snippet that has a $1/$2/$3/etc. uses this technique.
Feel free to play with, alter, expand, or ruin these snippets as you please. I only ask that if you come up with an incredibly handy snippet, or simply one that I have missed, that you let me know (via email, Twitter or GitHub) so that I can improve these for everybody. Thanks!
IMPORTANT: If you are also using Emmet, add the following to Emmet's user settings file:
"disabled_single_snippets": "fig meta nav ol script style ul"
a
<a href="$1">$2</a>
comm
cond
doctype
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="$1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${2:Untitled}</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body>
$3
<script src="js/main.js"></script>
</body>
</html>
dummy
One morning, when Gregor Samsa woke from troubled dreams, he found himself
transformed in his bed into a horrible vermin. He lay on his armour-like back,
and if he lifted his head a little he could see his brown belly, slightly domed
and divided by arches into stiff sections. The bedding was hardly able to cover
it and seemed ready to slide off any moment. His many legs, pitifully thin
compared with the size of the rest of him, waved about helplessly as he looked.
"What's happened to me? " he thought.
fig
<figure>
<img src="$1" alt="$2">
<figcaption>$3</figcaption>
</figure>
ga
<script>
var _gaq = [['_setAccount', '${1:UA-XXXXX-X}'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = '//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
}(document, 'script'));
</script>
ga2
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '${1:UA-XXXX-X}');
ga('send', 'pageview');
</script>
img
<img src="$1" alt="$2">
jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
meta
<meta charset=utf-8>
<meta name=description content="$1">
<meta name=viewport content="width=device-width, initial-scale=1">
nav
For when using inline-block.
<nav class="$1">
<ul>
<li><a href="#">$2</a></li><li><a href="#">$3</a></li><li><a href="#">$4</a></li><li><a href="#">$5</a></li>
</ul>
</nav>
nav2
<nav class="$1">
<ul>
<li><a href="#">$2</a></li>
<li><a href="#">$3</a></li>
<li><a href="#">$4</a></li>
<li><a href="#">$5</a></li>
</ul>
</nav>
ol
<ol>
<li>$1</li>
<li>$2</li>
<li>$3</li>
<li>$4</li>
</ol>
script
<script src="$1"></script>
shiv
style
<link rel=stylesheet href="$1">
ul
<ul>
<li>$1</li>
<li>$2</li>
<li>$3</li>
<li>$4</li>
</ul>
inp:text
<input type="text">
inp:tel
<input type="tel">
inp:radio
<input type="radio">
inp:check
<input type="checkbox">
inp:email
<input type="email">
inp:pass
<input type="password">
inp:submit
<input type="submit">
<style type="text/css">$1</style>