¿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 en una página web se muevan una cierta distancia desde el margen de su bloque de límite. 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 usar CSS para cambiar la propiedad de sangría de texto del párrafo que contiene el texto. Algunas declaraciones de formato, como listas y comillas en bloque, sangran automáticamente sus contenidos 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 muescas se eliminan de los archivos antes de analizar el código para que se muestre. 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 (WYSIWYG). Para tener una sangría para la primera línea de un párrafo, o para sangrar un bloque completo de texto, se debe usar un código HTML y CSS especial.

La propiedad de sangría de texto de los elementos de nivel de bloque en CSS sangrará el primer elemento renderizado sin formato en un bloque. El importe de la sangría debe especificarse numéricamente. La opción permite al usuario especificar un número que le indica al navegador cuántos píxeles, puntos, centímetros u otras formas de medición debe sangrar la línea. Este número también puede ser un porcentaje del ancho total del bloque. Esta opción CSS solo funciona en un nivel de bloque, solo sangra la primera línea y no funcionará en elementos que ya tienen un tipo de comportamiento de formato predefinido, como las 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 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 colgante.

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 espacio 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 usar etiquetas básicas para crear una sangría HTML es que la cantidad que se debe mover el texto no se puede controlar ni establecer explícitamente.