Skip to main content
Noble Desktop/1 min read

Quickly Write Tags with Their Class or ID in Sublime Text

Emmet Class & ID Syntax

.classname

Defaults to a div with class. .hero expands to <div class="hero"></div>.

#idname

#main expands to <div id="main"></div>.

tag.class

p.intro expands to <p class="intro"></p>. Specify the tag explicitly.

Combined

section#hero.dark expands to <section id="hero" class="dark"></section>.

Master Web Development at Noble Desktop

Noble Desktop's Full-Stack Web Development Certificate covers HTML, CSS, JavaScript, and the modern web stack.

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>.

Ct quick tag css

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.

Learn more Sublime Text Coding Tips. These coding tips are covered in our hands-on coding classes and bootcamps in NYC.