Las etiquetas de contenido en HTML son los bloques de construcción básicos que utilizamos para dar significado y estructura al texto y los medios de nuestra página web.
Ahora que ya tenemos nuestro archivo con la estructura base lista, necesitamos empezar a meter contenido dentro de la etiqueta <body> para que nuestra página deje de ser un triste lienzo en blanco.
Una página web, no deja de ser un documento estructurado. Tiene títulos, tiene párrafos, tiene listas, imágenes… La función de HTML es precisamente indicar al navegador, qué es cada cosa, para lo cuál las envolvemos en etiquetas.
En esta entrada vamos a ver las etiquetas más básicas y habituales que vais a utilizar el 90% del tiempo para darle formato a vuestro documento. 👇
Encabezados (Headings)
Los encabezados se utilizan para definir los títulos y subtítulos de nuestra página, creando una jerarquía visual y semántica.
En HTML disponemos de seis niveles de encabezados, que van desde el <h1> (el más importante y grande por defecto) hasta el <h6> (el menos importante).
<h1>Bienvenidos a mi flamante web</h1>
<h2>Sobre mí</h2>
<h3>Mis proyectos de robótica</h3>
<p>...</p>
<h2>Contacto</h2>
SEO y la accesibilidad: Solo debe haber un <h1> por cada página. Es el título principal del documento (como el titular de la portada de un periódico).
El resto de niveles (<h2>, <h3>…) los podéis usar tantas veces como queráis para estructurar el contenido.
Párrafos
La etiqueta <p> (de paragraph) se utiliza para definir bloques de texto normal. Es el “caballo de batalla” de cualquier página web, donde irá el grueso de vuestra información.
<p>Este es mi primer párrafo. Me encanta programar microcontroladores.</p>
<p>Este es otro párrafo distinto. El navegador añadirá automáticamente un pequeño margen
entre ambos para que sea legible.</p>
Algo muy curioso de HTML es que el navegador ignora los espacios en blanco adicionales y los saltos de línea que hagáis en vuestro editor de código.
Si escribís diez líneas seguidas separadas por un Enter, el navegador lo pintará todo en una sola línea infinita (lo cuál es un desastre para leer).
Enlaces
La etiqueta <a> (de anchor o ancla) es la que nos permite crear hipervínculos para saltar de una página a otra. Sin ella, Internet tal y como lo conocemos no existiría.
Para que un enlace funcione, no basta con poner la etiqueta; necesitamos usar el atributo href para indicarle al navegador a qué dirección o URL queremos ir al hacer clic.
<a href="https://www.luisllamas.es">mi web de favorita</a>
Si queréis que el enlace se abra en una pestaña nueva (para que el usuario no pierda vuestra página), podéis añadir el atributo target="_blank". Pero, en general, no hagsis eso.
Imágenes
Para mostrar gráficos o fotografías, utilizamos la etiqueta <img>. Esta etiqueta tiene una peculiaridad: es una etiqueta “vacía”, es decir, no tiene etiqueta de cierre </img>. Se abre y se cierra en sí misma.
Para que muestre algo, necesita obligatoriamente dos atributos:
- El
src(source o fuente): La ruta o URL de la imagen que queremos cargar. - El
alt(alternative text): Una descripción en texto de lo que se ve en la imagen.
<img src="foto-de-mi-perrito.jpg" alt="Un perrito muy simpático corriendo por el parque con una pelota">
No olvideis el atributo alt. Si por algún motivo la imagen no carga (porque el servidor falla o la conexión es lenta), el navegador mostrará este texto en su lugar.
Además, es muy importante para que las personas invidentes que usan lectores de pantalla sepan qué hay en la imagen.
