Daftar Kode Snippet Mempercepat kamu menulis kode HTML
A. Snippets Dasar HTML
Gunakan Emmet (fitur bawaan VS Code) dengan mengetik singkatan + Tab/Enter.
1. Struktur HTML5 Boilerplate
- Singkatan:
!→ Tekan Tab
Hasil:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
2. Tag dengan Konten
| Singkatan | Hasil |
|---|---|
a | <a href=""></a> |
p | <p></p> |
img | <img src="" alt=""> |
input | <input type="text"> |
form | <form action=""></form> |
ul>li | <ul><li></li></ul> |
table | <table><tr><td></td></tr></table> |
B. Snippets Kompleks dengan Emmet
1. Multi-Elemen & Jumlah
ul>li*5→ 5 list items dalam ul:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>div.container>header#header+main.content+footer#footer→
<div class="container">
<header id="header"></header>
<main class="content"></main>
<footer id="footer"></footer>
</div>2. Class & ID
div.header→<div class="header"></div>section#hero→<section id="hero"></section>div.card.active→<div class="card active"></div>
3. Teks & Placeholder
p{Ini paragraf}→<p>Ini paragraf</p>a{Click}+span{here}→
<a href="">Click</a>
<span>here</span>C. Snippets Custom untuk HTML
Buat snippet Anda sendiri di VS Code:
- Buka File > Preferences > User Snippets → Pilih
html.json. - Tambahkan snippet contoh:
1. Navbar Bootstrap
"Bootstrap Navbar": {
"prefix": "navbs",
"body": [
"<nav class='navbar navbar-expand-lg bg-body-tertiary'>",
" <div class='container-fluid'>",
" <a class='navbar-brand' href='#'>${1:Logo}</a>",
" <button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#navbarNav'>",
" <span class='navbar-toggler-icon'></span>",
" </button>",
" <div class='collapse navbar-collapse' id='navbarNav'>",
" <ul class='navbar-nav'>",
" <li class='nav-item'><a class='nav-link' href='#'>${2:Home}</a></li>",
" <li class='nav-item'><a class='nav-link' href='#'>${3:About}</a></li>",
" </ul>",
" </div>",
" </div>",
"</nav>"
]
}2. Card dengan Gambar
"Card Component": {
"prefix": "card",
"body": [
"<div class='card'>",
" <img src='${1:image.jpg}' class='card-img-top' alt='${2:alt-text}'>",
" <div class='card-body'>",
" <h5 class='card-title'>${3:Title}</h5>",
" <p class='card-text'>${4:Description}</p>",
" <a href='#' class='btn btn-primary'>${5:Button}</a>",
" </div>",
"</div>"
]
}D. Snippets Cepat untuk Form
1. Form Login
Gunakan singkatan:form:post →
<form action="" method="post"></form>Atau buat snippet custom:
"Login Form": {
"prefix": "formlogin",
"body": [
"<form class='login-form'>",
" <div class='mb-3'>",
" <label for='email' class='form-label'>Email</label>",
" <input type='email' class='form-control' id='email'>",
" </div>",
" <div class='mb-3'>",
" <label for='password' class='form-label'>Password</label>",
" <input type='password' class='form-control' id='password'>",
" </div>",
" <button type='submit' class='btn btn-primary'>Login</button>",
"</form>"
]
}2. Input Group
Singkatan Emmet:input:email → <input type="email" name="" id="">input:number#age → <input type="number" name="" id="age">
E. Snippets Semantic HTML5
| Singkatan | Hasil |
|---|---|
header | <header></header> |
main | <main></main> |
article | <article></article> |
section | <section></section> |
aside | <aside></aside> |
figure | <figure><img src="" alt=""><figcaption></figcaption></figure> |
F. Fitur Emmet Lanjutan
1. CSS dalam HTML
div{Hello}*3→
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>ul>li.item$*3→
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>2. Lorem Ipsum Generator
p>lorem20→ Paragraf dengan 20 kata dummy.ul>li*5>lorem3→ 5 list items dengan 3 kata masing-masing.
G. Ekstensi Recomendasi untuk HTML
- Auto Close Tag: Auto-close tag saat mengetik
</. - HTML CSS Support: Auto-complete class CSS.
- HTML Snippets: Koleksi snippet tambahan.
Kesimpulan
Dengan menguasai snippet HTML di atas, Anda bisa:
- Menulis struktur HTML 5x lebih cepat.
- Mengurangi kesalahan pengetikan.
- Fokus pada logika, bukan sintaks repetitif.
Contoh Efisiensi:
- Membuat navbar Bootstrap: 10 detik (vs. 2 menit manual).
- Membuat form login: 5 detik (vs. 1.5 menit manual).
Mulailah dengan snippet dasar, lalu tambahkan custom snippet sesuai kebutuhan proyek Anda. Happy coding! 🚀
