Hay varias maneras de agregar sangrías en HTML antes de un texto. Pero para asegurar compatibilidad con diferentes navegadores y accesibilidad, revisaremos los métodos más populares:
Método recomendado en CSS y HTML
Para sangrar texto o párrafos, lo mejor es usar CSS. Aquí hay ejemplos de cómo sangrar texto usando hojas de estilo en cascada. Inserta cada uno de los ejemplos de código entre las etiquetas HTML <head></head>.
Este código crea una clase CSS “tab” que sangra el texto y el párrafo 40 píxeles desde el margen izquierdo:
<style><br><!--<br>.tab { margin-left: 40px; }<br>--><br></style>Después de insertar el código anterior en la sección <head>, puedes usarlo en cualquier parte agregándolo a las etiquetas de párrafo (<p>), como se muestra a continuación:
<p class="tab">Ejemplo de tabulación</p>Si planeas usar este estilo en varias páginas, es mejor crear un archivo .css y enlazarlo a todas las páginas web. Para agregar una sangría en HTML, agrega la siguiente línea entre las etiquetas <head> y crea un enlace al archivo. Lo hemos llamado “basic.css”:
<link rel="stylesheet" type="text/css" href="http://www.example.com/basic.css">Una vez creado el archivo de hojas de estilo en cascada, ábrelo para editarlo y agrega el mismo código, excepto la etiqueta <style> y las etiquetas de comentario, como se muestra a continuación:
.tab { margin-left: 40px; }Una vez completados estos pasos, puedes sangrar cualquier texto usando el mismo <p class="tab"> mostrado arriba.
Hay otras opciones. Por ejemplo, si necesitas sangrar solo la primera línea de un párrafo, usa el siguiente código:
.tab { text-indent:40px }Consejo: Puedes establecer el tamaño de la sangría en porcentaje. Por ejemplo, en lugar de sangrar 40 píxeles, puedes sangrar las líneas en un 5% de su posición actual. También puedes usar un espacio largo para definir el ancho deseado.
Consejo adicional: Para cambiar la sangría izquierda a derecha, cambia la propiedad margin-left por margin-right.
Método recomendado en HTML
Puedes lograr los mismos resultados usando estilos integrados en el código HTML. Aunque usar CSS facilita la administración de varias páginas web, si solo vas a usar el estilo una vez:
<p style="margin-left: 40px">Este texto tiene sangría.</p>Aquí, todo el texto del párrafo se sangra 40 píxeles hacia la izquierda. Otros párrafos <p> no se verán afectados.
<p style="text-indent: 40px">Este texto tiene sangría.</p>Y aquí, solo la primera línea del párrafo se sangra 40 píxeles hacia la izquierda. Ninguna línea adicional se verá afectada.
Consejo: Puedes establecer la sangría usando porcentajes. Por ejemplo, en lugar de sangrar 40 píxeles, puedes reemplazar el valor por 5% para sangrar el texto en un 5%.
Consejo adicional: Puedes cambiar la sangría izquierda a derecha cambiando la propiedad margin-left por margin-right.
Método alternativo
Otro método común para crear sangrías de texto en HTML es usar <blockquote>, como se muestra a continuación.
Aunque es mucho más fácil, hay problemas de compatibilidad que pueden surgir al usar esta solución. Esta etiqueta está destinada a citas, no a sangrías:
<blockquote>Esta línea tendrá sangría.</blockquote>
Quiero comentar algo