Emmet es un complemento que se encuentra disponible en las principales aplicaciones para escribir código, y que permite una escritura mucho más rápida de lo habitual mediante el uso de abreviaturas y expresiones para generar patrones de código. Su uso es indispensable para cualquier desarrollador, y es muy sencillo de manejar, obteniendo grandes resultados desde el primer momento.

Vamos a ver un ejemplo de uso de las expresiones más habituales en Emmet.

Uso básico.

Al escribir en Emmet:

Obtenemos:

Estos párrafos muestran el mismo texto, pero no están copiados y pegados. Inserté las etiquetas usando la expresión de emmet: p*3

Estos párrafos muestran el mismo texto, pero no están copiados y pegados. Inserté las etiquetas usando la expresión de emmet: p*3

Estos párrafos muestran el mismo texto, pero no están copiados y pegados. Inserté las etiquetas usando la expresión de emmet: p*3

Elementos anidados

Si queremos indicar que un elemento está anidado dentro de otro usamos el carácter >. Por ejemplo, la expresión header>h1 nos construye esto: <header><h1></h1></header>

Si escribimos ul>li*5, obtenemos:

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

Contenido de etiquetas

Si queremos añadir contenido a alguna etiqueta usamos las llaves {} a continuación de la etiqueta.
La expresión ul>li{Elemento}*5 devuelve:

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

Iteración de repeticiones

También podemos usar el signo de dólar $ como variable numeral de las repeticiones que indiquemos.
La expresión ul>li{Elemento $}*5 devuelve:

<ul>
	<li>Elemento 1</li>
	<li>Elemento 2</li>
	<li>Elemento 3</li>
	<li>Elemento 4</li>
	<li>Elemento 5</li>
</ul>
		

Clases e id

Si queremos asignar una clase o un id a un elemento, usamos la expresión etiqueta.nombre_de_clase o eitqueta#nombre_id.
La expresión div.contenedor>header#cab_home.portada nos devuelve:

<div class="contenedor">
	<header id="cab_home" class="portada"></header>
</div>
		

Concatenación de etiquetas

El operador + permite colocar etiquetas una al lado de la otra.
La expresión div.contenedor>header.cabecera+section.contenido+footer.pie devuelve:

<div class="contenedor">
	<header class="cabecera"></header>
	<section class="contenido"></section>
	<footer class="pie"></footer>
</div>
		

Otras expresiones

También podemos usar

• (): Para agrupar etiquetas en la expresión
• ^: Para subir un nivel en la jerarquía de la expresión
• []:Para definir atributos dentro de las etiquetas

Ejemplo

El siguiente código nos muestra:

				
<div class="contenedor">
  <header class="cabecera">
   <h1>Cabecera del sitio</h1>
   <img src="" alt="" class="logo" title="Imagen de cabecera del sitio">
  <nav>
   <ul class="menu">
     <li class="list-menu"><a href="">Enlace 1</a></li>
     <li class="list-menu"><a href="">Enlace 2</a></li>
     <li class="list-menu"><a href="">Enlace 3</a></li>
     <li class="list-menu"><a href="">Enlace 4</a></li>
     <li class="list-menu"><a href="">Enlace 5</a></li>
   </ul>
 </nav>
 <h2 class="lema">Mi lema del sitio</h2>
</header>
<section class="principal">
  <article class="noticia"></article>
  <article class="noticia"></article>
  <article class="noticia"></article>
  <article class="noticia"></article>
  <article class="noticia"></article>
</section>
<footer class="pie"></footer>
</div>