Emmet (Zen Coding) — HTML/CSS को तेज़ी से लिखने का तरीका

Emmet, Zen Coding का नया नाम है। यह एक ऐसा टूल है जो आपको शॉर्टकट्स की मदद से जल्दी से HTML सूचियाँ (lists), क्लास और ID वाले ब्लॉक जनरेट करने देता है। इसके अलावा आप CSS गुण (properties) भी जल्दी से शॉर्टकट्स का उपयोग करके लिख सकते हैं। शुरुआत में यह लग सकता है कि इन शॉर्टकट्स को याद रखना बेकार है, लेकिन एक बार आदत हो जाने पर बिना Emmet के कोड लिखना असहज लगता है।

Emmet (Zen Coding) की क्षमताएँ

अक्सर हमें बहुत सारा HTML कोड लिखना पड़ता है, और जितना ज़्यादा कोड लिखना होता है, उतनी ही ज़्यादा गलतियों (जैसे कि टैग बंद करना भूल जाना) की संभावना बढ़ जाती है। इन परिस्थितियों में Emmet (Zen Coding) आपकी मदद करता है। अधिकांश IDE में Emmet के लिए समर्थन या प्लगइन पहले से मौजूद होता है — बस आपको HTML कोड जनरेट करने के लिए एक शॉर्टकट कुंजी सेट करनी होती है।

उदाहरण के लिए, आप लिख सकते हैं:

div#content>h1+p

फिर Emmet चलाने की कुंजी दबाएँ, और यह रूपांतरित हो जाएगा:

<div id="content"> <h1></h1> <p></p> </div>

जैसा कि आप देख सकते हैं — हम साधारण CSS चयनकर्ताओं (selectors) की तरह लिखते हैं, और परिणाम में उसी संरचना वाला HTML प्राप्त होता है।

Emmet की सबसे दिलचस्प सुविधा HTML मेन्यू जेनरेट करना है। उदाहरण के लिए यह कोड:

div#header>img.logo+ul#nav>li*4>a

रूपांतरित होकर यह बनेगा: