Debido a que la mayor parte de una página web suele ser texto, en HTML disponemos de múltiples etiquetas para cambiar el aspecto del texto como añadir saltos de línea, hacer separación de párrafos, crear titulares, resaltar partes del texto, etc.
Espacios en blanco y líneas nuevas
Una página web no muestra ni los saltos de línea ni los espacios en blanco extra que agreguemos en el código de forma normal.
Veamos como muestra la web los espacios en blanco y los saltos de línea, para ello crearemos un documento HTML con el siguiente contenido:
texto.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Texto en HTML</title>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa.
Aenean vulputate eleifend tellus. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus
mus.
Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis
enim.
</body>
</html>Resultado texto.html
Para poder añadir saltos de linea necesitamos incluir la etiqueta: <br> por cada salto de línea requerido.
Para añadir espacios en blanco extra debemos usar un carácter especial de HTML que inserta espacios en blanco, este símbolo especial de la web es el código: y tendremos que escribirlo en nuestro documento por cada espacio en blanco requerido.
Agregando estas marcas de HTML a nuestro texto de prueba anterior para insertar saltos de línea y espacios en blanco extra el texto quedará de la siguiente manera:
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa.<br>
<br>
Aenean vulputate eleifend tellus. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus
mus.<br>
<br>
Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis
enim.Aenean vulputate eleifend tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Antes de añadir las marcas de salto de línea y espacio el primer ejemplo en el navegador se ve todo el texto en una sola línea muy diferente a como lo escribimos dentro del editor, mientras que ahora apoyándonos de <br> y logramos hacer que el texto tenga un aspecto más parecido al que tenemos en el editor.
Para poder mejorar la legibilidad de nuestro texto no basta solo con usar saltos de línea y caracteres de espacio, debemos también que estructurar nuestro contenido en párrafos y secciones.
Formato en bloque
Para realizar las operaciones de formateo de texto en HTML tendremos principalmente dos tipos de etiquetas, las etiquetas de formato en línea y las de formato en bloque.
Los elementos de formato en bloque son aquellos que al ser mostrados, el navegador les añade un salto de línea.
Párrafos
Para estructurar nuestro texto en diferentes párrafos tenemos la etiqueta <p> que con su correspondiente etiqueta de cierre </p> delimitaran el inicio y fin de la sección, añadiendo un salto de línea al final.
La mayoría de las veces los navegadores también mostraran un margen entre los párrafos y los demás elementos.
<p>Lorem ipsum dolor sit amet</p>
<p>Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
quis enim.</p>
<p>Aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae,
justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
elementum.</p>Lorem ipsum dolor sit amet
Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum.
Titulares
Para crear una estructura compleja no basta solo con párrafos, nuestro contenido debe contar también con titulares que separen una sección de otra.
Para delimitar los titulares HTML nos ofrece las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, con sus respectivas etiquetas de cierre, generando 6 tipos de titulares cada uno con un tamaño de fuente y jerarquías diferentes.
<h1>Esto es un titular h1</h1>
<h2>Esto es un titular h2</h2>
<h3>Esto es un titular h3</h3>
<h4>Esto es un titular h4</h4>
<h5>Esto es un titular h5</h5>
<h6>Esto es un titular h6</h6>Esto es un titular h1
Esto es un titular h2
Esto es un titular h3
Esto es un titular h4
Esto es un titular h5
Esto es un titular h6
Formato en línea
Si usas programas de procesamiento de texto estarás familiarizado con el formato de texto en linea: letra en negrita, cursiva, subrayada, etc.
Estas son solo algunas de las opciones de formato de texto en línea que también podemos lograr con HTML.
A estas opciones se les llama elementos en línea ya que solo delimitan una porción del texto y no añaden saltos de línea que rompen el flujo de este.
Opciones básicas de formato en línea:
- <strong> - Texto en negrita
- <em> - Texto en cursiva
- <ins> - Texto subrayado
- <del> - Texto tachado
- <sub> - Subindice
- <sup> - Supindice
<p>En este párrafo tenemos <strong>negritas</strong>, <em>cursivas</em>, y <ins>texto subrayado</ins>.</p>
<p><del>Este párrafo está totalmente tachado.</del></p>
<p>En este otro párrafo tenemos fórmulas físicas como E<sub>c</sub>=1/2mv<sup>2</sup> y químicas como H<sub>2</sub>SO<sub>4</sub></p>En este párrafo tenemos negritas, cursivas, y texto subrayado.
Este párrafo está totalmente tachado.
En este otro párrafo tenemos fórmulas físicas como Ec=1/2mv2 y químicas como H2SO4
Ulises Rendón
