Uno de los lenguajes que necesitarás saber para construir aplicaciones web es HTML, este lenguaje es de los más sencillos de aprender y si ya lo has usado sabes que lo escribimos con etiquetas. Cuando tienes un poco más de práctica notarás que se puede volver algo repetitivo, y si nos preguntamos si es que existe alguna herramienta que nos ayude a escribir más rápido… y si la hay se llama Emmet, en este artículo hablaremos de qué es y una guía de cómo usarlo para mejorar cuando desarrollamos en la web.
¿Qué es Emmet?
Emmet es una herramienta para desarrolladores web que mejora la productividad con HTML y CSS utilizando abreviaturas similares a las de CSS. Estas abreviaturas se expanden en tiempo real en el código completo, lo que permite escribir HTML y CSS de manera más rápida y eficiente.
En esta ocasión solo veremos cómo se usa para HTML, pero si quieres un artículo para CSS puedes dejarnos un comentario 😃
¿Cómo se usa?
Este es un conjunto de abreviaturas o snippets que podemos comenzar a escribir y no te preocupes no deberías instalarlo si es que ya usas un editor como VsCode, ya que este ya lo incluye. Solo debes asegurarte de tener un archivo HTML para comenzar con esta practica.
Vamos a mostrarte cómo es su funcionamiento y después pasaremos a cómo usarlo, entonces necesitaremos un archivo, yo le llamaré index.html y aquí vamos a usar el primero de estas abreviaturas, si presionas la tecla: !
Verás cómo en el editor nos aparece como sugerencia este mismo símbolo, aquí podremos presionar la tecla tab o enter para seleccionarlo y que el editor rellene todo el texto necesario:
Aquí vemos que nos ha generado esta estructura en código HTML:
Que este es un código, podrimos decir estándar que utilizamos en todo proyecto que lleve un HTML.
Así es como utilizaremos Emmet, como ves es solo escribir la abreviatura correspondiente y presionar enter o la tecla tab.
Hora de practicar un poco con Emmet
Como ya vimos ! nos generará una plantilla de HTML con lo esencial para generar nuestra maquetación
Anidar elementos:
Para anidar un elemento dentro de otro, lo que podemos hacer es lo siguiente, a nuestra plantilla HTML vamos a escribirle dentro de la etiqueta body un main que contenga una section, entonces escribimos:
main>sectionEsto nos generará el siguiente contenido:
<body>
<main>
<section></section>
</main>
</body>
Pero esto no es todo, ya que podemos anidar cuantas etiquetas necesitemos, por ejemplo, vamos a colocar dentro de este main, una section que contenga un aside, que a la vez contenga un div y que este contenga un p:
section>aside>div>pEsto nos generará este código:
<section>
<aside>
<div>
<p></p>
</div>
</aside>
</section>
Habrás también notado que mientras escribías esto, VsCode tambien nos mostraba una vista previa de cómo se verían estas estructuras de etiquetas al presionar enter:
Agregar elementos hermanos
Ahora, vamos a pensar que en la primera sección que habíamos generado vamos a colocar un div y un aside como nodos hermanos, para esto podemos agregar el símbolo de suma (+), por ejemplo:
div+asideAsí vamos a obtener esta estructura en nuestro section :
<section>
<div></div>
<aside></aside>
</section>
Agregar elementos en un nivel superior
Ahora colocaremos una etiqueta header y lo siguiente que veremos es cómo asignar un elemento hermano, pero esto si colocamos un elemento dentro de otro previamente, vamos a verlo en un ejemplo, si dentro de este header colocamos una nav que tenga una ul, pero que esta nav sea hermana de un div mas. Esto lo lograremos con el símbolo de caret(^)
header>nav>ul^divY este es el resultado:
<header>
<nav>
<ul></ul>
</nav>
<div></div>
</header>
Multiplicar elementos
Ahora vamos a colocar varios elementos li en este elemento lu:
li*3Con este símbolo multiplicador es que podemos lograr este resultado:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Lo siguiente es ver cómo podemos hacer agrupaciones, imagina que necesitamos ahora hacer el footer con secciones de links, colocaremos varias ul que contengan varias li al mismo tiempo, para esto ocuparemos los paréntesis redondos
Agrupar elementos
footer>(ul>li*3>a)*3Antes de que escribas esta estructura, si no vas a necesitar más de uno de estos conjuntos, para que te dé la opción y se genere todo al presionar enter, después de escribir footer> escribe los paréntesis redondos footer>() y ahora si comienza a escribir todo el conjunto, este es el resultado:
<footer>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</footer>
Agregar atributos
Lo siguiente que veremos es para agregar atributos a un elemento, vamos a trabajar de nuevo en el footer, y le colocaremos otra ul que lleve 3 elementos li y con un a, pero pensemos que nos llevará a las redes sociales, y todos estos enlaces comienzan con “#socialmedia-“ y el nombre de la red social, pues aquí escribiremos:
ul>li*3>a[href="#socialmedia-"]Y este será el resultado:
<ul>
<li><a href="#socialmedia-"></a></li>
<li><a href="#socialmedia-"></a></li>
<li><a href="#socialmedia-"></a></li>
</ul>
Esto lo podemos repetir con todos los atributos que necesite la etiqueta.
Id y clases
El último ejemplo que veremos es cómo agregar clases o un id a nuestros elementos HTML, y lo podemos hacer similar a como lo hacemos en CSS. A nuestro main agregaremos un article que contendrá la clase de “new” y el id de #principal, suponiendo que este elemento destacará de todos los demás:
article.new#principalObtendremos:
<article class="new" id="principal"></article>
Entonces, si colocamos un punto(.), vamos a agregar una clase y un hashtag(#) agregaremos un id
Ejercicio
Con esto terminamos con este artículo, pero antes puedes realizar un sencillo ejercicio.
Vamos a colocar un formulario, que contenga un h2, 3 input con los atributos de name y el de type y la clase de input, y un botón de tipo submit para el envío de este formulario:
form>h2+(input.input[type=""][name=""]*3)+button[type=submit]Y este es el resultado
<form action="">
<h2></h2>
<input type="" class="input" name="">
<input type="" class="input" name="">
<input type="" class="input" name="">
<button type="submit"></button>
</form>
Y esto ha sido todo de este tutorial, pero si quieres aprender sobre HTML te dejaremos el curso HTML5: sin fronteras, si quieres seguir avanzando con los estilos CSS3: sin fronteras y si ya quieres entrar en la parte de programación puedes ver Ultimate JavaScript
Te dejaremos el enlace a todos nuestros cursos de programación, los cuales los encontrarás disponibles en la academia Hola Mundo y puedes optar por adquirir los cursos de manera individual en el siguiente link: todos los cursos de Hola Mundo, si prefieres acceso a todo, también puedes elegir un plan de suscripción mensual o anual, y además te invitamos al siguiente enlace donde vas a poder obtener un descuento en tu primer año a sólo $49.90 usando el cupón PRIMERA_VEZ al momento de realizar tu pago
O igualmente puedes optar por cada curso de manera individual en Udemy.
Y esto ha sido todo de este post, si te ha encantado, ¡golpea al botón de me gusta!, dejanos un comentario, y para no perderte nada, no olvides suscribirte a este blog, seguirnos en todas las redes como Youtube, Twitter, Instagram y Tiktok, y por último, te invitamos a escuchar nuestra música «Hola Beats«, diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, la puedes encontrar en Spotify, Apple Music, Amazon Music, Youtube Music y Deezer.
¡Hasta la próxima!, y chao mundo
Deja un comentario