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>
				
			

Encapsular texto con Emmet

Podemos usar las expresiones de emmet para generar código HTML que incluya fragmentos de texto que ya tenemos em el documento. Esto es especialmente útil si tenemos que convertir a HTML texto que hemos obtenido de otra fuente. Lo hacemos en 4 pasos:

1. Seleccionamos el texto que queremos encapsular
2. Abrimos la paleta de comandos de Visual Studio Code (Ctrl + Shift + P)
3. Buscamos el comando de emmet Wrap with Abbreviation (Encapsular con abreviatura)
4. Escribimos la expresión de Emmet que necesitemos y vemos directamente el resultado de lo que tecleamos en pantalla

Por ejemplo, convertir el nombre de las 3 provincias de la comunidad autónoma en un listado tipo ul requiere de tener las 3 ciudades en pantalla y aplicar los 4 pasos escribiendo en el último algo así: ul>li*3