Elementos de texto en HTML

Los elementos de texto en HTML son fundamentales para estructurar y presentar contenido en una página web. Estos elementos permiten definir encabezados, párrafos, citas, formato de texto y más. En esta lección, exploraremos los principales elementos de texto que todo desarrollador web debe conocer.

1. Encabezados (Headings)

Los encabezados se utilizan para definir títulos y subtítulos. HTML cuenta con seis niveles de encabezados, desde h1 hasta h6, donde representa el encabezado de mayor importancia y el de menor.

Ejemplo:

<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Encabezado de nivel 3</h3>

Características y uso

• Importancia jerárquica: Los títulos ayudan a establecer una jerarquía visual y semántica en el contenido. Los motores de búsqueda también utilizan esta jerarquía para comprender la estructura de la página.
• Tamaño y estilo: Por defecto, los títulos <h1> son los más grandes y los <h6> los más pequeños. Sin embargo, el tamaño y el estilo de los títulos se pueden modificar con CSS.
• Estructura del contenido: Los títulos deben utilizarse para organizar el contenido en secciones lógicas y coherentes.
• SEO (Optimización para motores de búsqueda): Los títulos desempeñan un papel importante en el SEO, ya que ayudan a los motores de búsqueda a comprender el tema y la relevancia del contenido.

2. Párrafos (Paragraphs)

El elemento se utiliza para crear párrafos de texto.

Ejemplo

<p>El elemento p se utiliza para crear párrafos de texto.</p>

3. Énfasis y formato de texto

Existen varios elementos para dar formato al texto:

• : Da un énfasis fuerte (negrita).
• : Aplica énfasis (cursiva).
• : Texto en negrita sin enfatizar.
• : Texto en cursiva sin enfatizar.
• : Subrayado.

Ejemplo:

<p><strong>Ejemplo.</strong></p>
<p>Este es un texto <strong>importante</strong> y <em>enfatizado</em>.</p>  
<p><span style="text-decoration: line-through;">texto tachado</span> </p> 
<p><span style="text-decoration: underline;">texto subrayado</span> </p> 
<p><i style="text-emphasis: 100">texto en cursiva</i> </p>

4. Citas y referencias

Para citas en línea usa la etiqueta cite mientras que para realizar citas de autores usa la etiqueta blockquote.

<div>
<blockquote>Cita extensa o bloque de texto citado.</blockquote>
<p>Según , "En un lugar de la Mancha..."</p>
</div>
<div><cite>El Quijote</cite></div>

Ejemplo

5. Listas

Las listas son una forma fundamental de organizar información en HTML. Existen dos tipos principales:

• Listas ordenadas (<ol>): Se utilizan cuando el orden de los elementos es importante.
• Listas desordenadas (<ul>): Se utilizan cuando el orden de los elementos no es relevante.

Listas ordenadas (<ol>)

• La etiqueta <ol> define una lista ordenada.
• Los elementos de la lista se enumeran secuencialmente (1, 2, 3, etc.).
• Cada elemento de la lista se define con la etiqueta <li> (list item).
• Atributos del elemento
  :
  • type: Especifica el tipo de marcadores de lista.
    • “1” (predeterminado): números.
    • “A”: letras mayúsculas.
    • “a”: letras minúsculas.
    • “I”: números romanos en mayúsculas.
    • “i”: números romanos en minúsculas.
  • start: Especifica el valor inicial de la lista.
  • reversed: Especifica que la lista debe mostrarse en orden descendente.

<div>
<h2>Listas ordenadas</h2>
<ol type="A" start="3">
                <li>Elemento 1</li>
                <li>Elemento 2</li>
            <li>Elemento 3</li>
</ol>
</div>
 <div>
       <h2>Listas sin orden</h2>
       <ul>
                <li>Elemento A</li>
                <li>Elemento B</li>
                <li>Elemento C</li>
        </ul>
</div>

Visualización del ejemplo

6. Alineación de texto

La alineación de texto en HTML se realiza principalmente a través de CSS (Cascading Style Sheets), ya que HTML se encarga de la estructura y CSS del estilo. Aunque existían atributos HTML para la alineación, estos están obsoletos y se considera una mala práctica usarlos.

Aquí te explico las formas correctas de alinear texto en HTML usando CSS:

Propiedad text-align:

Esta es la propiedad CSS principal para alinear texto horizontalmente.

Valores posibles:

left: Alinea el texto a la izquierda (valor predeterminado).

right: Alinea el texto a la derecha.

center: Centra el texto.

justify: Justifica el texto, distribuyendo el espacio entre palabras para que los bordes izquierdo y derecho estén alineados.

<style>
            .izquierda {
              text-align: left;
            }
            
            .centrado {
              text-align: center;
            }
            
            .derecha {
              text-align: right;
            }
            
            .justificado {
              text-align: justify;
            }
</style>
<div>
            <h2>La alineación de texto</h2>
            <p class="izquierda">Este texto está alineado a la izquierda.</p>
            <p class="centrado">Este texto está centrado.</p>
            <p class="derecha">Este texto está alineado a la derecha.</p>
            <p class="justificado">Este es un párrafo justificado. La justificación del texto hace que 
                cada línea se extienda hasta los márgenes izquierdo y derecho del contenedor,
                creando una apariencia uniforme y profesional.</p>
 </div>

Visualización del ejemplo