Skip to main content

Tutorial de Emmet ¿Qué es Emmet y cómo utilizarlo en HTML y CSS?

utilidades

Autor: Reynaldo Navedo

Publicado: Actualizado:

¿QUÉ ES EMMET?


Si ya sabes HTML y aún no has descubierto el “plugin” llamado Emmet, aquí descubrirás la gran ayuda que ofrece para ahorrante tiempo mientras escribes código de HTML.


Emmet es un plugin diseñado para editores de texto que ayuda en gran manera tu flujo de trabajo y te ahorra tiempo.


¿CÓMO SE INSTALA EMMET?


El editor de texto que vamos a utilizar se llama Visual Studio Code, conocido como VS Code. Si no usas VS Code puedes referirte a la documentación de tu editor de texto favorito para instalar Emmet. Agraciadamente Emmet ya viene instalado por defecto en VS Code, por lo que es un paso que nos saltamos. Si quieres intentar VS Code puedes descargarlo en el siguiente enlace.


Descarga VS Code


LOS BÁSICOS DE EMMET


Para comenzar, hagamos lo siguiente:


1. crea un directorio en tu escritorio (Desktop) llamado emmet,

2. dentro del directorio crea un documento HTML llamado index.html,

3. abre el directorio en VS Code. Si no es VS Code, lo puedes hacer en tu editor de texto favorito luego de haber instalado Emmet.


Para comenzar, escribe, en el documento de HTML, escribe el signo de admiración como se muestra en la siguiente foto.



Notas que al escribir el signo de admiración aparecen dos opciones. 


1. Escoger 1 signo de admiración o;

2. escoger 3 signos de admiración


Puedes escoger la primera (1 signo de admiración) o escribir el signo de admiración y presionar la tecla tab o enter.


Un solo signo de admiración producirá la base mínima para comenzar a escribir HTML como vez a continuación:


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


Prueba para ver que sucede cuando escribes los 3 signos de admiración. Esto solo declara el documento como HTML. Ahora actualiza el título del documento y cámbialo de Document a Tutorial Emmet.


Ahora veremos como añadir una clase llamada contenedor a un elemento. Para esto escribamos entre medio de las etiquetas body un punto y la palabra contenedor como se mira continuación.


.contenedor


Si miras bien la siguiente imagen, Emmet ya te dice lo que producirás una vez oprimas tab o enter, lo que es una gran ventaja.



Cuando comenzamos una palabra con un punto, estás diciéndole a Emmet que quieres crear una clase y por defecto se crea con una etiqueta div; sin embargo, nosotros queremos que en lugar de una etiqueta div, sea una etiqueta header con la clase de contenedor.


header.contenedor


El resultado de esto es el siguiente.


<header class="contenedor"></header>


Cool!, pero podemos hacer mucho más, queremos añadir un elemento nav dentro del header. ¿Cómo hacemos esto? 


AÑADIENDO ELEMENTOS NIÑOS CON EMMET


Para añadir elementos niños se utiliza el aro derecho > en el teclado, por ejemplo, mira el aro derecho en el siguiente código luego de haber declarado el elemento header con la clase contenedor.


header.contenedor>nav


Utilizando el aro derecho se pueden añadir cuantos niños queramos. Por lo tanto, vamos hacer lo siguiente dentro del elemento header y a su vez aprendamos como añadir múltiples elementos.


1. añadir el elemento nav al header con la clase contenedor

2. añadir un elemento ol al nav

3. añadir tres elementos li al ol y

4. añadir un elemento a por cada li


AÑADIENDO HIJOS Y MÚLTIPLES ELEMENTOS CON EMMET


header.contenedor>nav>ul>li*3>a


Esta combinación producirá lo siguiente. Como puedes ver, el signo de asterisco seguido de un número producirá cierta cantidad de elementos declarado en ese número, en este caso es 3, pero si necesitamos añadir 10 solo escribimos li*10>a.

<header class="contenedor">
 <nav>
   <ul>
     <li><a href=""></a></li>
     <li><a href=""></a></li>
     <li><a href=""></a></li>
   </ul>
 </nav>
</header>


Hasta este momento hemos aprendido lo siguiente:


1. Crear elementos con clase

2. Crear elementos niños

3. Crear múltiples elementos


AÑADIR ELEMENTOS CON ID Y ELEMENTOS ADYACENTES PARA CREAR LA BASE COMPLETA DE UN DOCUMENTO CON EMMET


Ahora veremos como podemos añadir la base completa completa de un documento HTML. Haremos lo siguiente:


1. crear un header con la clase contenedor, y

2. un nav con una lista no ordenada con tres elementos que incluyan las etiquetas li y a como hasta ahora hemos hecho y

3. crearemos elementos adyacentes, que no sean hijos, como un

a. main con un id de contenido y una clase de contenedor. Además,

b. al final, crearemos otro elemento adyacente llamado footer con una clase de contenedor


¡Todo esto con una sola cadena de texto como se muestra a continuación!


header.contenedor>(nav>ul>li*3>a)+(main#contenido.contenedor)+footer.footer


La cadena de texto se explica de la siguiente manera:


1. header.contenedor - declara el header con la clase de contenedor e inmediatamente se declara un hijo con el aro derecho > 

2. Los paréntesis () - indican el código que se declara hijo del header, en este caso usamos un nav como ya hemos hecho anteriormente

3. El signo de suma + - indica que será un elemento adyacente al header y no un hijo, en este caso un elemento main

4. El main - es un elemento declarado con una clase contenedor pero también con un id de contenido. Para declarar un id es la misma idea que la clase, pero se utiliza el símbolo de número # en lugar de un punto (.).

5. El footer - también se declara como un elemento footer con la clase footer


El resultado de todo lo anterior es la base completa para comenzar a estilizar un documento de HTML.


CONCLUSIÓN


Como vez, con solo una cadena puedes hacer el esqueleto o la base completa de lo que será tu documento HTML capaz de ahorrarte una gran cantidad de tiempo.


Puedes aprender aún más sobre Emmet visitando la documentación oficial en su página. Esta información es en inglés pero tiene unos videos muy útiles que te pueden ayudar.


Documentación oficial de Emmet


Si tienes dudas o preguntas no dudes dejar tu comentario o escribirnos.

Este tutorial incluye versión video

Comparte este contenido