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:
<p></p>
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>

h1

Egy üres főcím. Eredménye:
<h1></h1>

h1>lorem3

Főcím 3 töltelékszóval. Eredménye:
<h1>Lorem, ipsum dolor.</h1>
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:
<p></p>

p>lorem

Egy bekezdést hoz létre egy bekezdésnyi töltelékszöveggel. Eredménye:
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officiis, eos? Iste deleniti cum ullam explicabo deserunt
eius at fugiat, itaque rem? Consequuntur molestiae enim sequi
provident molestias inventore praesentium odio?</p>

p{Tarka kutya tarka felfelé kucsorodó farka!}

Egy bekezdést hoz létre konkrét szöveges tartalommal. Eredménye:
<p>Tarka kutya tarka felfelé kucsorodó farka!</p>

(p>lorem)*3

3 bekezdés töltelékszöveggel. Eredménye:
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatem ducimus similique architecto numquam eum, sunt
error quasi quas deserunt et. Neque dolorem, veritatis
suscipit cum magni magnam veniam ducimus facilis!</p>
<p>Earum consequuntur tempora non incidunt voluptatem sit
quibusdam recusandae facilis? At, tenetur odit fugiat error
vero perspiciatis assumenda praesentium dolores perferendis
nostrum ut expedita officia quidem quae labore repellat
voluptates?</p>
<p>Voluptates voluptate architecto, qui quas saepe cumque
reiciendis alias cupiditate et! Sint unde nisi dolorem
voluptates id laudantium perspiciatis reprehenderit, vitae
atque architecto amet, eos eligendi veniam, facere autem
nesciunt!</p>
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:
<h1></h1>
<h2></h2>
<p></p>
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:
<h1>Lorem.</h1>
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
A cupiditate atque assumenda vel iusto. Veritatis, excepturi
temporibus aut facilis itaque, expedita dolor voluptate porro
harum iure quasi odio quibusdam. Repudiandae?</p>
<h2>Laboriosam, earum expedita.</h2>
<p>Voluptas dolores eos excepturi explicabo porro maxime
distinctio et hic similique.Iure voluptas, deleniti asperiores
porro quibusdam aliquam fugit voluptatibus quia officiis
consectetur atque ad alias saepe, veritatis beatae. Amet.</p>

ul>li

Egy lista egy üres lista elemmel Eredménye:
<ul>
<li></li>
</ul>

ul>li*3

Egy lista három üres lista elemmel Eredménye:
<ul>
<li></li>
<li></li>
<li></li>
</ul>

ul>(li>lorem3)*6

Egy lista 6 lista elemmel, mindegyik lista elemben három töltelék szóval. Eredménye:
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Saepe, ea unde!</li>
<li>Quasi, ipsum rerum?</li>
<li>Odio, est dignissimos.</li>
<li>Natus, quaerat velit.</li>
<li>Pariatur, in! Perferendis!</li>
</ul>
Navigáció listátával, 5 darab lista elemmel, a list elemekben linkekkel. Eredménye:
<nav>
<ul>
<li><a href="">Lorem, ipsum dolor.</a></li>
<li><a href="">Esse, soluta numquam!</a></li>
<li><a href="">Ullam, eligendi impedit!</a></li>
<li><a href="">Quod, tempora iusto.</a></li>
<li><a href="">Quas, at in!</a></li>
</ul>
</nav>