Cara menulis kode HTML lebih cepat

Sep 10, 2025

Bagaimana caranya

(Kredit Gambar: Masa Depan)

Situs web modern membutuhkan banyak kode HTML. Tata letak kompleks dengan berbagai pandangan dan negara yang berbeda dapat sulit dibuat dengan hanya editor teks sederhana. Untungnya, ada sejumlah alat generasi HTML di luar sana untuk bekerja dengannya. Di sini kita melihat dengan cepat dua alat yang lebih populer, Emmet dan Pug.

Namun, Anda masih perlu mengetahui HTML Anda untuk menggunakan alat hemat waktu yang kuat ini. Jadi, sebelum Anda menyelam di pastikan Anda menggunakan semantik yang populer Html tag jalan yang benar. Lihat juga panduan kami untuk menggunakan a Html boilerplate. .

Ingin membelokkan kode? Coba ini Pembangun situs web . Atau untuk bantuan ekstra di sepanjang jalan, pilih a hosting web. Layanan dengan dukungan teknis.

Hasilkan HTML dengan cepat

Saat menulis sejumlah besar HTML dalam sekali jalan, menuliskan setiap tag dengan tangan bisa menjadi sangat membosankan, sangat cepat. Misalnya, ketika menulis daftar tautan, kita perlu memastikan bahwa & lt; ul & gt ;, & lt; li & gt; dan & lt; a & gt; Tag semua terbuka dan tutup di tempat yang tepat. Kalau tidak, tautannya mungkin tidak berfungsi dan seluruh tata letak halaman akan menjadi benar-benar haywire.

Cara menggunakan Emmet

Untuk memastikan Anda mengurangi kemungkinan kejadian ini, Anda dapat mempekerjakan bakat Semut . Ini adalah alat yang akan menghemat banyak pengetikan dan akan sangat meningkatkan HTML & amp Anda; Alur kerja CSS. Emmet memungkinkan Anda membuat elemen dengan mengetik pemilih seperti CSS. Ini kemudian akan mengurai dan memperluas elemen itu menjadi HTML biasa. Di bawah ini adalah elemen asli yang dibuat dalam Emmet.

nav>ul>li*3>a.chapter{Chapter $ of 3}

Emmet akan mendeteksi elemen ini, menguraikannya dan kemudian mengubah elemen menjadi HTML standar seperti yang ditunjukkan di bawah ini. Lihat cepat pada elemen Emmet menyarankan itu & lt; li & gt; dikalikan dengan ( * 3. ) dan masing-masing & lt; li & gt; Misalnya akan disebut Bab diikuti oleh angka yang sesuai (hingga 3).

Perhatikan berapa banyak karakter yang berisi elemen Emmet dan berapa banyak html standar yang berisi. Bahkan potongan kecil kode ini menunjukkan berapa banyak waktu yang dapat disimpan dengan menggunakan EMMET stenthand.

 & lt; nav & gt;
  & lt; ul & gt;
    & lt; li & gt; & lt; a href = "" class = "chapter" & gt; bab 1
 3 & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "" class = "chapter" & gt; bab 2
 3 & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "" class = "bab" & gt; bab 3
 3 & lt; / a & gt; & lt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt;

Emmet juga menyadari konteks. Misalnya, jika kita mengedit a & lt; table & gt; kemungkinan kita akan menginginkan beberapa & lt; tr & gt; (Ini adalah baris) elemen untuk mengisinya. Yang perlu kita lakukan adalah menentukan berapa banyak yang kita butuhkan.

Ini hanya contoh cepat dari apa yang dapat dilakukan Emmet, tetapi ada banyak opsi konfigurasi yang tersedia. Ini termasuk pembuatan kelas CSS, BEM (Pengubah Elemen Blok) dan bahkan ada generator Lorem Ipsum.

Perlu juga dicatat bahwa sebagian besar editor kode memiliki emmet bawaan atau mendukungnya melalui plugin. Anda dapat mengetahui lebih lanjut tentang ini di Dokumentasi Emmet. halaman.

Gunakan PUG untuk konten dinamis

Sementara Emmet sangat ideal untuk konten statis, apa yang terjadi jika konten harus lebih dinamis? Misalnya, kita mungkin perlu menghasilkan beranda yang dipersonalisasi, tabel pesanan kompleks atau mengulangi blok umum HTML. Ini semua mungkin dalam JavaScript, tetapi dengan pra-rendering konten ini kita bisa mendapatkan peningkatan kecepatan tambahan tanpa mengandalkan browser pengguna. Ingat jika Anda punya halaman media-berat, Anda akan ingin mendukungnya dengan dapat diandalkan penyimpanan awan .

Langkah maju pug. Ini adalah alat templating untuk HTML. Anda dapat menulis halaman dalam format ".pug" dan PUG akan membaca file itu, menyuntikkan beberapa data dinamis ke dalamnya dan mengembalikan HTML standar. Contoh di bawah ini adalah bagaimana Anda akan menulis kode di PUG untuk membuat HTML yang sama dengan contoh Emmet (di atas).

 ul
  Setiap val di [1, 2, 3]
    Li.
      A (href = "", class = "bab") Bab
# {val} dari 3

File Pug menggunakan indentasi saja untuk menunjukkan bersarang.Ini dapat beralih ke nilai untuk menghasilkan sejumlah besar HTML dalam satu lintasan.File ".pug" ini dirancang untuk digunakan kembali berkali-kali melintasi proyek.

PUG tersedia untuk diinstal dari manajer paket NPM. .Tetapi, jika Anda ingin informasi lebih lanjut tentang cara memulai dengan Pug, beri kunjungan ke situs web .

Konten ini awalnya muncul di majalah Desainer Web.

Baca lebih lajut:

10 Best. Kerangka kerja CSS.
Animasi css. Contoh untuk diciptakan kembali
8 Tag HTML yang perlu Anda gunakan (dan 5 untuk menghindari)

Cara menulis kode HTML lebih cepat

Hasilkan HTML dengan cepat

Cara menggunakan Emmet

Gunakan PUG untuk konten dinamis

Bagaimana caranya - Artikel Terpopuler

Cara merancang dengan bentuk CSS: Pendahuluan

Buat animasi kendaraan dengan iClone 7

Buat efek teks 3D animasi

Bangun UI berbasis kartu dengan Yayasan

mendokumentasikan sistem desain Anda dengan fraktal

Percepat alur kerja tekstur Anda

Memodelkan spaceship untuk desain gameplay

Persiapan dengan prototyping di Adobe XD

Kategori