ในปัจจุบันการเขียน 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 มาใช้ได้ดังนี้

ถ้าเราอยากได้

เราสามารถพิมพิ์

div#container (แล้วกด Tab)

สังเกตว่าเราใช้ # แทน id เหมือนใน CSS

และเช่นเดียวกันถ้าเราอยากได้

เราจะพิมพิ์

div.highlight (แล้วกด Tab)

ในทำนองเดียวกันเราสามารถใช้ “[]” ในการระบุ attribute ได้ นอกจากนี้ยังมี Syntax พิเศษสำหรับเพิ่มข้อความเข้าไปใน Element ด้วย เครื่องหมาย “{}”

เช่นถ้าเราต้องการผลลัพธ์เป็น

;

เราจะพิมพิ์

a[href=some-url]{click here} (แล้วกด Tab)

ส่วนถ้าเราต้องการ element ซ้อน element เราจะใช้ เครื่องหมาย “>”

เช่น ถ้าเราอยากได้ผลลัพธ์

เราจะพิมพิ์

header>h1 (แล้วกด Tab)

เราสามารถซ้อนลงไปกี่ขั้นก็ได้

ส่วนถ้าเราต้องการ

เราจะพิมพิ์

div>label+input (แล้วกด Tab)

และจุดเด่นที่สุดของ Emmet คือเราสามารถระบุจำนวนได้ด้วย เครื่องหมาย “*”

เช่นถ้าเราอยากได้

เราจะพิมพิ์

ul#list>(li.list-item*4) (แล้วกด Tab)

เราใช้ “*” เพื่อบอกว่าต้องการ li ที่มี class เป็น list-item ทั้งหมด 4 items

ลองฝึกใช้งานกันดูนะครับ รับรองว่าจะทำให้การเขียน HTML นั้นง่ายขึ้นจริงๆ และเราจะไม่จำเป็นต้องพึ่ง Design View อีกต่อไป