> For the complete documentation index, see [llms.txt](https://digikiad.gitbook.io/digitalis-kiadvanyok/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://digikiad.gitbook.io/digitalis-kiadvanyok/vs-code/emmet.md).
# 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**](/digitalis-kiadvanyok/vs-code/mi-a-vs-code.md) szövegszerkesztőbe, és a [**Codepen.io**](https://codepen.io/) online szövegszerkesztőbe is.
Az **Emmet**[ **rövidítéseket**](https://docs.emmet.io/abbreviations/syntax/) (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:
```markup
```
Az Emmet honlapja az alábbi linken érhető el:
## Emmet példák
### html:5 vagy !
Az alapvető HTML elemeket tehetjük be vele egy üres dokumentumba.\
Eredménye:
```markup
Document
```
### h1
Egy üres főcím.\
Eredménye:
```markup
```
### h1>lorem3
Főcím 3 töltelékszóval.\
Eredménye:
```markup
Lorem, ipsum dolor.
```
{% hint style="info" %}
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.
{% endhint %}
{% hint style="info" %}
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.
{% endhint %}
### p
Egy üres bekezdést hoz létre.\
Eredménye:
```markup
```
### p>lorem
Egy bekezdést hoz létre egy bekezdésnyi töltelékszöveggel.\
Eredménye:
```markup
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{Tarka kutya tarka felfelé kucsorodó farka!}
Egy bekezdést hoz létre konkrét szöveges tartalommal.\
Eredménye:
```markup
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!
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?
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!
```
{% hint style="info" %}
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**
{% endhint %}
### h1+h2+p
Egy üres főcím, utána üres alcím, végül egy üres bekezdés\
Eredménye:
```markup
```
{% hint style="info" %}
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**
{% endhint %}
### (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:
```markup
Lorem.
Lorem, ipsum dolor.
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?
Laboriosam, earum expedita.
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.
```
### ul>li
Egy lista egy üres lista elemmel\
Eredménye:
```markup
```
### ul>li\*3
Egy lista három üres lista elemmel\
Eredménye:
```markup
```
### ul>(li>lorem3)\*6
Egy lista 6 lista elemmel, mindegyik lista elemben három töltelék szóval.\
Eredménye:
```markup
Lorem, ipsum dolor.
Saepe, ea unde!
Quasi, ipsum rerum?
Odio, est dignissimos.
Natus, quaerat velit.
Pariatur, in! Perferendis!
```
### nav>ul>(li>a>lorem3)\*5
Navigáció listátával, 5 darab lista elemmel, a list elemekben linkekkel.\
Eredménye:
```markup
```