Skriva HTML-kod med hjälp av Emmet

Har du hört talas om emmet? Om inte så är den här guiden för dig!

Emmet är ett plug in som tillåter dig att skriva HTML och CSS kod så mycket snabbare. om du använder visual studio code så finns Emmet redan inbyggt, och du behöver inte göra någonting för att börja använda det! Om du använder en annan editor så kan du behöva hämta emmet här https://emmet.io/.

Emmet tillåter dig att med en rad kod, generera många rader kod. Låt mig demonstrera!

Om jag skriver ett utropstecken och trycker på tab eller enter så får jag upp den HTML jag behöver för att påbörja mitt HTML-dokument. Man kan också få samma sak genom att skriva html:5.

Det är ju helt fantastiskt! Men det tar ju inte slut här. Det finns så mycket mer man kan göra med Emmet.

Skapa element

För att få en element-tag, räcker det med att man skriver själva elementnamnet. Exempelvis kan man skriva img, och trycka på tab (eller enter). Då får man upp: <img src="" alt=""> automatiskt!

Klasser och id

Det är superenkelt att lägga på id eller klasser till element när man skapar dom med Emmet. Det enda du behöver göra är att lägga till en punkt och sen namnet på klassen eller # och namnet på id. Exempel:

För en div, räcker det med att bara skriva .klassnamn eller #id.

Skapa fler element

När vi skapar en lista kanske vi vill lägga till lite list-items i listan också. Det kan vi göra med >. Det skapar element inuti elementet. Så vi kan skriva det såhär: ul>li. Då skapas det en ul-tag med en li-tag inuti.

Om vi vill ha flera li-taggar i listan kan vi specificera det med *nummer. Alltså, om vi vill ha 5 li-taggar i vår lista skriver vi: ul<li*5.

Om vi vill skapa sibling-element kan vi göra det också! Det gör vi med +. Så om vi vill ha en div som innehåller en bild och en p-tag kan vi skriva såhär: div>img+p.

När vi har skapat ett element som i sin tur innehåller ett element så vill vi kanske lägga till ett sibling-element till det element som vi först skapade. Om vi nu bara skriver +, kommer vi lägga till ett sibling-element till det andra elementet vi skapade, som ju ligger inuti det element vi vill ut från. För att gå upp ett steg kan vi då skriva ^.

Numrera klasser

Vi kan numrera de klasser vi skapar med $. Det gör att om vi skapar en lista med 5 list items och vi inkluderar ett dollartecken, kommer den börja på 1 och räkna upp för varje list item vi har.

Lorem ipsum

Emmet har även lorem ipsum-text inbyggt som man kan använda om man behöver utfyllnadstext. Det kommer vi åt genom att bara skriva lorem. Om man vill ha ett specifikt antal ord i sin text kan man även specificera det genom att skriva siffran direkt efter lorem. Exempel: lorem10.

Kombinera

Vi kan kombinera alla dessa kommandon om vi vill. Nedan visar jag ett exempel på hur det kan se ut.

Genom att bara skriva en rad kod med Emmet kan vi få många rader kod i HTML. Det gör att när man väl lärt sig att använda Emmet kan man skriva HMTL-kod i raketfart! Det finns så mycket mer man kan göra med Emmet, och det kan vara svårt att komma ihåg hur man ska skriva allt. Därför finns det finns en cheat sheet som man kan gå in och kolla på: https://docs.emmet.io/cheat-sheet/.