Sangrar el código html: cómo y por qué

html HTML Html5

Si alguna vez te has preguntado, al programar en html, "¿por qué debo sangrar mi código HTML si finalmente funciona?" Estás en el lugar correcto: no solo te explicaremos por qué deberías hacerlo, ¡sino también cómo hacerlo mejor! En primer lugar, si el término sangría te resulta desconocido, repasemos brevemente qué significa y qué implica a nivel práctico.

Sangría significa insertar un espacio vacío dentro del código para que sea más comprensible y claro para cualquiera que lo lea.

Llevemos el concepto al extremo por un momento con fines explicativos: consideremos, como ejemplo, la descripción del curso Hackademy. ¿Qué pasaría si lo vieras escrito así?

Ha sido difícil leer todo, ¿verdad? Esto se debe a que si bien el texto ha sido escrito correctamente desde el punto de vista gramatical y léxico, no hemos establecido un interlineado correcto, y por eso lo vemos tan confuso y con las líneas pegadas. Corrigiendo el interlineado, el resultado sería diferente.

¿Cómo funciona el curso de Hackademy?
Hackademy es un curso online fulltime 4 días a la semana, en un aula virtual, con lecciones teóricas por la mañana y ejercicios prácticos por la tarde con tutores dedicados. Dentro del aula virtual es posible reunirse con los profesores e interactuar con los compañeros en cualquier momento. Todos los materiales están disponibles bajo demanda para dar la posibilidad de recuperar lecciones perdidas o profundizar en temas. Aprendes a programar escribiendo código en vivo, colaborando en equipo con el apoyo constante de profesores y utilizando los métodos de trabajo más solicitados por las empresas. Al finalizar el curso recibirás un diploma Accredible que certifica la finalización del curso y la habilidades adquiridas.

Mucho mejor, ¿verdad? Ahora el texto, que sin embargo sigue siendo el mismo que antes, es sin duda más comprensible para el usuario. Aunque exasperamos un poco el ejemplo, esto podría compararse con la diferencia entre leer un código mal sangrado y uno correctamente sangrado. Veámoslo mejor con un ejemplo en programación.

Cómo programar en html de manera correcta

<html>
<body>
<h2>Lista no ordenada</h2>
<ul>
<li>Cafe</li>
<li>Chocolate</li>
<li>Leche</li>
</ul>  
<h2>An Ordered HTML List</h2>
<ol>
<li>Cafe</li>
<li>Chocolate</li>
<li>Leche</li>
</ol> 
</body>
</html>

Tan simple como es este fragmento de código, se vuelve difícil de leer si se sangra incorrectamente, especialmente si también consideramos muchas otras líneas de código escritas de esta manera. Veamos cómo sería si tuviera una mejor sangría.

<html>
<body>

   <h2>Lista no ordenada</h2>
   <ul>
     <li>Cafe</li>
     <li>Chocolate</li>
     <li>Leche</li>
   </ul>  
   <h2>An Ordered HTML List</h2>
   <ol>
     <li>Cafe</li>
     <li>Chocolate</li>
     <li>Leche</li>
   </ol>

</body>
</html>

¡Así mejor! Incluso solo a primera vista, nuestro código resulta ya más limpio y ordenado que antes.

¿Qué herramientas puedo utilizar para sangrar?

Para optimizar la lectura de tu código, tienes a tu disposición, de forma muy sencilla, el poder mágico de la barra espaciadora. Con esto puedes espaciar y distanciar cada línea tanto como creas necesario. Sin embargo, para usar estándares de sangría se suele usar la tecla TAB, que distancia el código más que la barra espaciadora y más rápido. Cuando consideres que el código es lo suficientemente claro, tal vez al enviarlo para que lo revise un colega que pueda entenderlo fácilmente, ¡entonces puedes estar satisfecho!

¿Por qué dedicar tiempo a todo esto?

Bien, para responder a esta pregunta, podemos volver a los ejemplos anteriores. Si tuvieras dos textos frente a ti, cuyo contenido no conoces, a primera vista, ¿cuál estarías más tentado a leer? ¿El que tiene los escritos todos pegados o el que tiene los escritos bien espaciados? Seguro que el más ordenado es la mejor elección, cuesta entender lo que se escribe entre esas líneas tan confusas. En el campo de la programación informática, el discurso es el mismo. Si una persona que tiene que revisar tu código se encuentra con el equivalente al texto desordenado del que hablábamos antes, seguramente le costará entender lo que escribiste y si lo escribiste bien. Todo esto se traduce en una pérdida de tiempo para comprender la funcionalidad del código y una mayor probabilidad de error en la búsqueda de defectos durante la escritura. Si por el contrario leemos un código bien sangrado y ordenado, los tiempos de comprensión se reducirán drásticamente, ya que todo quedará más claro y será más fácil encontrar errores en él.

Conviértete en Desarrollador weben 6 meses

Descubre el bootcamp de programación Hackademy

Programa Completo