ในปัจจุบันการเขียน Code HTML จำเป็นต้องรู้จักตัวช่วยอย่าง Emmet เพราะ Emmet จะช่วยทำให้เราสามารถเขียน HTML ได้อย่างรวดเร็วมากขึ้น โดยใช้ Systax ของ CSS ที่เรารู้จักกันเป็นอย่างดีอยู่แล้ว ดังนั้นการเรียนรู้การใช้งาน จึงไม่ใช่เรื่องยาก
ก่อนอื่นมาทำความรู้จักกับ Emmet กันก่อน Emmet จะเป็น Plug-in สำหรับ Text Editor สามารถใช้ได้กับ Text Editor เกือบทุกยี่ห้อบนโลกนี้ ไม่ว่าจะเป็น Dreamwaver, Sublime, Atom, Eclipse หรือแม้กระทั้ง Notepad++ เราสามารถเข้าไป Download plug-in มาติดตั้งได้ที่ emmet.io/downlaod แต่ถ้าเราใช้ Editor ที่สามารถติดตั้ง Package ได้อย่างเช่น Sublime หรือ Atom เราสวามารถเข้าไปติดตั้ง Package ได้จาก Package Manager สำหรับแต่ละตัวได้เลย ซึ่งถ้าเป็นบาง Editor เช่น Atom หรือ Visual Studio Code จะทำการติดตั้ง Emmet มาให้เลย ไม่ต้องไป Download ให้เสียเวลา(สงสัยจะเป็น package ที่ขาดไม่ได้จริงๆ)
หลังจากได้ Emmet มาแล้วคราวนี้เราก็มาดูการใช้งานกัน เราสามารถใช้ Systax ในการเขียน CSS มาใช้ได้ดังนี้
ถ้าเราอยากได้
1 |
<div id="container"></div> |
เราสามารถพิมพิ์
div#container (แล้วกด Tab)
สังเกตว่าเราใช้ # แทน id เหมือนใน CSS
และเช่นเดียวกันถ้าเราอยากได้
1 |
<div class="highlight"></div> |
เราจะพิมพิ์
div.highlight (แล้วกด Tab)
ในทำนองเดียวกันเราสามารถใช้ “[]” ในการระบุ attribute ได้ นอกจากนี้ยังมี Syntax พิเศษสำหรับเพิ่มข้อความเข้าไปใน Element ด้วย เครื่องหมาย “{}”
เช่นถ้าเราต้องการผลลัพธ์เป็น
1 |
<a href="some-url">click here</a> |
;
เราจะพิมพิ์
a[href=some-url]{click here} (แล้วกด Tab)
ส่วนถ้าเราต้องการ element ซ้อน element เราจะใช้ เครื่องหมาย “>”
เช่น ถ้าเราอยากได้ผลลัพธ์
1 2 3 4 5 |
<header> <h1></h1> <header> |
เราจะพิมพิ์
header>h1 (แล้วกด Tab)
เราสามารถซ้อนลงไปกี่ขั้นก็ได้
ส่วนถ้าเราต้องการ
1 2 3 4 5 6 7 |
<div> <label for=""></label> <input type="text" /> </div> |
เราจะพิมพิ์
div>label+input (แล้วกด Tab)
และจุดเด่นที่สุดของ Emmet คือเราสามารถระบุจำนวนได้ด้วย เครื่องหมาย “*”
เช่นถ้าเราอยากได้
1 2 3 4 5 6 |
<ul id="list"> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li> </ul> |
เราจะพิมพิ์
ul#list>(li.list-item*4) (แล้วกด Tab)
เราใช้ “*” เพื่อบอกว่าต้องการ li ที่มี class เป็น list-item ทั้งหมด 4 items
ลองฝึกใช้งานกันดูนะครับ รับรองว่าจะทำให้การเขียน HTML นั้นง่ายขึ้นจริงๆ และเราจะไม่จำเป็นต้องพึ่ง Design View อีกต่อไป