Cómo escribir un código HTML más rápido

Jul 25, 2023

Cómo

(Crédito de imagen: Futuro)

Los sitios web modernos requieren mucho código HTML. Los diseños complejos con varias vistas y estados diferentes pueden ser difíciles de crear con un simple editor de texto. Afortunadamente, hay una serie de herramientas de generación HTML para trabajar. Aquí echamos un vistazo rápido a dos de las herramientas más populares, Emmet y Pug.

Sin embargo, todavía necesita conocer su HTML para utilizar estas dos potentes herramientas de ahorro de tiempo. Por lo tanto, antes de sumergirse en asegurarse de que está utilizando el popular semántico Etiquetas HTML de la manera correcta. Consulte también nuestra guía para usar un Placa de caldera HTML .

¿Quieres desviar el código? Prueba estos constructores de sitios web . O para obtener ayuda adicional en el camino, elija un alojamiento web servicio con soporte técnico.

Generar HTML sobre la marcha

Al escribir grandes cantidades de HTML de una sola vez, escribir cada etiqueta a mano puede llegar a ser muy tedioso, muy rápidamente. Por ejemplo, al escribir una lista de enlaces, debemos asegurarnos de que el <ul>, <li> Y <a> etiquetas todas abiertas y cercanas en el lugar correcto. De lo contrario, es posible que los enlaces no funcionen y todo el diseño de la página se volverá completamente loco.

Cómo utilizar Emmet

Para asegurarse de reducir las posibilidades de que esto suceda, puede emplear el talento de Emmet . Esta es una herramienta que le ahorrará mucha escritura y mejorará en gran medida su flujo de trabajo HTML y CSS. Emmet le permite crear elementos escribiendo un selector similar a CSS. A continuación, 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 transformará el elemento en HTML estándar como se muestra a continuación. Un vistazo rápido al elemento Emmet sugiere que <li> se multiplica por ( *3 ) y cada <li> instancia se llamará Capítulo seguido del número apropiado (hasta 3).

Tenga en cuenta cuántos caracteres contiene el elemento Emmet y cuántos contiene el HTML estándar. Incluso este pequeño fragmento de código muestra cuánto tiempo se puede ahorrar mediante el uso de la abreviatura de Emmet.

<nav>
  <ul>
    <li><a href="" class="chapter">Capítulo 1
 de 3</a></li>
    <li><a href="" class="chapter">Capítulo 2
 de 3</a></li>
    <li><a href="" class="chapter">Capítulo 3
 de 3</a></li>
  </ul>
</nav>

Emmet también es consciente del contexto. Por ejemplo, si estamos editando un <tabla> es probable que deseemos algunos <tr> (estas son filas) elementos para rellenarlo. Todo lo que tendríamos que hacer es especificar cuántos necesitamos.

Este es sólo un ejemplo rápido de lo que Emmet puede hacer, pero hay muchas más opciones de configuración disponibles. Estos incluyen la edición CSS, la creación de clases BEM (Modificador de elementos de bloque) e incluso hay un generador Lorem Ipsum.

También vale la pena señalar que la mayoría de los editores de código tienen Emmet incorporado o lo admiten a través de plugins. Usted puede obtener más información sobre esto en el Documentación de Emmet Página.

Utilice Pug para contenido dinámico

Si bien Emmet es ideal para el contenido estático, ¿qué sucede si el contenido necesita ser más dinámico? Por ejemplo, es posible que necesitemos generar páginas de inicio personalizadas, tablas de pedidos complejas o repetir bloques comunes de HTML. Todo esto es posible en JavaScript, pero al pre-renderizar este contenido podemos obtener un aumento de velocidad adicional sin depender del navegador del usuario. Recuerda que si tienes una página pesada en los medios de comunicación, querrás respaldarla con almacenamiento en la nube .

Un paso adelante Pug. Esta es una herramienta tentadora para HTML. Puede escribir páginas en el formato ".pug" y Pug leerá ese archivo, inyectará algunos datos dinámicos en él y devolverá HTML estándar. El ejemplo siguiente es cómo escribiría el código en Pug para crear el mismo HTML que el ejemplo emmet (arriba).

ul
  cada val en [1, 2, 3]
    Li
      a(href="", class="chapter") Capítulo
#{val} de 3

Un archivo Pug utiliza la sangría solo para indicar el anidamiento. Puede iterar sobre los valores para generar grandes cantidades de HTML en un paso. Estos archivos ".pug" están diseñados para ser reutilizados muchas veces a través de un proyecto.

Pug está disponible para instalar desde el administrador de paquetes Npm . Pero, si quieres más información sobre cómo empezar con Pug hacer una visita a la Sitio web .

Este contenido apareció originalmente en la revista Web Designer.

Leer más:

10 mejores Marcos CSS
Animación CSS ejemplos para recrear
8 etiquetas HTML que debe utilizar (y 5 para evitar)

Cómo escribir un código HTML más rápido

Generar HTML sobre la marcha

Cómo utilizar Emmet

Utilice Pug para contenido dinámico

Cómo - Artículos más populares

7 puntas principales para comenzar su propio negocio

Crea tu propio cepillo caligráfico en Illustrator

Pinte el arte expresivo de retratos con Artrage 5

Cómo crear ojos brillantes en pintura al óleo

Crea texto 3D en Photoshop: una guía paso a paso

Cómo transmitir sonido en una pintura

Pinte un retrato como los viejos maestros

Modelo Darth Vader en Zbrush

Categorías