2 min read
Emmet Part 2 - Advanced
If you haven't read Emmet Basics Part 1, check that out first.
In this post, we cover the following topics:
📌 Boilerplates
📌 Climb Up
📌 Grouping
📌 Attributes
📌 Item Numbering
📌 Implicit Tags
📌 CSS Sneak Peek
Part 3 coming soon!
Boilerplate
You can create a basic HTML boilerplate easily!
!
Climb Up
With Emmet we can easily traverse multiple levels. Here we can climb up a level using ^
div+div>p>span+em^bq
Grouping
We can achieve something similar by using grouping. To group, surround parts of the code with parenthesis.
div>(hdr>ul>li\*2>a)+ftr>p
Attributes
We can also easily add attributes to any tag using square brackets.
p[title="Hello World"]
Item Numbering
When multiplying items, an index is tracked. We can use the index by inserting the $ sign.
h$[title=item$]{Header $}*3
Implicit Tags
tags do not always need to be used. In some cases they are implied. Here we create a table with a row and a column without specifying the tr
or td
.
table>.row>.col
CSS Sneak Peek
Emmet can be used for CSS too! Part 3 will be all about fast CSS workflows.
pos
pos:s
pos:a
pos:r
pos:f
Part 3 coming very soon!
Check out the full video on my YouTube channel.
Help me out by liking this video and subscribing if you haven't already.