Emmet

Mi az az Emmet?
Az Emmet egy automatikus kódkiegészítő, ami megkönnyíti a munkát HTML és CSS dokumentumokkal, úgy hogy drasztikusan csökkenti a gépelés mennyiségét (és a gépelési hibákat). 
Számos fejlesztői eszközbe alapértelmezetten be van integrálva, köztük a VS Code szövegszerkesztőbe, és a Codepen.io online szövegszerkesztőbe is.
Az Emmet rövidítéseket (abbreviation) használ, amiket begépelve komplex HTML struktúrákat kapunk vissza.
Például ha VS Code-ban megnyitunk egy HTML dokumentumot, és új sorban leütjük a p betűt, és entert (vagy tab-ot) nyomunk, egy HTML bekezdést kapunk:
1
<p></p>
Copied!
Az Emmet honlapja az alábbi linken érhető el: https://emmet.io/​
Emmet példák
html:5 vagy !
Az alapvető HTML elemeket tehetjük be vele egy üres dokumentumba.
Eredménye: 
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
    <title>Document</title>
8
</head>
9
<body>
10
​
11
</body>
12
</html>
Copied!
h1
Egy üres főcím.
Eredménye:
1
<h1></h1>
Copied!
h1>lorem3
Főcím 3 töltelékszóval.
Eredménye:
1
<h1>Lorem, ipsum dolor.</h1>
Copied!
A > jel a jel előtt lévő elembe beleteszi a jel után következő elemet.
Például ennél a rövidítésnél: div>p a szövegszerkesztő létrehoz egy div elemet, és elhelyez benne egy bekezdést.
A lorem rövidítés egy bekezdésnyi töltelékszöveget hoz létre. Meghatározhatjuk hogy hány szóból álljon a töltelékszöveg, ehhez írjuk a lorem kulcsszó után közvetlenül a létrehozni kívánt szavak számát: lorem15 ez a rövidítés egy 15 szóból álló töltelékszöveget hoz létre.
p
Egy üres bekezdést hoz létre.
Eredménye:
1
<p></p>
Copied!
p>lorem
Egy bekezdést hoz létre egy bekezdésnyi töltelékszöveggel.
Eredménye:
1
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
2
Officiis, eos? Iste deleniti cum ullam explicabo deserunt 
3
eius at fugiat, itaque rem? Consequuntur molestiae enim sequi
4
provident molestias inventore praesentium odio?</p>
Copied!
p{Tarka kutya tarka felfelé kucsorodó farka!}
Egy bekezdést hoz létre konkrét szöveges tartalommal.
Eredménye:
1
<p>Tarka kutya tarka felfelé kucsorodó farka!</p>
Copied!
(p>lorem)*3
3 bekezdés töltelékszöveggel.
Eredménye:
1
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
2
Voluptatem ducimus similique architecto numquam eum, sunt 
3
error quasi quas deserunt et. Neque dolorem, veritatis 
4
suscipit cum magni magnam veniam ducimus facilis!</p>
5
<p>Earum consequuntur tempora non incidunt voluptatem sit 
6
quibusdam recusandae facilis? At, tenetur odit fugiat error
7
vero perspiciatis assumenda praesentium dolores perferendis
8
nostrum ut expedita officia quidem quae labore repellat
9
voluptates?</p>
10
<p>Voluptates voluptate architecto, qui quas saepe cumque 
11
reiciendis alias cupiditate et! Sint unde nisi dolorem 
12
voluptates id laudantium perspiciatis reprehenderit, vitae 
13
atque architecto amet, eos eligendi veniam, facere autem 
14
nesciunt!</p>
Copied!
A * jellel sokszorozni tudunk, például a p*5 rövidítés 5 üres bekezdést hoz létre.
Ha több egymásba ágyazott elemet akarunk sokszorozni, például 5 üres bekezdés helyett 5 bekezdést töltelékszöveggel, a sokszorozni kívánt elemeket tegyük zárójelbe: (p>lorem)*5
h1+h2+p
Egy üres főcím, utána üres alcím, végül egy üres bekezdés
Eredménye:
1
<h1></h1>
2
<h2></h2>
3
<p></p>
Copied!
A + jellel egymás után tudunk elhelyezni elemeket, például a div+div két div-et hoz létre. Ezzel a módszerrel egy oldal fő strukturális elemeit egy menetben létre tudjuk hozni: header+main+aside+footer
(h1>lorem1)+((h2>lorem3)+p>lorem)*2
Egy főcím, utána két alcím egy-egy bekezdéssel. Mindegyik elemben megBootstrap szolgáltatásaifelelő mennyiségű töltelékszöveg.
Eredménye:
1
<h1>Lorem.</h1>
2
<h2>Lorem, ipsum dolor.</h2>
3
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
4
A cupiditate atque assumenda vel iusto. Veritatis, excepturi 
5
temporibus aut facilis itaque, expedita dolor voluptate porro 
6
harum iure quasi odio quibusdam. Repudiandae?</p>
7
<h2>Laboriosam, earum expedita.</h2>
8
<p>Voluptas dolores eos excepturi explicabo porro maxime 
9
distinctio et hic similique.Iure voluptas, deleniti asperiores
10
porro quibusdam aliquam fugit voluptatibus quia officiis
11
consectetur atque ad alias saepe, veritatis beatae. Amet.</p>
Copied!
ul>li
Egy lista egy üres lista elemmel
Eredménye:
1
<ul>
2
    <li></li>
3
</ul>
Copied!
ul>li*3
Egy lista három üres lista elemmel
Eredménye:
1
<ul>    
2
    <li></li>
3
    <li></li>
4
    <li></li>
5
</ul>
Copied!
ul>(li>lorem3)*6
Egy lista 6 lista elemmel, mindegyik lista elemben három töltelék szóval.
Eredménye:
1
<ul>
2
    <li>Lorem, ipsum dolor.</li>
3
    <li>Saepe, ea unde!</li>
4
    <li>Quasi, ipsum rerum?</li>
5
    <li>Odio, est dignissimos.</li>
6
    <li>Natus, quaerat velit.</li>
7
    <li>Pariatur, in! Perferendis!</li>
8
</ul>
Copied!
nav>ul>(li>a>lorem3)*5
Navigáció listátával, 5 darab lista elemmel, a list elemekben linkekkel.
Eredménye:
1
<nav>
2
    <ul>
3
        <li><a href="">Lorem, ipsum dolor.</a></li>
4
        <li><a href="">Esse, soluta numquam!</a></li>
5
        <li><a href="">Ullam, eligendi impedit!</a></li>
6
        <li><a href="">Quod, tempora iusto.</a></li>
7
        <li><a href="">Quas, at in!</a></li>
8
    </ul>
9
</nav>
Copied!