Cómo formatear una etiqueta HTML

Para mejorar la lectura del código, voy a enseñarte unas sencillas reglas para mejorar la legibilidad de tus documentos HTML. No son difíciles de aplicar y mejorarán enormemente el mantenimiento además de la comunicación dentro del equipo.

Reglas

• Si la etiqueta tiene 2 atributos o más, utiliza saltos de línea en cada atributo ocupe una línea individual.
• Tabula, o aplica espacios, a los atributos para que no queden alineados con la apertura de la etiqueta o el cierre.
• El carácter Mayor que (Greater than) debe estar a la altura de Menor que (Less than).
• Si una atributo posee 2 o más valores, se le aplicará la misma estructura que los atributos.
• En caso de ser un componente, estará acompañado de un comentario explicando cada clase o atributo modificador.
• Tabula el contenido si ocupa más de una línea u 80 caracteres.

Ejemplos

Sencillo con un input que puede cambiar su diseño dependiendo de su estado.

<!--
    Campo de e-mail

    Estados:
        "input--success" Diseño confirmando su correcto formato.
        "input--error" Diseño alertado de su incorrecto formato.
-->
<input
    id="campo-email"
    name="email"
    type="email"
    placeholder="ejemplo@correo.com"
    required
    class="
        input
        input--small
    "
>

Otro posible ejemplo con un navegador, siendo un componente, tipo migas de pan. Además es configurable por medio de unas clases.

<!--
    Navegador tipo migas de pan

    Estados:
        "breadcrumbs--slash" Separador tipo barra (/).
        "breadcrumbs--underscore" Separador tipo guión (-).
-->
<nav
    class="
        breadcrumbs
        breadcrumbs--slash
    "
    data-current-category="Deportivas"
>
    <ol>
        <li><a href="#">Ofertas</a></li>
        <li><a href="#">Hombre</a></li>
        <li><a href="#">Zapatillas</a></li>
        <li><a href="#">Deportivas</a></li>
    </ol>
</nav>

Por último, si existe más de una línea, puedes tomar la referencia de 80 caracteres como máximo, puedes crear saltos de línea para que el contenido no esté en la misma línea que las etiquetas de apertura y cierre.

<article class="warning">
    Cuando tome este medicamento y guardelo en un sitio oscuro. <strong>No consumir por niños menores de 6 años</strong>
</article>

Siguiendo estas sencillas reglas tendrás un HTML bien formateado, legible y descriptivo.