Útmutató az Emmet rövidítések használatához HTML-ben – utolsó módosítás: 2024.06.01.
Emmet rövidítések szintaxisa
Az Emmet egy automatikus kódkiegészítő, ami meggyorsítja a HTML és CSS kódolást.
A rövidítés beírása után a rövidítés feloldása a TAB billentyűvel történik.
Meta elemek
Karakterkódolás:
meta:utf ⇒
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">.
Stíluslap csatolása:
link:css vagy css ⇒
<link rel="stylesheet" href="styles.css">
Body elemek
Az elemre a nevével lehet hivatkozni: a, p, div, option, body.
Gyerek elem létrehozásához egy > jelet kell elé írni: b>i, div>p.
Testvér elem létrehozásához egy + jelet kell írni: br+input.
A * operátorral megadható, hogy az adott elemet hányszor kell kiírni:
option*2 ⇒
<option value=""></option>
<option value=""></option>
A $ operátorral számozható az elem szövege, vagy akár value attribútuma is:
option[value=$] ⇒
<option value="1"></option>
A @ operátorral megadható a számozás kezdő értéke:
option[value=$@3]*3 ⇒
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
Az elem szöveges tartalmát kapcsos zárójelek között kell megadni:
p{Email} ⇒
<p>Email</p>
Az elem attribútumait szögletes zárójelek között kell megadni, először a tulajdonság, majd egy egyenlőségjel után az érték szerepel;
(Idézőjelet csak többszavas meghatározásoknál szükséges megadni!) input[name=email] ⇒
<input type="text" name="email">
Néhány kódrövidítés minta a feladatmegoldásokból
option[value=egyeb]
A kód jelentése: option elem felvétele, melynek value értéke egyeb.
A kurzor pozíciójába írd be a feliratot.
option[value=Szo]{szombat}
A kód jelentése: option elem felvétele, melynek value értéke: Szo, tartalma: szombat.
option[value=$]*2
A kód jelentése: option elem létrehozása, melynek value értéke 1-gyel kezdődő számozás, 
és ebből 2 db legyen.
option[value=$@3]{$@3}*4
A kód jelentése: option elem létrehozása, melynek value értéke 3-mal kezdődik, 
valamint tartalma is 3-mal kezdődik, és ebből legyen 4 darab.
tr>td{Szombat}+td
A kód jelentése: táblázatsor felvétele, mely tartalmaz egy táblázatcellát, melynek tartalma: Szombat, és egy másik táblázatcellát, melynek tartalmát utólag lehet megadni.
p{Email cím}>br+input[name=email]
A kód jelentése: Bekezdés (p) elem felvétele, melynek tartalma: Email cím, bekezdés elemen belül sortörés és egy text típusú input elem létrehozása, az input elem name jellemzője: email.
p>div{E-mail cím:}+div>input[name=email]
A kód jelentése: Egy bekezdés (p) elemen belül van két div elem. Az első divben a felirat (E-mail cím:), 
a második divben pedig egy text típusú beviteli mező van, melynek name értéke: email.
Automatikus kiegészítés
Nem azonos az Emmet rövidítésekkel!
Automatikus kiegészítés engedélyezése vagy tiltása a Beállítások között adható meg.
Általában ez a funkció nagyon hasznos, de a feladatok megoldása során többször kell egy bekezdést két bekezdéssé alakítani, ekkor először meg kell adni az első bekezdés rész záró jelölőjét, majd az új bekezdés rész nyitó jelölőjét, itt bekapcsolt automatikus kiegészítés esetén megjelenik a záró jelölő is, melyet vissza kell vonni.
A visszavonás történhet a CTRL+Z billentyűkombináció leütésével, vagy a felesleges karakterek törlésével.
Vissza a feladatsorszámok kiválasztásához