Lección 2: Elementos básicos de texto en HTML
Encabezados
HTML proporciona seis niveles de encabezados, desde <h1> (el más importante) hasta <h6> (el menos importante). Los encabezados ayudan a estructurar el contenido y son importantes para la accesibilidad y el SEO.
<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>
Resultado visible:
Encabezado de nivel 1
Encabezado de nivel 2
Encabezado de nivel 3
Encabezado de nivel 4
Encabezado de nivel 5
Encabezado de nivel 6
Generalmente los encabezados gurdan relación con el tamaño del texto base (em), y además están en negrita, el h1 suele medir 2em (o lo que es lo mismo, es del doble del tamaño del texto base); el h2 1,5em; el h3 1,17em; el h4 1em o lo que es lo mismo es del mismo tamaño que el texto base, pero en negrita; el h5 de 0,83em; el h6 0,67em. Nota: Más adelante cuando veas estos números en CSS ten en cuenta que en el código se usa el . como separador decimal en lugar de la coma
Párrafos
En escritura, un párrafo es una unidad de texto que desarrolla una idea principal. En HTML, usamos la etiqueta <p> para definir párrafos. Los navegadores automáticamente añaden un espacio entre párrafos para mejorar la legibilidad.
Ejemplo de dos párrafos en HTML:
<p>Este es el primer párrafo. Contiene varias oraciones que desarrollan una idea principal.</p>
<p>Este es el segundo párrafo. Observa que hay un espacio entre este párrafo y el anterior.</p>
Resultado visible:
Este es el primer párrafo. Contiene varias oraciones que desarrollan una idea principal.
Este es el segundo párrafo. Observa que hay un espacio entre este párrafo y el anterior.
Énfasis y importancia en el texto
HTML ofrece etiquetas para dar significado semántico al texto, lo que no solo afecta su apariencia, sino que también comunica su importancia o énfasis:
<strong>: Para indicar fuerte importancia. Por defecto, los navegadores lo muestran en negrita.<em>: Para dar énfasis. Por defecto, los navegadores lo muestran en cursiva.
Ejemplo:
<p>Este texto contiene palabras de <strong>fuerte importancia</strong> y palabras con <em>énfasis</em>.</p>
Resultado visible:
Este texto contiene palabras de fuerte importancia y palabras con énfasis.
Es importante recordar que estas etiquetas se usan por su significado semántico, no solo por su apariencia visual. Esto ayuda a los lectores de pantalla y a los motores de búsqueda a entender mejor el contenido.
Otras formas de resaltar texto
Existen otras formas de resaltar texto en HTML, aunque se utilizan menos comúnmente:
<mark>: Para texto resaltado o marcado, como en un resultado de búsqueda.<small>: Para comentarios secundarios o "letra pequeña".
Ejemplo:
<p>Este texto contiene una parte <mark>resaltada</mark> y una parte en <small>letra pequeña</small>.</p>
Resultado visible:
Este texto contiene una parte resaltada y una parte en letra pequeña.
Recuerda que el uso de estas etiquetas debe basarse en el significado que quieres transmitir, no solo en la apariencia visual.
Saltos de línea y líneas horizontales
Para crear un salto de línea dentro de un párrafo, puedes usar la etiqueta <br>:
<p>Esta es la primera línea.<br>Esta es la segunda línea.</p>
Resultado visible:
Esta es la primera línea.
Esta es la segunda línea.
Para insertar una línea horizontal, puedes usar la etiqueta <hr>:
<p>Texto antes de la línea.</p>
<hr>
<p>Texto después de la línea.</p>
Resultado visible:
Texto antes de la línea.
Texto después de la línea.
Ejercicio práctico
Ahora, es tu turno de practicar. Crea un documento HTML que incluya:
- Un encabezado de nivel 1
- Dos párrafos
- Usa
<strong>y<em>en el primer párrafo - Usa
<mark>y<small>en el segundo párrafo - Un salto de línea dentro de uno de los párrafos
- Una línea horizontal entre los dos párrafos