In HTML or CSS, hit Cmd–Shift–Period (Mac) or Ctrl–Shift–Period (Windows) to select the next item. To select the previous item, hit Cmd–Shift–Comma (Mac) or Ctrl–Shift–Comma (Windows).
In HTML, items are tag names, attributes, and attribute values. In CSS, items are selectors, properties, and property values.
Learn HTML and more in our coding classes.
In an HTML file, type link and hit Tab to expand to <link rel="stylesheet" href="">. Type the URL of the desired CSS file.
Use this tip to quickly apply concepts you can learn in our CSS class.
To start a new HTML page, first create a new file in Sublime Text and save it with the .html extension. This will set the syntax of your document to HTML. Then type ! (that’s an exclamation point) and hit Tab to expand it. Emmet will create the HTML page structure for you, allowing you to get right to work.
To insert a new line below the current line in your code, hit Cmd–Return (Mac) or Ctrl–Enter(Windows). You can also insert a new line above the current line by using Cmd–Shift–Return(Mac) or Ctrl–Shift–Enter (Windows).
To quickly delete a line in your code, place your cursor anywhere in the line and hit Ctrl–Shift–K (Mac and Windows).
In Sublime Text, you can quickly cut and paste an entire line of code without selecting it. Place your cursor anywhere in the line and use Cmd–X (Mac) or Ctrl–X (Windows) to cut the line. Then use Cmd–V (Mac) or Ctrl–V (Windows) to paste the line somewhere else.
You can also copy a line of code the same way. Just use Cmd–C (Mac) or Ctrl–C (Windows).
Use > (greater-than symbol) to quickly write nested tags. For example, if you type article>h1and hit Tab, Emmet expands article>h1 to
<article>
<h1></h1>
</article>
Note: This keystroke requires Emmet to be installed in Sublime Text. For instructions on how to install Emmet, download our Sublime Text Enhancements Installation Guide.
You can create a tag with a class or ID. For example, if you type p.info and hit Tab, Emmet expands p.info to <p class="info"></p>. If you omit the tag, Emmet will choose an appropriate tag (based on the parent tag). For example, if you type #container and hit Tab, Emmet expands #container to <div id="container"></div>.
Sublime Text with Emmet allows you to code faster by typing an abbreviation and then expanding the abbreviation with the Tab key.
To create multiple copies of a tag, add * (asterisk) and the desired number. For example, to get three list item tags you'd type li*3 and hit Tab. Emmet expands li*3 to
<li></li>
<li></li>
<li></li>
Sublime Text with Emmet allows you to code faster by typing an abbreviation and then expanding the abbreviation with the Tab key.
Use + (plus sign) between tag abbreviations to quickly write sibling tags. For example, if you type h1+p and hit Tab, Emmet expands h1+p to
<h1></h1>
<p></p>
