Etiquetas HTML básicas: encabezados, párrafos, enlaces, imágenes

1. Encabezados

HTML ofrece muchas etiquetas para formatear y estructurar contenido de texto, imágenes, enlaces y listas. Las etiquetas HTML básicas permiten crear una página fácil de leer y estructurada lógicamente, que se vea atractiva y cómoda de usar. Vamos a revisar las etiquetas básicas más populares y su propósito.

Los encabezados (o header) se utilizan para marcar diferentes niveles de encabezados en la página. HTML ofrece seis niveles de encabezados — desde <h1> hasta <h6>, donde <h1> es el encabezado más grande e importante, y <h6> es el más pequeño.

                      
                        <h1>Encabezado principal de la página</h1>
                        <h2>Subtítulo de primer nivel</h2>
                        <h3>Subtítulo de segundo nivel</h3>
                        ...
                        <h6>El encabezado más pequeño</h6>
                      
                    

El uso de encabezados ayuda a estructurar la información en texto, además de mejorar el SEO (optimización para motores de búsqueda), ya que los motores de búsqueda tienen en cuenta los encabezados al analizar el contenido de la página.

2. Formateo de texto

Para formatear texto, HTML ofrece varias etiquetas sencillas pero potentes.

Párrafos

Ya que conocemos los encabezados, ahora vamos a enfocarnos en el texto. Los párrafos en HTML se crean usando la etiqueta <p>. Es como en tus editores de texto favoritos, donde presionas "Enter" para empezar un nuevo párrafo. Aquí tienes un ejemplo:

<p>Este es el primer párrafo en nuestra página, y te contará un poco más sobre nuestro tema.</p>
<p>Y este ya es el segundo párrafo, porque a veces "uno" no es suficiente para expresar todas las ideas.</p>

Bloques de texto

No olvidemos a <span> y <div>. <span> son tus ayudantes discretos para estilizar fragmentos de texto en el código HTML, mientras que <div> es el verdadero campeón para crear bloques y contenedores.

<div>¡Este bloque puede contener muchas cosas interesantes!</div>
<span>Y este texto puede destacarse por color o fuente.</span>

Texto en negrita

Texto con negrita — <b>: La etiqueta <b> resalta el texto en negrita. Esta etiqueta se usa a menudo para enfatizar palabras o frases importantes.

              
                <p>Este es un <b>texto importante</b> que llama la atención.</p>
              
            

Texto en cursiva

Cursiva — <i>: La etiqueta <i> pone el texto en cursiva. Es ideal para destacar citas, palabras extranjeras u otros elementos que necesitan énfasis.

              
                <p>Este es un texto en cursiva: <i>ejemplo de texto en cursiva</i>.</p>
              
            

3. Imágenes

Para añadir imágenes a la página, se utiliza la etiqueta <img>. Esta etiqueta es singular, y para que funcione, es necesario especificar la ruta de la imagen usando el atributo src. También es importante añadir una descripción de la imagen con el atributo alt (texto alternativo) para que los usuarios con discapacidades o problemas al cargar la imagen puedan entender lo que debería mostrarse.

<img src="image.jpg" alt="Descripción de la imagen">

Otros atributos útiles de <img>:

• width — el ancho de la imagen (ejemplo: width="200").
• height — la altura de la imagen (ejemplo: height="150").

Ejemplo con atributos width y height:

  <img src="http://google.com/image.jpg" alt="Descripción de la imagen" width="200" height="150">