¿Qué es una sangría HTML?

Una sangría de lenguaje de marcado de hipertexto (HTML) es una etiqueta o una propiedad de hoja de estilo en cascada (CSS) que hace que uno o más elementos visuales de una página web se muevan a cierta distancia del margen de su bloque delimitador. El efecto de usar una sangría HTML es el mismo que usar sangrías en la impresión. La forma más aceptada de insertar una sangría en un documento HTML es utilizar CSS para cambiar la propiedad de sangría de texto del párrafo que contiene el texto. Algunas declaraciones de formato, como listas y citas en bloque, sangran automáticamente su contenido para diferenciarlos del texto circundante. El uso de CSS para insertar una sangría HTML solo funciona en la primera línea del párrafo y no funcionará en un bloque completo, lo que se puede lograr con diferentes propiedades de formato.

La forma en que funciona el estándar HTML, los espacios múltiples y el carácter de tabulación que se usa en la mayoría de las computadoras para crear sangrías se eliminan de los archivos antes de analizar el código para mostrarlo. Esto significa que el texto que aparece formateado en un procesador de texto no mantendrá ese formato si se pega directamente en un documento HTML, a menos que el texto se pegue en un programa de edición HTML de lo que ves es lo que obtienes (WYSIWYG). Para tener una sangría para la primera línea de un párrafo, o para sangrar un bloque de texto completo, se debe usar código HTML y CSS especial.

La propiedad de sangría de texto de los elementos a nivel de bloque en CSS aplicará sangría al primer elemento renderizado sin formato de un bloque. La cantidad de sangría debe especificarse numéricamente. La opción permite al usuario especificar un número que le dice al navegador cuántos píxeles, puntos, centímetros u otras formas de medición se deben sangrar la línea. Este número también puede ser un porcentaje del ancho total del bloque. Esta opción de CSS solo funciona a nivel de bloque, solo aplica sangría a la primera línea y no funcionará en elementos que ya tengan un tipo de comportamiento de formato predefinido, como listas con viñetas.

Una sangría HTML colgante es lo opuesto a una sangría estándar y arrastrará la primera línea de un bloque hacia atrás para que se represente a la izquierda del resto de las líneas del párrafo cuando el texto se alinea para la lectura de izquierda a derecha. La misma propiedad de sangría de texto se usa para una sangría HTML colgante, excepto que el número de la cantidad de sangría es negativo. Este método solo funciona si los valores de margen y borde de un bloque son lo suficientemente grandes como para contener la sangría francesa.

Es posible definir una sangría HTML que mueva un bloque o párrafo completo. Esto se puede hacer con varias propiedades CSS a nivel de bloque, incluida la modificación de los márgenes o el espaciado del bloque contenedor más profundo en una página. También se puede lograr con etiquetas HTML básicas como blockquote o pre, que significa texto preformateado. El inconveniente de utilizar etiquetas básicas para crear una sangría HTML es que la cantidad de texto que se moverá no se puede controlar ni establecer explícitamente.