我們在 Emmet 教學系列 - 基本用法中已經學會建立單一元素的方式了，但網頁中通常都是有很多的子元素、孫元素及各種的兄弟元素等等。如果您對 CSS 選擇器熟悉的話，應該多少有用到階層選擇器等功能。同樣的，Emmet 也支援及提供建立含有各種階層關係的縮寫方式。
筆者在此篇會一一解說子階層、兄弟階層、上一層及群組等用法。
子階層 Child: >
Emment 在設定子階層用語法跟 CSS 中的是一樣使用 > 符號，假設我們要在 header 區塊中放置 nav，並在 nav 中在加上 ul li 等動作都可以透過子階層的方式來一次寫完
一樣能把 #id 及 .className 搭配一起使用
兄弟階層 Sibling: +
如果我們要在 nav 前先放一個 h1 的話，那要怎樣來寫呢？(...3秒後)對~就是跟 CSS 兄弟選擇器一樣使用 + 符號
群組 Grouping: ()
如果上面兩個用法都沒問題的話，再來我們想要在跟 nav 同一階層下再多放一個 div 的話，雖然知道 + 符號可用在兄弟元素中，但因為 nav 本身就包了一堆元素，這一堆基本上都是屬於 nav 這一個兄弟的，因此為了表示他們是一組的，我們可以使用數學上常用的 () 括號的方式來處理。把用 () 括號起來的當成一個階層來看待，所以我們的語法就可以這樣寫
那...如果筆者想要幫 header 再多一個兄弟元素的話，一樣可以用 () 括號把子元素都包起來再增加新的兄弟元素
上一層 Climb-up: ^
有沒有越來越覺得神奇的感覺了咧！不過如果我們可以在 header 中的最後一個 div 子元素這邊能往上爬一層的話，就算不用 () 括號來把子元素包起來也能做到同樣的結果
這邊使用 ^ 符號來達到往上爬一層，如果想要爬兩層的話...別懷疑，就是 ^^
筆者想要在 div.inner 下方多插入一個 img 元素，如果是在 span 後只用一個 ^img 是只能爬過 span 來到 p 段落中而已；若是使用 ^^img 才能順利的爬過 span 跟 p。
這幾個語法要記得多練習幾次，當熟練後能在編寫 HTML 時超展開的囉！