Mengenal Emmet adalah shortcut HTML dan CSS yang memudahkan Anda menulis tag tanpa harus mengetik berulang kali. Dalam perkembangan teknologi web, kemampuan menulis kode menjadi keterampilan penting. Emmet hadir sebagai alat bantu yang mempercepat pembuatan struktur berulang seperti daftar, tabel, hingga elemen berurutan dengan pengetikan yang minimal.
Emmet dapat dipahami sebagai singkatan atau kependekan dari beberapa baris kode HTML maupun atribut CSS. Banyak editor teks populer seperti Visual Studio Code sudah menyertakan Emmet secara bawaan. Namun, Anda juga dapat mengunduhnya secara terpisah untuk digunakan pada editor favorit Anda. Selain itu, memahami Emmet tidak hanya berlaku di aplikasi desktop. Banyak IDE daring seperti CodePen juga telah menyediakan dukungan shortcut ini. Jika Anda ingin memahami lebih lanjut cara kerjanya, simak penjelasan berikut.
Daftar Isi
Mengenal Emmet Shortcut HTML & CSS
Demi meningkatkan fungsionalitas saat menulis HTML atau CSS, Anda dapat memanfaatkan Emmet. Alat ini membantu memperluas fitur bawaan di Visual Studio Code dan juga bisa ditambahkan sebagai plugin ke berbagai editor teks lainnya.
Emmet adalah plugin editor teks yang memungkinkan Anda menulis kode HTML dan CSS dengan sangat cepat melalui singkatan-singkatan yang intuitif. Banyak editor kode modern seperti Visual Studio Code, Sublime Text, dan Atom telah mengintegrasikan Emmet secara bawaan, sehingga Anda tidak perlu lagi menginstalnya secara terpisah.
Misalnya, ketika Anda perlu menyalin dan menempel sepuluh baris kode lalu memeriksa apakah jumlahnya benar, melakukannya secara manual dapat memicu risiko kesalahan manusia. Dengan mempelajari pintasan Emmet, Anda dapat menghasilkan HTML dan CSS secara cepat dan akurat, sekaligus menghemat waktu.
Perbedaan Emmet dan HTML
Mengenal Emmet Shortcut HTML & CSS membuat penulisan kode menjadi lebih mudah dan efisien. Dengan Emmet, Anda dapat menggunakan sintaks singkat untuk menambahkan beberapa elemen HTML sekaligus. Cukup ketikkan nama elemen, tambahkan tanda bintang (*) diikuti jumlah elemen yang ingin dibuat, lalu tekan tombol Tab untuk memperluas singkatan tersebut menjadi struktur HTML yang lengkap. Tidak diperlukan tanda kurung untuk proses ini.
Operator plus (+) digunakan untuk menambahkan beberapa elemen pada level yang sama dalam struktur HTML. Sementara itu, tanda lebih besar (>) digunakan untuk membuat elemen bersarang atau menunjukkan hubungan induk–anak antar elemen. Anda juga dapat menggabungkan berbagai operator ini untuk membentuk struktur yang lebih kompleks.
Contohnya, Anda bisa menggabungkan tanda lebih besar (>) untuk menambahkan elemen anak, lalu menggunakan tanda bintang (*) untuk membuat kelipatan dari elemen tersebut. Perlu diingat, saat menggunakan tanda lebih besar (>), elemen yang ditulis setelahnya akan menjadi anak dari elemen sebelumnya.
Jika Anda ingin kembali ke tingkat struktur yang lebih tinggi, gunakan operator caret (^). Operator ini sangat berguna untuk menyesuaikan susunan HTML sehingga elemen tetap tertata rapi sesuai kebutuhan.
Baca juga: Kenali Div Mulai dari Fungsi, Contoh dan Keunggulannya di HTML
Perbedaan Emmet dan CSS
Selain untuk HTML, Emmet juga dapat digunakan saat menulis CSS. Dengan demikian, Mengenal Emmet Shortcut HTML & CSS akan memberi Anda pemahaman yang lebih lengkap. Saat Anda mulai mengetikkan nama properti CSS, Emmet akan secara otomatis memperluasnya menjadi properti lengkap ketika tombol Tab ditekan. Proses ini juga menambahkan titik dua (:) atau titik koma (;) secara otomatis.
Jika terdapat lebih dari satu properti yang sesuai, menu tarik-turun akan muncul untuk memberikan pilihan alternatif yang bisa Anda pilih. Apabila tidak ada satuan yang Anda tambahkan, nilai default yang digunakan adalah px untuk bilangan bulat dan em untuk bilangan desimal. Anda juga bisa menentukan satuan khusus dengan menambahkannya langsung pada singkatan yang diketik.
Untuk properti yang terdiri dari beberapa kata, disarankan menggunakan huruf pertama dari setiap kata, diikuti dengan nilainya. Dengan sintaks singkat ini, Anda dapat menghemat waktu dan menyederhanakan proses penulisan, baik untuk HTML maupun CSS.
Berbeda dengan fitur perlengkapan otomatis biasa di editor, Emmet mungkin membutuhkan sedikit waktu untuk membiasakan diri. Namun, dalam jangka panjang, penggunaannya dapat meningkatkan produktivitas secara signifikan.
Pintasan Emmet untuk HTML
Ada berbagai pintasan Emmet untuk HTML yang dapat membantu Anda bekerja lebih cepat. Mengenal Emmet Shortcut HTML & CSS akan mempermudah sekaligus mempersingkat waktu penulisan kode.
1. Membuat Komentar
- Mengomentari satu baris: tekan Ctrl+/ pada baris yang dipilih.
- Mengomentari beberapa baris: pilih baris-baris tersebut lalu tekan Ctrl+/.
2. Perkalian Elemen
Gunakan tanda bintang (*) untuk membuat beberapa elemen sekaligus.
Contoh: p*10 akan menghasilkan 10 elemen <p>.
3. Membuat Elemen Anak
Gunakan tanda lebih besar (>).
Contoh: ol>li akan membuat elemen <li> di dalam <ol>.
4. Membuat Elemen Saudara
Gunakan tanda plus (+).
Contoh: div+p akan membuat <div> dan <p> pada level yang sama.
5. Menggabungkan Saudara dan Anak
Contoh: div+p>span akan membuat <div> dan <p> pada level yang sama, dengan <span> sebagai anak dari <p>.
6. Menggunakan Tanda Kurung ()
Berguna untuk memisahkan bagian struktur.
Contoh: (main>div)+div>ul>li*5 akan membuat struktur yang lebih kompleks.
7. Menambahkan ID
Gunakan tanda pagar (#).
Contoh: p#news-section menghasilkan <p id=”news-section”></p>.
8. Menambahkan Kelas
Gunakan tanda titik (.).
Contoh: p.news-espanol menghasilkan <p class=”news-espanol”></p>.
9. Menambahkan Atribut
Gunakan tanda kurung siku [].
Contoh: button[type=submit] menghasilkan <button type=”submit”></button>.
10. Menambahkan Konten ke Elemen
Gunakan tanda kurung kurawal {}.
Contoh: p{Ini adalah paragraf} menghasilkan <p>Ini adalah paragraf</p>.
11. Enumerasi
Gunakan tanda dolar ($) untuk menambahkan nomor urut.
Contoh: ul>li*5{List item number $} menghasilkan lima <li> dengan nomor berurutan.
12. Membuat Teks Lorem Ipsum
Ketik lorem20 untuk menghasilkan teks Lorem Ipsum dengan 20 kata.
13. Menautkan CSS
Ketik link lalu tekan Enter untuk membuat tag <link> dengan atribut bawaan.
14. Menautkan JavaScript
Ketik script:src untuk membuat tag <script> dengan atribut src.
Baca juga: Mengenal Apa Itu Doctype dan Mengapa Penting dalam HTML?
Pintasan Emmet untuk CSS
Mengenal Emmet Shortcut HTML & CSS belumlah lengkap jika Anda belum mengetahui pintasan untuk CSS. Setelah sebelumnya membahas pintasan untuk HTML, kini giliran daftar singkatan CSS yang sering digunakan. Dengan memanfaatkan singkatan ini, Anda dapat menulis properti CSS lebih cepat dan efisien. Beberapa pintasan Emmet untuk CSS yang umum dipakai antara lain:
- tar → menghasilkan text-align: right; untuk mengatur teks rata kanan.
- c → menghasilkan color: #000; untuk memberi warna teks hitam.
- o → menghasilkan overflow: hidden; untuk menyembunyikan bagian elemen yang meluap.
- z → menghasilkan z-index: 1; untuk menentukan urutan tumpukan elemen.
- m10 → menghasilkan margin: 10px; untuk memberi jarak luar 10 piksel.
- p-10 → menghasilkan padding: -10px; untuk memberi jarak dalam minus 10 piksel (nilai negatif jarang digunakan).
- m20p → menghasilkan margin: 20%; untuk memberi jarak luar sebesar 20% dari ukuran elemen induk.
- w100p → menghasilkan width: 100%; untuk mengatur lebar penuh.
- bgc#ff → menghasilkan background-color: #fff; untuk memberi latar belakang putih.
- df → menghasilkan display: flex; untuk mengaktifkan layout flexbox.
- tac → menghasilkan text-align: center; untuk mengatur teks rata tengah.
- db → menghasilkan display: block; untuk mengubah elemen menjadi blok.
- dib → menghasilkan display: inline-block; untuk menjadikan elemen inline-block.
Dengan menguasai singkatan ini, Anda akan lebih hemat waktu, menjaga konsistensi penulisan, dan bekerja lebih produktif saat membuat CSS.
Setelah mengetahui berbagai hal tentang Emmet, tentu Anda akan lebih mudah dalam membuat struktur HTML maupun CSS. Bahkan bagi pemula, Emmet dapat menjadi alat yang sangat membantu untuk memahami struktur HTML dan properti CSS dengan lebih cepat.
Baca juga: Mengenal Index HTML File Utama yang Wajib Ada di Website
Penutup
Sifatnya yang logis dan ringkas membuat Anda lebih mudah mengingat cara kerja tag atau properti. Inilah mengapa mengenal Emmet Shortcut HTML & CSS menjadi penting untuk dikuasai. Jika Anda tertarik dalam pengembangan web, mempelajari Emmet adalah langkah yang tepat. Dengan menguasainya, Anda dapat mengurangi waktu penulisan kode dan memperoleh hasil yang jauh lebih cepat.
Jika Anda ingin semakin optimal dalam mengembangkan website maupun aplikasi, pastikan juga memilih infrastruktur server yang andal. Bisa menggunakan Cloud VPS IDCloudHost, yang memberikan performa stabil, fleksibilitas tinggi, serta dukungan penuh bagi developer untuk menjalankan berbagai tools produktivitas seperti Emmet. Dengan Cloud VPS, workflow pengembangan web Anda akan lebih lancar dan profesional.
