Presentamos los factores clave para saber cómo escribir código HTML más rápido y de esta forma crear proyectos con más profesionales y de mayor calidad.
Los sitios web modernos requieren mucho código HTML, algunos diseños complejos con múltiples vistas y estados diferentes pueden ser difíciles de crear con un simple editor de texto. Sin embargo, hay herramientas de generación de HTML con las que se puede trabajar como es: Emmet y Pug.
Antes de utilizar estas armas, es importante conocer el HTML, por lo tanto, hay que asegurarse de que está utilizando las etiquetas HTML semánticas populares de la manera correcta.
Generar HTML sobre la marcha
Escribir grandes cantidades de HTML y plasmar cada etiqueta a mano puede volverse muy tedioso. Por ejemplo, al escribir una lista de enlaces, debemos asegurarnos de que las etiquetas <ul>, <li> y <a> se abran y cierren en el lugar correcto.
De lo contrario, es posible que los enlaces no funcionen y el diseño de la página no sea del todo funcional.
Usar Emmet
Para asegurarse de reducir las posibilidades de que suceda lo anterior, se puede emplear Emmet, que es una herramienta que ahorrará la escritura y mejorará el flujo de trabajo de HTML y CSS.
Emmet permite crear elementos escribiendo un selector similar a CSS. Luego analizará y expandirá ese elemento en HTML normal. A continuación, se muestra el elemento original creado en Emmet.
nav>ul>li*3>a.chapter{Chapter $ of 3}
Emmet detectará este elemento, lo analizará y luego lo transformará en HTML estándar como se muestra a continuación. Reconocer el elemento Emmet sugiere que <li> se multiplica por (* 3 ) y cada instancia de <li> se llamará Capítulo seguido del número apropiado (hasta 3).
Hay que tener en cuenta cuántos caracteres contiene el elemento Emmet y cuántos contiene el HTML estándar. Incluso este fragmento de código demuestra cuánto tiempo se puede ahorrar utilizando la abreviatura de Emmet.
<nav>
<ul>
<li><a href=”” class=”chapter”>Chapter 1
of 3</a></li>
<li><a href=”” class=”chapter”>Chapter 2
of 3</a></li>
<li><a href=”” class=”chapter”>Chapter 3
of 3</a></li>
</ul>
</nav>
Emmet también se adecúa al contexto. Por ejemplo, si estamos editando una <table>, es probable que se desee que algunos elementos <tr> (como estas filas) la llenen, sólo se debe especificar cuántos necesitamos.
Este es solo un ejemplo de lo que puede hacer Emmet, pero hay muchas más opciones de configuración disponibles que incluyen la edición de CSS, la creación de clases BEM (Block Element Modifier) e incluso hay un generador Lorem Ipsum.
Es importante señalar que la mayoría de los editores de código tienen Emmet integrado o lo admiten a través de complementos.
Pug ideal para contenido dinámico
Es posible que necesitemos generar páginas de inicio personalizadas, tablas de orden complejas o repetir bloques comunes de HTML. Todo esto es posible en JavaScript, pero al renderizar previamente este contenido podemos obtener un aumento de velocidad adicional sin depender del navegador del usuario.
Si hay una página con muchos medios, se querrá hacer una copia de seguridad con un almacenamiento confiable en la nube.
Pug
Esta es una herramienta de creación de plantillas para HTML, con la que se puede escribir páginas en formato «.pug». Posteriormente la herramienta leerá ese archivo, inyectará algunos datos dinámicos en él y devolverá HTML estándar.
El siguiente ejemplo muestra cómo escribiría el código en Pug para crear el mismo HTML que el ejemplo de Emmet.
ul
each val in [1, 2, 3]
li
a(href=””, class=”chapter”) Chapter
#{val} of 3
Un archivo Pug usa sangría solo para indicar anidación, se puede iterar sobre valores para generar grandes cantidades de HTML en una sola pasada. Estos archivos «.pug» están diseñados para ser reutilizados muchas veces en un proyecto.
Leíste: Cómo escribir código HTML más rápido, te recomendamos: Técnicas PHP para escribir código limpio y legible
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode
