Implicit tag names
Even with such a powerful abbreviation engine, which can expand large HTML structures from short abbreviation, writing tag names may be very tedious.
In many cases you can skip typing tag names and Emmet will substitute it for you. For example, instead of div.content
you can simply write .content
and expand it into <div class="content"></div>
.
How it works
When you expand abbreviation, Emmet tries to grab parent context, e.g. the HTML element, inside which you’re expanding the abbreviation. If the context was grabbed successfully, Emmet uses its name to resolve implicit names:
As you can see from the example above, Emmet looks at the parent tag name every time you’re expanding the abbreviation with an implicit name. Here’s how it resolves the names for some parent elements:
li
forul
andol
tr
fortable
,tbody
,thead
andtfoot
td
fortr
option
forselect
andoptgroup
Take a look at some abbreviations equivalents with implicit and explicit tag names:
.wrap>.content |
div.wrap>div.content |
em>.info |
em>span.info |
ul>.item*3 |
ul>li.item*3 |
table>#row$*4>[colspan=2] |
table>tr#row$*4>td[colspan=2] |