Φύλλο οδηγιών συντομογραφιών Emmet HTML/CSS

Γρήγορος οδηγός για συντομογραφίες Emmet: θυγατρικά στοιχεία, αδελφά στοιχεία, αναρρίχηση, πολλαπλασιασμός, κλάσεις, IDs και αρίθμηση.

Επιμέλεια Cheat Sheets · Δημοσιεύτηκε24 Οκτωβρίου 2026

Το Emmet είναι ένα βασικό εργαλείο για γρήγορη συγγραφή HTML, XML και CSS μέσω δυναμικής επέκτασης συντομογραφιών τύπου CSS.

Σύνταξη δομικής ιεραρχίας

Θυγατρικό στοιχείο (>)

nav>ul>li αναπτύσσεται σε:

<nav>
  <ul>
    <li></li>
  </ul>
</nav>

Αδελφό στοιχείο (+)

div+p+bq αναπτύσσεται σε:

<div></div>
<p></p>
<blockquote></blockquote>

Αναρρίχηση επιπέδου (^)

div+div>p>span+em^^bq αναπτύσσεται σε:

<div></div>
<div>
  <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Πολλαπλασιασμός (*)

ul>li*3 αναπτύσσεται σε:

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Ομαδοποίηση (())

div>(header>ul>li*2)+footer>p αναπτύσσεται σε:

<div>
  <header>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

Ιδιότητες και Σύνταξη Κειμένου

Κλάσεις και IDs (. και #)

header#main-header.navbar.fixed αναπτύσσεται σε:

<header id="main-header" class="navbar fixed"></header>

Προσαρμοσμένες ιδιότητες HTML ([])

a[title="Home" target="_blank"] αναπτύσσεται σε:

<a href="" title="Home" target="_blank"></a>

Αρίθμηση στοιχείων ($)

ul>li.item$*3 αναπτύσσεται σε:

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

Χρησιμοποιήστε πολλαπλά σύμβολα $ για προπορευόμενα μηδενικά (π.χ. item$$ αναπτύσσεται σε item01, item02).

Κόμβοι κειμένου ({})

a{Click Here} αναπτύσσεται σε:

<a href="">Click Here</a>

p>{Click }+a{here}+{ to continue} αναπτύσσεται σε:

<p>Click <a href="">here</a> to continue</p>

Βασικός σκελετός HTML5

Πληκτρολογήστε ! ή html:5 και πατήστε Tab:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>