Conexión legislativa

En esta Unidad de Trabajo nos centraremos en:

Introducción

HTML (HyperText Markup Language) es el lenguaje de marcas más conocido y utilizado para la estructuración de contenidos en la World Wide Web (WWW). Se trata de un lenguaje de marcas presentacional. Es decir: junto con el texto, incorpora etiquetas que ayudan a componer un documento web: encabezados, párrafos, imágenes, tablas, formularios... aportando, incluso, algo de carga semántica para indicar a las herramientas de accesibilidad y motores de búsqueda el significado de cada parte del documento.

Desde su propuesta por Tim Berners-Lee a principios de los 90, HTML ha evolucionado a través de distintas versiones coordinadas por organismos de estandarización como el W3C y el WHATWG. Esta evolución culminó con el estándar HTML5, que consolida un principio clave en el desarrollo web actual: la separación estricta entre estructura semántica (HTML) y presentación visual (CSS). Mientras HTML construye el esqueleto del documento, las hojas de estilo en cascada (CSS) asumen la apariencia, el diseño y la adaptabilidad a distintas pantallas.

Fuente: Getty Images

A diferencia de los lenguajes de intercambio de datos procesados exclusivamente por máquinas (como XML o JSON), HTML está diseñado para estructurar información orientada al consumo humano. Sin embargo, su propósito no es de naturaleza estética, sino semántica y estructural:

• Estructura y Semántica (HTML): define el significado y la función de cada elemento del documento (encabezados, párrafos, listas, tablas o formularios) para que los navegadores, buscadores y lectores de pantalla comprendan qué es cada contenido.
• Presentación y Estética (CSS): asume el control visual del documento (colores, tipografías, maquetación y adaptabilidad a pantallas).

Fuente: Pinterest

A lo largo de su evolución, el estándar se ha regido por una premisa fundamental conocida en la comunidad de estandarización como "Don't break the web" (No rompas la web). Este principio garantiza la retrocompatibilidad: ningún cambio o actualización en las especificaciones de HTML debe hacer que las páginas web antiguas dejen de funcionar en los navegadores actuales. Sin embargo, esta "permisividad técnica" no significa que todo valga a la hora de escribir código web. Para garantizar la interoperabilidad entre navegadores, la accesibilidad universal y el mantenimiento sostenible a largo plazo, los desarrolladores nos apoyamos en herramientas de edición y procesos estrictos de validación de sintaxis.

Sintaxis básica de HTML

Un documento HTML5 está compuesto por elementos estructurados de forma jerárquica. Para construir y manipular estos elementos correctamente, es necesario conocer sus componentes fundamentales: etiquetas, atributos y las reglas de anidamiento.

Elementos, Etiquetas y Atributos

La mayoría de elementos en HTML cuentan con una etiqueta de apertura, un contenido y una etiqueta de cierre.

<nombre_etiqueta atributo="valor">Contenido</nombre_etiqueta>
<p class="destacado">Párrafo de ejemplo</p>

• Etiqueta de apertura (<p ...>): señala el inicio del elemento e incluye atributos.
• Atributos (class="destacado"): modificadores que aportan información adicional, comportamiento o metadatos al elemento. Siempre se sitúan en la etiqueta de apertura con la sintaxis nombre="valor".
• Contenido (Párrafo de ejemplo): texto u otros elementos anidados que forman el cuerpo del elemento.
• Etiqueta de cierre (</p>): marca el final del elemento mediante la barra inclinada /.

También existen elementos que no tienen contenido, por lo que no tienen etiqueta de cierre. Tal y como hemos visto, estos pueden representarse como una etiqueta de cierre pero con la barra inclinada a la derecha del nombre de la etiqueta (<elemento_vacio/>). Sin embargo, desde HTML5, no es necesario ponerla.

<img src="logo.png" alt="Logotipo">
<br>
<hr>
<input type="text" name="nombre">

Atributos Globales

Existen atributos que son propios de los elementos. Por ejemplo: el atributo src de un elemento img no se puede utilizar en otros elementos. Sin embargo, existen otros atributos que pueden aplicarse a cualquier elemento HTML, independientemente de su finalidad o tipo de contenido. Estos son los atributos globales. Entre los atributos globales más relevantes destacan:

• id: asigna un identificador único al elemento dentro de todo el documento. No puede haber dos elementos con el mismo id en la misma página web. Es fundamental para crear enlaces internos, asociar etiquetas de formulario y aplicar reglas de estilo o scripts muy específicos.
• class: asigna una o varias clases (separadas por espacios) al elemento. A diferencia del id, la clase puede reutilizarse en múltiples elementos de la página. Es la vía principal para aplicar estilos CSS estructurados.
• style: permite definir reglas de estilo CSS directamente sobre el elemento (estilos en línea). Aunque es válido, su uso está desaconsejado porque vulnera el principio de separación entre contenido y presentación.
• title: proporciona información adicional sobre el elemento. La mayoría de los navegadores muestran su valor como un pequeño cuadro emergente (tooltip) al pasar el cursor por encima.
• lang: especifica el idioma del contenido del elemento (por ejemplo, lang="es" o lang="en"). Ayuda a los motores de búsqueda y a los lectores de pantalla a utilizar la pronunciación adecuada.
• hidden: atributo booleano que indica que el elemento no es relevante en el estado actual de la página, por lo que el navegador no lo renderiza visualmente.

Los atributos id y class los usaremos mucho con CSS y JavaScript

Estructura básica de un documento HTML

Un documento HTML es un documento de texto con etiquetas anidadas de manera jerárquica en forma de árbol. Esta jerarquía es muy típica de los lenguajes de marcas derivados de SGML y cumple con unas propiedades básicas:

• Solamente tiene 1 elemento raíz.
• Cada elemento tiene 1 único padre.
• Los elementos se cierran en orden contrario al de apertura, evitando que se solapen.

Ejemplo válido:

<elemento_nivel1>
	<elemento_nivel2>
		<elemento_nivel3>
			Contenido
		</elemento_nivel3>
	</elemento_nivel2>
</elemento_nivel1>

Ejemplo no válido:

<elemento_nivel1>
	<elemento_nivel2>
		<elemento_nivel3>
			Contenido
	</elemento_nivel2>
		</elemento_nivel3>
</elemento_nivel1>

En el caso de HTML, a esta estructura se la conoce como DOM (Document Object Model). Todos los elementos válidos derivan de un nodo raíz principal html y se divide en 2 grandes bloques:

• La cabecera head, que contiene información no visible para el usuario.
• El cuerpo body, que alberga el contenido que se renderiza en la pantalla.

Mientras que un documento HTML se considera estático, el DOM es dinámico, y aprenderemos a modificarlo con JavaScript más adelante.

Secciones fundamentales

La estructura básica de un documento HTML es la siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estructura básica de un documento HTML</title>
</head>
<body>
    <h1>Bienvenido a LMSGI</h1>
    <p>Este es el cuerpo del documento, donde reside el contenido visible.</p>
</body>
</html>

La declaración !DOCTYPE html

Ubicada, obligatoriamente, en la primera línea del archivo, antes del nodo raíz html. No es una etiqueta de HTML en sí misma, sino una instrucción (o directiva) enviada al navegador. Su función es informar al navegador para que elija el motor de renderizado adecuado.

Desde HTML5 basta poner <!DOCTYPE html>, que activa el "modo estándar", pero pueden ponerse otros valores, como:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">

Esto no es recomendable a día de hoy, ya que en la actualidad, todos los estándares y la industria se rigen por el principio de HTML como un estándar vivo (HTML Living Standard), gestionado por el WHATWG. Usar la declaración simplificada <!DOCTYPE html> es la única vía recomendada.

El elemento raíz html

Es el nodo raíz de un documento HTML y envuelve a todos los demás elementos (excepto a la directiva DOCTYPE).

Es muy habitual rellenar el atributo global lang a nivel del elemento html para facilitar que herramientas de asistencia (como lectores de pantalla para personas con discapacidad visual) reconozcan el idioma del documento y utilicen la síntesis de voz y pronunciación adecuadas. También ayuda a los motores de búsqueda a indexar la página según el idioma (SEO) y facilita la traducción automática del navegador.

<html lang="es">
    <!-- Contenido del documento -->
</html>

Muchos navegadores incorporan por defecto extensiones de traducción de páginas webs. Para ello, necesitan identificar el idioma de origen y buscan el atributo lang del elemento raíz html. Si detectan que el documento está marcado con un idioma diferente al idioma por defecto del navegador, la extensión activará automáticamente el aviso emergente preguntando si deseas traducir el contenido de la página.

La cabecera del documento, head

El elemento head actúa como un contenedor de metainformación de todo el documento. Los contenidos que pongamos aquí no se renderizan directamente en la ventana del navegador, pero es fundamental para la configuración del documento, la optimización en motores de búsqueda (SEO) y la vinculación del documento con recursos externos

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LMSGI - UT02</title>
    <link rel="stylesheet" href="estilos.css">
</head>

Los elementos más importantes de head son los siguientes:

• <meta charset="UTF-8">: especifica la codificación de caracteres. La norma UTF-8 garantiza que el navegador interprete y muestre correctamente caracteres del idioma español como tildes, la letra "ñ", diéresis o símbolos especiales, evitando problemas de interpretación.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: directiva indispensable para el diseño adaptativo (Responsive Web Design). Le indica al navegador en dispositivos móviles que ajuste el área de visualización (viewport) al ancho real de la pantalla con una escala inicial del 100%. Si no ponemos esta directiva, el móvil comprimirá de forma artificial toda la página para que quepa en la pantalla pequeña, haciendo que los textos se vean extremadamente diminutos, las imágenes diminutas y los enlaces casi imposibles de pulsar, obligando al usuario a hacer zoom manual constantemente para poder leer e interactuar con el sitio web.
• <title>: define el título del documento. Aparece en la pestaña del navegador, al guardar la página en marcadores/favoritos y como titular principal en los resultados de búsqueda de Google.
• <link>: permite enlazar recursos externos al documento HTML. Su uso principal es la vinculación de hojas de estilo CSS externas (<link rel="stylesheet" href="estilos.css">) o el icono de la pestaña (favicon).

<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="us-ascii">
   <title>Prueba de Codificación ASCII</title>
</head>
<body>
   <h1>Prueba con codificación US-ASCII</h1>
   <p>Texto sin caracteres especiales: Hello World! 123</p>
   <p>Texto con caracteres especiales: cañón, camión, cigüeña, ¿funciona?</p>
</body>
</html>

Las olvidadas keywords

A finales de los 90 había una etiqueta fundamental para los motores de búsqueda:

<meta name="keywords" content="...">

Esta permitía a los desarrolladores indicar explícitamente sobre qué trataba su página, pero se hizo un muy mal uso de esta. Muchas webs empezaron a introducir palabras clave irrelevantes para alterar los resultados de búsqueda, por lo que su fiabilidad cayó en picado.

Desde el año 2009, Google las ignora por completo, y otros buscadores como Bing incluso penalizan su uso desmesurado, penalizando el posicionamiento.

Podemos simular cómo se vería nuestra web al ser listada por un motor de búsqueda como Google utilizando aplicaciones de SERP Simulator como Mangools o SISTRIX.

Redes sociales y aplicaciones de mensajería

Las etiquetas Open Graph (OG) son elementos indispensables en el <head> moderno para controlar cómo se genera la vista previa (link preview) cuando un usuario comparte la URL de nuestro sitio web en redes sociales (LinkedIn, Facebook, X) o aplicaciones de mensajería instantánea (Telegram, WhatsApp, Discord).

Sin estas etiquetas, la plataforma intentará adivinar el contenido escogiendo imágenes o textos aleatorios del documento, ofreciendo con frecuencia un resultado poco profesional.

Protocolo Open Graph (OG)

Desarrollado originalmente por Facebook y adoptado como estándar universal por la gran mayoría de plataformas (incluyendo WhatsApp, Telegram y Discord). Utiliza el atributo property="og:*":

• <meta property="og:site_name" content="...">: el nombre global del sitio web o marca al que pertenece el documento (por ejemplo, "El País", "Wikipedia" o "Apuntes LMSGI").
• <meta property="og:title" content="...">: el titular principal que se mostrará en la tarjeta de vista previa.
• <meta property="og:description" content="...">: un extracto o resumen conciso del contenido (idealmente entre 150 y 200 caracteres).
• <meta property="og:image" content="...">: la imagen destacada del enlace.
• <meta property="og:url" content="...">: la URL canónica y definitiva del recurso.
• <meta property="og:type" content="website">: el tipo de recurso que se comparte (por ejemplo: website, article, profile, video.movie).

Ejemplo de uso:

<meta property="og:site_name" content="IML Digital Garden">
<meta property="og:title" content="UT02 - Lenguajes de Marcas para Entornos Web">
<meta property="og:description" content="Apuntes prácticos sobre la estructura global del documento HTML5 para estudiantes de DAW.">
<meta property="og:image" content="https://dg.nplanck.dev/img/optimized/0anTmED32t-700.webp">
<meta property="og:url" content="https://dg.nplanck.dev/lmsgi/ut02">
<meta property="og:type" content="article">

Podemos verificar cómo se vería usando aplicaciones como OGPreview.io.

El cuerpo del documento, body

El elemento <body> representa el nodo contenedor de todo el contenido visible e interactivo del documento HTML. Todos los elementos que el usuario observa en pantalla (textos, imágenes, enlaces, listas, tablas, formularios y recursos multimedia) residen dentro de esta sección.

A partir de HTML5, la maquetación del cuerpo dejó de basarse en la división genérica e inexpresiva mediante bloques semánticamente neutros (<div id="cabecera">, <div class="pie">) para adoptar etiquetas semánticas de estructuración.

Por otro lado, poco a poco se han abandonado los elementos puramente de presentación o estilo típicos como <center> o <font>, los cuales están obsoletos y se desaconsejan. La regla fundamental del desarrollo web moderno es que la presentación visual se debe gestionar de manera exclusiva mediante hojas de estilo en cascada (CSS), dejando HTML exclusivamente para estructuración y semántica.

Elementos de texto y párrafo

La mayor parte del contenido de una página web es texto, y este debe estar contenido en algún elemento. Aunque HTML permite escribir texto "a pelo", sin que forme parte del valor de ningún elemento, esto no es recomendable. Es malo para el SEO, para la accesibilidad web y dificulta mucho aplicarle estilos más adelante.

En esta sección encontraremos elementos cuya anidación no está permitida. Por ejemplo, no podemos poner un elemento p dentro de un elemento h1 ni lo contrario. Sin embargo, existen otros que sí tiene sentido anidar dentro de p, como br o strong.

Párrafos de texto

<p>
paragraph

La norma HTML estándar establece que el texto de la página debe estar contenido dentro de un elemento. Es decir, no se puede poner texto directamente dentro de la etiqueta body; ha de haber un contenedor para ese texto. Es el elemento básico para bloques de texto. No tiene una representación gráfica especial, pero es preferible introducir el texto que forme parte de un párrafo dentro de este elemento.

El navegador web colapsará los espacios dobles y los saltos de línea del texto, incluyendo los del elemento <p>.

<p>Este es un párrafo de texto en HTML.
Los saltos de línea y múltiples                  espacios seguidos 
dentro del código fuente son colapsados 
a un único espacio por el navegador.</p>

Se muestra de la siguiente manera:

Encabezados: jerarquía

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
header

Los elementos de encabezado definen la estructura y la jerarquía de los contenidos dentro del documento. HTML proporciona seis niveles de encabezado, desde <h1> hasta <h6>:

• <h1>: representa el encabezado de mayor nivel o título principal de la página. Debe utilizarse con moderación (idealmente un único <h1> por documento) para definir el tema central. Es un elemento fundamental para el SEO y la accesibilidad.
• <h2>: títulos de las secciones principales dentro del documento.
• <h3>: subsecciones pertenecientes a un bloque <h2>.
• <h4> - <h6>: niveles de jerarquía secundarios y profundamente anidados.

<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>

Se muestra de la siguiente manera:

<!doctype html>
<html lang="es">
 <head>
   <meta charset="utf-8" />
   <title>Currículo DAW</title>
 </head>
 <body>
   <h1>Desarrollo de Aplicaciones Web</h1>
   <h2>Primer Curso</h2>
   <h3>Programación</h3>
   <h3>Bases de Datos</h3>
   <h3>Sistemas Informáticos</h3>
   <h3>Lenguajes de Marcas y Sistemas de Gestión de la Información</h3>
   <h3>Itinerario Personal para la Empleabilidad I</h3>
   <h3>Inglés Profesional</h3>
   <h3>Digitalización aplicada a los sectores productivos</h3>
   <h2>Segundo Curso</h2>
   <h3>Desarrollo Web en Entorno Servidor</h3>
   <h3>Desarrollo Web en Entorno Cliente</h3>
   <h3>Diseño de Interfaces Web</h3>
   <h3>Despliegue de Aplicaciones Web</h3>
   <h3>Optativa</h3>
   <h3>Itinerario Personal para la Empleabilidad II</h3>
   <h3>Sostenibilidad aplicada al sistema productivo</h3>
   <h3>Proyecto Intermodular</h3>
 </body>
</html>

Salto de línea

<br>
break line

Cuando queramos introducir un salto de línea dentro de un párrafo de texto, podemos utilizar el elemento <br>.

<p>Línea 1<br>Línea 2</p>

Se muestra de la siguiente manera:

<!doctype html>
<html lang="es">
 <head>
   <meta charset="utf-8" />
   <title>Poema de Wang Wei</title>
 </head>
 <body>
   <p>
     Camino hasta donde el agua termina<br>
     me siento a ver el momento<br>
     en que las nubes se alzan
   </p>
 </body>
</html>

No se debe utilizar para separar diferentes párrafos, ya que el propio elemento p introduce una separación antes y después.

Línea horizontal

<hr>
horizontal rule

Podemos utilizar este elemento para separar distintas "secciones temáticas". Aunque los navegadores lo reconocen y procesan dentro de un mismo párrafo, no debe usarse así, sino entre párrafos.

<p>Párrafo 1</p>
<hr>
<p>Párrafo 2</p>

Se muestra de la siguiente manera:

Código fuente y texto preformateado

code, pre
code, preformatted textrmatted text

Cuando redactamos documentación técnica o apuntes de informática, es muy común necesitar representar fragmentos de código fuente o comandos de consola. Para ello podemos utilizar el elemento code.

<code>
public class HolaMundo {
    public static void main(String args[]) {
        System.out.println("Hola, Mundo");
    }
}
</code>

Que se muestra de la siguiente manera:

Apreciarás que cambia la tipografía, pero los saltos de línea y las indentaciones no se han respetado, ya que el navegador colapsa todos los espacios en blanco repetidos y retornos de carro como si fuera un párrafo estándar.

Para solucionar esto se utiliza el elemento pre, un contenedor que conserva exactamente todos los espacios, tabulaciones y saltos de línea tal y como se escriben en el archivo fuente.

<pre>
Con diez cañones por banda,
viento en popa a toda vela,
no corta el mar sino vuela,
un velero bergantín.
</pre>

Se mostraría tal que así:

Combinación de pre y code

La buena práctica marcada por el estándar HTML5 para mostrar bloques de código multilínea es anidar code dentro de pre. De esta forma se une la semántica de marcado de código con la preservación visual de su formato:

<pre><code>public class HolaMundo {
    public static void main(String args[]) {
        System.out.println("Hola, Mundo");
    }
}</code></pre>

Quedando así:

Marcado de texto simple

En HTML5 quedaron obsoletos algunos elementos que permitían enfatizar visualmente partes del texto, como b o i para dar paso a elementos con un propósito puramente semántico. Aunque los navegadores siguen renderizando por defecto b en negrita o i en cursiva por motivos de retrocompatibilidad, la norma moderna exige usar etiquetas que aporten significado al contenido y no meros estilos visuales.

Texto importante

<strong>

En general, los navegadores marcan el texto en negrita, pero es un acuerdo visual modificable por CSS. No es lo mismo un texto simplemente en negrita (modificado con CSS) que un texto marcado con este elemento.

Texto enfatizado

em
emphasized

Es un énfasis de segundo nivel (siendo el primero para strong). Los navegadores lo marcan con cursiva pero, de nuevo, esto es modificable por CSS.

Texto resaltado

mark
marked

Es un texto destacado que hace referencia al contexto actual o a una búsqueda. Los navegadores lo marcan por defecto con un fondo amarillo fluorescente (estilo marcador de subrayado), pero es totalmente personalizable mediante CSS.

<p>Resultados de búsqueda sobre <mark>HTML5</mark>:</p>
<p>El cambio más importante afecta a la <strong>semántica</strong>. <mark>HTML5</mark>, además, persigue una <em>separación total</em> entre la estructura y la estética</p>

Se muestra de la siguiente manera:

Citas

Existen 3 formas de indicar las citas.

Citas cortas

q
quote

Usada para indicar citas cortas incluidas en un párrafo con otro tipo de texto. Los navegadores suelen remarcar la citas entrecomillándolas. Cuenta con un atributo:

• cite: indica la fuente a consultar. No es obligatorio ponerlo, y los navegadores no hacen nada con ese enlace

<p>Un sabio dijo <q cite="Mi profe de Programación">A programar se aprende programando</q></p>

Se muestra de la siguiente manera:

Títulos de trabajos y nombres de autores

cite

Es el elemento antiguo para hacer lo que ahora hace q. Actualmente se utiliza para indicar nombres de autores, de trabajos, libros, etc. Los navegadores mostrarán el texto citado con un estilo de cursiva.

<p>Frank Herbert, en su novela <cite>Dune</cite>, realiza un paralelismo con el panorama geopolítico por el control de los recursos naturales</p>

Se muestra de la siguiente manera:

Cita de párrafo

blockquote

Es el único elemento de citas que trabaja a nivel de párrafo. Es decir: indicando párrafos completos que proceden de fuentes externas. Los navegadores añadirán sangría derecha e izquierda. Cuenta con un atributo:

• cite: idéntico al del elemento q.

<blockquote cite="https://www.boe.es/buscar/act.php?id=BOE-A-1978-31229#a47">
<strong>Artículo 47</strong><br>
Todos los españoles tienen derecho a disfrutar de una vivienda digna y adecuada. Los poderes públicos promoverán las condiciones necesarias y establecerán las normas pertinentes para hacer efectivo este derecho, regulando la utilización del suelo de acuerdo con el interés general para impedir la especulación. La comunidad participará en las plusvalías que genere la acción urbanística de los entes públicos.
</blockquote>

Se muestra de la siguiente manera:

Listas

Las listas permiten agrupar elementos o conceptos relacionados entre sí mediante símbolos, números o viñetas, facilitando la organización de ideas y mejorando la legibilidad del documento.

Existen 3 tipos de listas dependiendo de la naturaleza de los elementos y su orden.

Listas no ordenadas

ul, li
unordered list, list item

Se utilizan cuando el orden de los elementos no altera el significado del conjunto.

• ul: elemento contenedor.
• li: cada uno de los ítems de la lista. Debe estar siempre hijo directo de un contenedor de lista.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Se muestra de la siguiente manera:

Listas ordenadas

ol, li
ordered list, list item

Se utilizan cuando el orden de los elementos es fundamental para la interpretación del conjunto. El elemento contenedor, en este caso, es ol. Por defecto, los navegadores utilizan una numeración arábiga ascendente con inicio en 1., pero puede modificarse mediante atributos:

• start="N": especifica el número con el que empieza el conteo.
• reversed: invierte el orden de la numeración.
• type="1|a|A|i|I": define el tipo de marcador.

<ol type="I">
	<li>Fase de Análisis.</li>
	<li>Fase de Diseño.</li>
	<li>Fase de Desarrollo.</li>
</ol>

Se muestra de la siguiente manera:

Listas de definición

dl, dt, dd
description list, description term, description details

Se utilizan para representar conjuntos de pares concepto/definición. Muy útiles para glosarios o preguntas frecuentes (FAQs).

• dl: elemento contenedor.
• dt: término, concepto o clave a definir.
• dd: la descripción, definición o valor asociado.

<dl>
	<dt>W3C</dt>
	<dd>World Wide Web Consortium, organismo encargado de los estándares web </dd>
	<dt>DOM</dt>
	<dd>Document Object Model, representación en árbol del documento HTML.</dd>
</dl>

Se muestra de la siguiente manera:

Anidación de listas

Es posible meter una lista dentro de otra, por ejemplo:

<p>Lista de la compra</p> 
<ul>
   <li>
       No alcohólicas
       <ul>
           <li>Agua</li>
       </ul>
   </li>
   <li>
       Alcohólicas
       <ul>
           <li>Vino</li>
           <li>Cerveza</li>
       </ul>
   </li>            
</ul>

Se muestra de la siguiente manera:

Y también podemos mezclar diferentes tipos de listas:

<p>Lista de la compra</p> 
<ol>
   <li>
       No alcohólicas
       <ul>
           <li>Agua</li>
       </ul>
   </li>
   <li>
       Alcohólicas
       <ul>
           <li>Vino</li>
           <li>Cerveza</li>
       </ul>
   </li>            
</ol>

Que se muestra así:

Enlaces

a
anchor

Los enlaces son uno de los elementos más importantes de la Web, ya que permiten la navegación hipertextual interconectando diferentes documentos HTML o recursos entre sí.

El elemento a convierte cualquier fragmento de texto, imagen o bloque dentro de su contenido en un punto interactivo sobre el que el usuario puede hacer click para ser redirigido a una URL.

En términos generales, podemos clasificar los enlaces en globales, locales e internos

Enlaces globales

Son aquellos que apuntan a un recurso alojado en un servidor distinto mediante una URL absoluta (incluyendo el protocolo https:// y el nombre de dominio). Ejemplo:

• https://www.w3.org

Enlaces locales

Son aquellos que navegan entre diferentes archivos HTML o recursos pertenecientes al mismo sitio web utilizando, normalmente, rutas relativas. Dependiendo de la estructura del árbol de carpetas, podemos diferenciar tres casos:

• Mismo directorio: listado.html.
• Subdirectorio: contacto/quienes_somos.html.
• Directorio superior: ../index.html.

.  
├── index.html  
└── paginas  
   ├── contacto  
   │   └── quienes_somos.html  
   ├── estoy_aqui.html  
   └── listado.html

Enlaces internos (bookmarks o anclas)

Permiten desplazarse a una posición o sección concreta dentro del mismo documento HTML sin cambiar de página. Para lograrlo, se combina el uso del localizador interno (#) con el atributo global id en el elemento de destino.

• https://html.spec.whatwg.org/multipage/tables.html#the-table-element

Atributos del elemento a

Para controlar el comportamiento del hipervínculo y la forma en que se recupera el recurso, el elemento a dispone de varios atributos clave:

• href (Hypertext Reference): atributo obligatorio que define la URL o ruta del recurso de destino.
• target: especifica el marco o ventana donde se debe cargar el documento enlazado:
  • _self (valor por defecto): carga el recurso en la misma pestaña o ventana actual.
  • _blank: abre el recurso en una nueva pestaña del navegador.
• title: aporta información adicional sobre el enlace. Los navegadores suelen mostrarlo como un cuadro emergente (tooltip) cuando el usuario posiciona el cursor sobre el elemento.
• download: indica al navegador que el recurso enlazado debe descargarse directamente en lugar de abrirse. Puede incluir un valor de texto opcional para especificar el nombre por defecto del archivo descargado (ej. download="Apuntes_UT02.pdf").

<p>
  Consulta la
  <a href="https://www.w3.org" target="_blank" title="Sitio oficial del W3C">
	web oficial del W3C</a>
  o bien puedes
  <a href="ficheros/ut02.pdf" download="Apuntes_HTML_UT02.pdf">
	descargar los apuntes en PDF</a>.
</p>

Se muestra tal que así:

<!doctype html>
<html lang="es">
 <head>
   <meta charset="utf-8" />
   <title>Navegación Lorem Ipsum</title>
 </head>
 <body>
   <p>
     <a href="#lorem1">Lorem Ipsum 1</a> |
     <a href="#lorem2">Lorem Ipsum 2</a> |
     <a href="#lorem3">Lorem Ipsum 3</a>
   </p>
   <h2 id="lorem1">Lorem Ipsum 1</h2>
   <p>
     Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt aspernatur
     ipsum dolor deleniti aliquam quae rem, dolorem suscipit, laboriosam quis
     repellendus nostrum magni veniam voluptas totam recusandae aut atque.
     Vitae, harum culpa consequuntur, error reiciendis dignissimos iusto in,
     iure consequatur earum sequi dolores? Assumenda porro veniam et modi
     deserunt adipisci, autem optio, minima ex dolorum numquam ipsam ab debitis
     quas, quisquam saepe dolor molestiae! Minima laudantium voluptatum atque
     ab debitis impedit provident, rerum deserunt aliquam magnam, ducimus
     quibusdam doloremque magni nihil nam earum nobis animi reiciendis.
     Incidunt autem suscipit dolor commodi numquam reprehenderit in,
     perspiciatis ratione eum. Harum ipsam perferendis nesciunt eius illum in
     facilis itaque eveniet corrupti vel ipsum nisi veritatis perspiciatis,
     dignissimos iusto maxime illo. Odio consequuntur ex praesentium? Similique
     voluptas nihil maiores sint nam, facilis rerum dolore atque ex aliquid.
     Reprehenderit, facere quis dolorem laborum debitis vero quam! Sapiente
     architecto officia dignissimos numquam libero voluptatibus minima hic
     fugit asperiores ratione modi suscipit perferendis dolorum facilis
     exercitationem tempora est accusantium earum harum, iusto nulla debitis
     nobis ex! Repudiandae eos recusandae ab nemo ratione tempora cum labore
     sunt, corporis ea? Soluta, perspiciatis? Dolor soluta atque quae aperiam
     voluptas hic. Adipisci, dignissimos possimus tempore hic quis quisquam ab
     natus consequatur?
   </p>
   <h2 id="lorem2">Lorem Ipsum 2</h2>
   <p>
     Modi, sequi quaerat? Obcaecati cupiditate, id aperiam quod, officiis amet
     explicabo nisi modi, voluptate alias voluptates exercitationem minima
     deleniti quisquam. Ipsam, doloribus aperiam. Eos fuga inventore vero.
     Excepturi architecto nemo provident suscipit dolorum dolore, harum ut
     eaque reiciendis repellendus id qui vero impedit, assumenda culpa. Eius
     recusandae rem quasi repellendus exercitationem dolore ab impedit, dolorum
     sunt possimus natus quidem! Dolorem molestias, expedita ex praesentium,
     quasi eveniet aliquam consequuntur quas laboriosam vero quia? Doloremque
     neque tenetur fugit dolorum veritatis sit at aliquid tempore sint iure
     sunt labore vero blanditiis, perspiciatis alias consequuntur molestias
     eaque illum reiciendis tempora, adipisci cum veniam officiis! Dolorum,
     velit consequatur tenetur, officiis provident molestias alias reiciendis
     nemo repellat rerum dolores! Iste blanditiis veniam ullam veritatis
     officiis esse, nostrum unde facere excepturi numquam eveniet dolor
     repellendus saepe, quibusdam ipsa eius distinctio accusantium, fuga sunt!
     Impedit optio molestiae sed, ducimus voluptas consequatur, ratione hic
     sapiente labore perspiciatis aspernatur quod magni aut repudiandae dolores
     obcaecati ex. Provident dolor dolorum sit exercitationem ab minima,
     aperiam debitis, itaque harum sapiente consequatur cumque, repellendus
     voluptas corporis? Unde ratione tenetur excepturi ex facere consequatur
     accusamus aliquam quos illo ullam soluta magnam laudantium, cum cumque
     possimus ut quibusdam asperiores, dolore animi incidunt voluptates,
     officiis ab.
   </p>
   <h2 id="lorem3">Lorem Ipsum 3</h2>
   <p>
     Culpa cumque similique earum sed velit, impedit quaerat incidunt nisi
     nihil soluta omnis harum aspernatur eaque, aperiam distinctio? Ducimus
     delectus eveniet aliquam cupiditate architecto adipisci, nulla dolor
     tempora veritatis excepturi repellendus et asperiores illo vitae, eaque
     est maiores quam nemo facere dolorem reprehenderit, eius quis ab in? Atque
     architecto veritatis rerum quibusdam quisquam eos, quia nostrum temporibus
     id quos rem minus aspernatur, labore illum reiciendis consequatur possimus
     odio ipsam? Eligendi iste reprehenderit assumenda, ut excepturi expedita
     porro temporibus dolores veniam labore harum doloremque laudantium neque
     explicabo sint eos autem veritatis. Corrupti dolore, quisquam voluptate
     quis laboriosam ipsam, ipsa distinctio laborum obcaecati molestias esse.
     Omnis nihil, dicta corrupti quod ipsa rem hic earum enim maxime blanditiis
     vel temporibus dolorem nisi. Odio necessitatibus eligendi, aliquid
     accusamus labore veniam laudantium dolorem repellendus nostrum voluptatum
     a iste omnis nam minus rem quisquam maxime provident enim facilis quas
     illum excepturi. Commodi labore architecto nulla! Est fugiat, pariatur
     quidem molestias reprehenderit ducimus debitis et vel voluptas placeat
     obcaecati iste assumenda officia illo temporibus dolore nemo, doloremque
     accusantium ipsa commodi sint porro hic! Enim nostrum nulla reiciendis
     delectus voluptate a ipsam voluptas, consectetur nesciunt cum veritatis
     harum mollitia molestiae. Dignissimos ipsam laudantium saepe officiis, ex
     ullam dicta!
   </p>
 </body>
</html>

Multimedia

Los elementos multimedia han estado presentes desde los principios de HTML gracias a las imágenes. Durante esos años se debía optimizar su uso y se limitaban al mínimo de resolución y tamaño necesarios para su correcta visualización. A día de hoy eso no es un problema y es posible incluso ver emisiones de vídeo en directo (streaming) casi desde cualquier lugar.

Con HTML5 se incrementaron los elementos multimedia web mediante componentes de audio y vídeo.

Imágenes

img
image

Las imágenes son fundamentales para hacer más atractivas las páginas web. Son el primer contenido no textual que se planteó incluir en HTML. Los navegadores tienen la capacidad de mostrar imágenes, pero sólo unos formatos concretos. La mayoría de navegadores reconocen los siguientes formatos:

• JPG: imágenes que ocupan muy poco espacio gracias a su compresión. No admiten animaciones ni transparencias.
• GIF: sólo pueden representar 256 colores, por lo que no son recomendables para fotografías, pero admiten transparencias e incluso animaciones. Antes eran más populares, pero están en desuso.
• PNG: imágenes comprimidas sin pérdida de calidad (ocupan más espacio que JPG, normalmente). Permiten, además, el uso de canales alfa para definir opacidades de hasta 255 niveles.
• SVG: gráficos vectoriales escalables (Scalable Vector Graphics). No pierden resolución al ampliar su tamaño y son ideales para logotipos, iconos e ilustraciones simples.
• WebP: formato moderno desarrollado por Google que combina la compresión con y sin pérdida, transparencias y animación, ofreciendo un tamaño de archivo significativamente menor que JPG y PNG sin perder calidad.

Atributos principales del elemento img

El elemento img es también un elemento vacío que inserta una imagen en la página a través de sus atributos obligatorios y opcionales:

• src (source) : atributo obligatorio que especifica la ruta (relativa o absoluta) o URL del archivo de imagen que se desea mostrar.
• alt (alternative text): no es obligatorio, pero sí muy recomendable por motivos de accesilidad y SEO. Texto alternativo que describe el contenido o función de la imagen. Se muestra si la imagen no se puede cargar (por fallo de red o ruta incorrecta) y es imprescindible para que los lectores de pantalla descifren el contenido para personas con discapacidad visual.
• width y height: definen las dimensiones originales de la imagen en píxeles (sin añadir la unidad px). Es recomendable especificar ambos atributos en el código HTML; De este modo, el navegador calcula la relación de aspecto (aspect ratio) del archivo antes de descargarlo y reserva el espacio en pantalla adecuado, evitando saltos de maquetación (Layout Shift). Si se requiere redimensionar la imagen a un tamaño diferente, se debe gestionar mediante CSS, manteniendo los valores originales en los atributos HTML.
• loading: controla cómo debe cargarse la imagen. Con loading="lazy", la imagen solo se descarga cuando el usuario se desplaza cerca de ella en la pantalla (carga perezosa), mejorando el rendimiento de la página.

<img
	src="https://cdn.pixabay.com/photo/2016/07/30/16/21/koala-1557457_1280.jpg"
	alt="Koala sobre la rama de un árbol"
	width="300"
	height="200"
/>

Se muestra tal que así:

Si la imagen no pudiera cargarse, en su lugar, se mostraría lo siguiente:

Audio

audio

El elemento audio permite insertar y reproducir archivos de sonido directamente en el documento HTML sin necesidad de instalar plugins o reproductores externos.

Para controlar la reproducción del recurso, la etiqueta utiliza una serie de atributos booleanos (atributos que no requieren valor, su sola presencia activa la funcionalidad):

• src: ruta o URL del archivo de audio que se desea reproducir.
• controls: atributo booleano fundamental. Muestra la interfaz gráfica del reproductor estándar del navegador (botón de reproducción/pausa, barra de progreso, tiempo y control de volumen). Si se omite, el reproductor será invisible para el usuario.
• autoplay: inicia la reproducción del sonido de forma automática en cuanto se carga la página. Muchos navegadores bloquean el audio automático para evitar molestias al usuario.
• loop: hace que el audio vuelva a empezar de forma continua una vez que finaliza.
• muted: silencia el audio por defecto al cargar el reproductor.

Curiosamente, este elemento no es vacío, y el valor que le demos se mostrará en el caso de que el audio no pueda cargarse por motivos de compatibilidad.

<audio
	src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Whistling_blackbird.ogg"
	controls
>
	Tu navegador no soporta el elemento de audio en HTML
</audio>

Se muestra de la siguiente manera:

Video

video

El elemento video se utiliza para insertar reproductores de vídeo en la página web. A diferencia de las imágenes, tampoco es un elemento vacío, por lo que permite incluir texto o contenido alternativo en su interior para los navegadores que no soporten la reproducción de vídeo nativa.

Comparte con el elemento audio la mayoría de sus atributos principales (src, controls, autoplay, loop y muted), incorporando además atributos específicos para controlar el tamaño y la carátula:

• poster: especifica la ruta o URL de una imagen que se muestra como vista previa o carátula del vídeo antes de que este comience a reproducirse.
• width y height: indican las dimensiones del reproductor en píxeles para reservar el espacio adecuado en pantalla y evitar saltos en la maquetación.

<video
	src="https://upload.wikimedia.org/wikipedia/commons/e/ec/Indoor_climbing_Chiba-Japan_2025_11_16.webm"
	controls
	width="400"
	height="250"
>
  Tu navegador no soporta el elemento de vídeo en HTML.
</video>

Se vería tal que así:

Tablas

table, tr, th, td
table, table row, table header, table data

Útiles para la organización y presentación de datos en filas y columnas. Tradicionalmente se usaban para la estructura de la propia web, pero ya no debe usarse de esa manera, sino para mostrar datos tabulares de forma clara y accesible.

Una tabla en HTML se construye mediante la interacción de varios elementos anidados:

• table: elemento contenedor principal de la tabla.
• tr (table row): define una fila dentro de la tabla.
• th (table header): define una celda de encabezado. Su contenido se muestra en negrita y centrado por defecto. Aporta semántica para indicar el título o categoría de una columna o fila.
• td (table data): define una celda estándar de datos con el contenido individual de la tabla.

Es muy importante entender bien la estructura de una tabla:

• Al igual que con las listas, existe un elemento contenedor que se escribe solamente 1 vez por tabla. Este elemento es table.
• Las tablas se construyen primero por filas y luego por columnas.
• Por cada fila que queramos añadir a la tabla, crearemos un elemento tr (table row).
• Dentro de cada fila (tr), añadiremos tantas celdas como columnas vaya a tener la tabla. Para las celdas de datos habituales usaremos td (table data), mientras que para los encabezados o títulos usaremos th (table header).

<table>
	<!-- Primera fila: Encabezados -->
	<tr>
		<th>Módulo</th>
		<th>Horas semanales</th>
	</tr>
	<!-- Segunda fila: Datos -->
	<tr>
		<td>Lenguajes de Marcas (LMSGI)</td>
		<td>4</td>
	</tr>
	<!-- Tercera fila: Datos -->
	<tr>
		<td>Programación</td>
		<td>7</td>
	</tr>
</table>

Se muestra así:

Atributos de table

• border: atajo histórico para añadir un borde a la tabla y a sus celdas mediante un número entero (ej. border="1").
  Obsoleto en la maquetación moderna
  

  La propiedad border en HTML no debe emplearse en proyectos actuales. Todos los bordes, espaciados y colores de una tabla deben definirse siempre desde la hoja de estilos CSS. Usaremos border solamente por motivos pedagógicos.

Atributos de th

• scope: especifica la dirección a la que aplica la celda de cabecera. Es un atributo fundamental para garantizar la accesibilidad web, permitiendo que los lectores de pantalla asocien correctamente los datos con sus títulos.
  • scope="col": indica que la cabecera aplica a toda la columna vertical.
  • scope="row": indica que la cabecera aplica a toda la fila horizontal.

Atributos de fusión en celdas td y th

Cuando una celda debe ocupar el espacio de varias columnas o filas adyacentes, se utilizan los siguientes atributos de expansión:

• colspan (column span): define cuántas columnas se fusionan en una sola celda horizontal.
• rowspan (row span): define cuántas filas se fusionan en una sola celda vertical.

<table border="1">
	<!-- Fila 1 -->
	<tr>
		<th></th>
		<th scope="col">Lunes</th>
		<th scope="col">Martes</th>
		<th scope="col">Miércoles</th>
	</tr>
	
	<!-- Fila 2 -->
	<tr>
		<th scope="row">15:15 - 16:10</th>
		<td>Programación</td>
		<td>Entornos</td>
		<td rowspan="2">Lenguajes de Marcas</td>
	</tr>
	
	<!-- Fila 3 -->
	<tr>
		<th scope="row">16:10 - 17:05</th>
		<td>Entornos</td>
		<td rowspan="2">Lenguajes de Marcas</td>
	</tr>
	
	<!-- Fila 4 -->
	<tr>
		<th scope="row">16:10 - 17:05</th>
		<td>IPE I</td>
		<td>IPE I</td>
	</tr>
	
	<!-- Fila 5 -->
	<tr>
		<th scope="row">18:00 - 18:20</th>
		<td colspan="3">RECREO</td>
	</tr>

</table>

Se muestra tal que así:

Cuando empiezan a mezclarse td con rowspan y colspan puede dificultarse la lectura y planificación de la tabla. Al fusionar celdas, se debe "descontar" o ignorar la celda correspondiente en las filas o columnas adyacentes para no descuadrar la maquetación.

Para evitar errores en tablas complejas, es muy recomendable seguir estas tres reglas prácticas:

1. Si usas colspan="N" en una celda, esa misma fila tendrá N-1 celdas menos escritas en el código HTML.
2. Si usas rowspan="N" en una celda, las N filas inferiores sobre las que se extiende la fusión tendrán una celda menos definida en su marcado <tr>.
3. Mapear la rejilla previamente: en tablas complejas con cruces de horario o cuadrantes, dibujar la tabla a mano o diseñarla primero en una hoja de cálculo ayuda a identificar rápidamente qué celdas deben llevar la expansión y cuáles deben omitirse en el código.

Elementos de bloque y elementos en línea

Como hemos visto hasta ahora, un documento HTML se construye mediante la anidación de una serie de elementos que estamos categorizando principalmente según su función dentro de la web. Sin embargo, existe otra manera de categorizarlos según el espacio que ocupan y cuál es su comportamiento en el flujo del documento. En función de estas dos características, dividimos los elementos HTML en dos grandes grupos:

• Elementos de bloque (block-level elements).
• Elementos en línea (inline elements).

Entender esta distinción es fundamental antes de abordar la estructuración visual y la maquetación de una página web, ya que determina cómo se posicionan los elementos de forma predeterminada sin necesidad de aplicar hojas de estilo.

Elementos de bloque

https://developer.mozilla.org/es/docs/Glossary/Block-level_content

Lo que todos los elementos de bloque tienen en común es el espacio que ocupan y su distribución en la página. Un elemento en bloque ocupa todo el ancho de su elemento padre, creando así un "bloque", y los navegadores suelen mostrarlos con un salto de línea antes y después.

Por ejemplo:

<p>Este es un párrafo (elemento de bloque)</p>
<p>Este es otro párrafo que se situará automáticamente debajo del anterior.</p>

Se muestra así:

Como se puede apreciar, cada párrafo está en su propia línea, pero tal vez no se aprecie adecuadamente el espacio que ocupa realmente el párrafo. Añadimos el siguiente fragmento de código al head:

<style>
	p {
		background-color: lightblue;
	}
</style>

Con la siguiente representación:

Ahora sí es evidente la propiedad del espacio que ocupa: todo el ancho de su elemento padre (en este caso es body).

Lo que más nos interesa sobre los elementos de bloque es su utilidad para la estructuración visual, ya que están diseñados para organizar grandes secciones de contenido o agrupar otros elementos. Como norma general, un elemento de bloque puede contener otros elementos de bloque y elementos en línea.

Imagina que queremos estructurar nuestra página web de la siguiente manera:

Cada uno de los bloques de esa imagen representa una sección definida en la distribución del sitio web. Para construir esa estructura, necesitamos contenedores que actúen como "cajas" de nivel de bloque, permitiendo agrupar varios elementos en su interior.

Tipos de bloques

Esta clasificación habla en términos generales, pero es crucial entender que no todas las reglas aplican por igual a todos los elementos de bloque:

• Un párrafo no puede contener a otro párrafo ni a otros elementos de bloque. Aunque p es un elemento de de bloque, la especificación de HTML establece restricciones estrictas de anidamiento para mantener la validez semántica del documento.
• El propósito principal de un párrafo no es estructurar y agrupar grandes secciones, sino alojar bloques de texto continuo.

Por tanto, dentro de la categoría de elementos de bloque debemos diferenciar entre:

• Bloques de contenido terminal o textual: alojan datos o texto final. Tienen restricciones estrictas que impiden contener otros bloques en su interior.
• Bloques contenedores o estructurales: están diseñados expresamente para agrupar otros elementos (tanto bloques como elementos en línea) y construir la distribución espacial de la web.

Elementos en línea

https://developer.mozilla.org/es/docs/orphaned/Web/HTML/Inline_elements

A diferencia de los elementos de bloque, los elementos en línea (inline) no ocupan todo el ancho de la página ni generan un salto de línea. Solo ocupan el espacio estrictamente necesario para mostrar su contenido y se colocan uno al lado del otro, fluyendo de forma natural con el texto (de izquierda a derecha por defecto).

Están diseñados para marcar, formatear o enlazar fragmentos específicos dentro de un bloque de texto. Por norma general, un elemento en línea no puede contener elementos de bloque en su interior, únicamente otros elementos en línea o texto plano.

Por ejemplo:

<p>
	  En este párrafo hay un <a href="#">enlace</a> y un texto en <strong>negrita</strong>.
</p>

Se muestra así:

Visualmente se puede apreciar que ha cambiado el formato específico de solamente una parte del texto pero, por evidenciarlo aún más, le aplicamos el siguiente estilo:

<style>
	a, strong {
		background-color: lightblue;
	}
</style>

Quedaría así:

Por norma general, un elemento en línea no debe contener elementos de bloque en su interior.

Resumen comparativo

A modo de resumen, la siguiente tabla recoge el comportamiento nativo general de ambas categorías dentro del flujo del documento:

Elementos genéricos neutros

Desde HTML5 se recomienda el uso de los elementos semánticos para estructurar y organizar el contenido de una página web. Sin embargo, existen situaciones en las que necesitamos agrupar ciertos elementos o aislar fragmentos de texto exclusivamente con fines de aplicar estilos visuales, organizar su disposición espacial o manipular su contenido mediante JavaScript sin aportar ningún significado contextual o semántico al documento.

Para estos casos, HTML proporciona dos elementos contenedores completamente neutros, diferenciados por su comportamiento nativo en el flujo del documento.

Contenedor genérico de nivel de bloque

div
division

El elemento div es un contenedor neutro de nivel de bloque. Es decir: ocupa todo el espacio horizontal disponible de su contenedor padre y genera un salto de línea antes y después de su posición.

A diferencia de los bloques de contenido terminal, el elemento div es un bloque contenedor estructural puro: no impone restricciones semánticas y puede albergar libremente cualquier combinación de elementos de bloque (incluidos otros div) y elementos en línea.

<div class="info-modulo">
	  <h3>Lenguajes de Marcas</h3>
	  <p>Módulo enfocado en la estructuración de información web mediante HTML5 y XML.</p>
</div>

Se muestra así:

Puede apreciarse que no tiene ningún tipo de representación visual. Sin embargo, aplicando algo de estilo:

<style>
	div {
		background-color: lightblue;
	}
</style>

Ya puede apreciarse que tanto el encabezado como el párrafo quedan agrupados.

Contenedor genérico en línea

span
span (abarcar)

El elemento span es el equivalente neutro en línea. No genera saltos de línea y su ancho horizontal se ajusta estrictamente al contenido que envuelve.

Se utiliza habitualmente dentro de elementos de bloque (como párrafos, encabezados o celdas de tabla) para aislar fragmentos específicos de texto, palabras o números con el fin de aplicarles un estilo visual diferenciado o identificarlos desde código.

<p>El estado del servidor es <span class="estado-activo">Activo</span>.</p>

Se muestra así:

Al igual que con div, puede apreciarse que no tiene ningún tipo de representación visual. Sin embargo, aplicando algo de estilo:

<style>
	.estado-activo {
		font-weight: bold;
		color: green;
		font-family: monospace;
	}
</style>

Ya puede apreciarse que se ha modificado el estilo de solamente la parte del texto que pertenece al elemento span.

Elementos semánticos

header, nav, main, section, article, aside, footer

Antes de la especificación de HTML5, las páginas web se maquetaban mediante estructuras compuestas exclusivamente por cajas div anidadas a las que se asignaban atributos id o class con nombres arbitrarios (por ejemplo, <div id="cabecera">, <div class="menu">, <div id="pie">).

Aunque estas etiquetas permitían organizar el diseño visual con CSS, eran totalmente invisibles para los motores de búsqueda y los lectores de pantalla, ya que un navegador no puede interpretar el significado conceptual implícito en el nombre de una clase.

HTML5 introdujo un conjunto de elementos contenedores semánticos de nivel de bloque diseñados específicamente para reemplazar a los div estructurales, dotando a la arquitectura de la web de un significado estandarizado.

header (cabecera)

Representa el bloque contenedor de introducción o cabecera de un documento o de una sección concreta. Habitualmente alberga:

• El logotipo o nombre del sitio web.
• El título principal de la página (<h1>).
• Elementos de búsqueda o datos del autor.
• A menudo contiene en su interior el menú de navegación (<nav>).

nav (navegación)

Define una sección del documento cuyo propósito principal es albergar enlaces de navegación. Se utiliza para los bloques de navegación esenciales del sitio:

• Menú de navegación principal superior.
• Menús de navegación lateral o tablas de contenidos internas.

<nav>
	<ul>
	    <li><a href="#inicio">Inicio</a></li>
	    <li><a href="#servicios">Servicios</a></li>
	    <li><a href="#contacto">Contacto</a></li>
	  </ul>
</nav>

main (contenido principal)

Representa el contenido central y exclusivo del cuerpo del documento (<body>).

El contenido alojado en <main> debe ser único de esa página específica y no debe repetirse en otras secciones del sitio web (excluyendo barras laterales, cabeceras o enlaces de pie de página compartidos).

<main>
	  <h2>Servicios Veterinarios</h2>
	  <p>Ofrecemos atención integral para la salud de su mascota...</p>
</main>

section (sección temática)

Representa un bloque o sección genérica con coherencia temática dentro del documento. Se utiliza para dividir el contenido en capítulos, pestañas o bloques conceptuales delimitados.

Por regla general de accesibilidad, toda <section> debe incluir un encabezado (<h2>-<h6>) que titule la temática abordada en dicho bloque.

<section>
	<h2>Medicina Preventiva</h2>
	<p>Planes de vacunación y desparasitación adaptados a cada edad.</p>
</section>

article (contenido autónomo/artículo)

Representa una composición o fragmento de contenido que tiene sentido independiente por sí mismo y que podría ser distribuido, reutilizado o publicado en otro medio de forma aislada (por ejemplo, en un lector de noticias RSS o en un agregador de contenidos).

Ejemplos típicos de uso de <article>:

• Una entrada de un blog o una noticia.
• Un comentario de un usuario en un foro.
• Una tarjeta de producto en una tienda online.
• Un widget informativo independiente.

<article>
	<header>
	    <h3>Campaña de vacunación contra la rabia</h3>
	    <p>Publicado el 15 de octubre</p>
	</header>
	<p>Aprovecha un 15% de descuento en la vacunación anual durante todo este mes.</p>
</article>

aside (contenido tangencial/lateral)

Representa una sección de contenido relacionada con el tema principal que la rodea, pero que tiene un carácter secundario o tangencial.

Usos habituales de <aside>:

• Barras laterales (sidebars) con enlaces a entradas recientes o categorías.
• Cajas de publicidad o patrocinios.
• Cuadros de glosario, datos curiosos o notas al margen dentro de un artículo principal.
• Información adicional sobre el autor de un artículo.

<aside>
	<h3>Teléfono de Urgencias</h3>
	<p>Atención 24h: <strong>912 345 678</strong></p>
</aside>

footer (Pie de página)

Representa el pie de página del documento completo o de una sección o artículo concreto. Contiene habitualmente información de cierre:

• Información de derechos de autor (copyright).
• Enlaces a la política de privacidad, términos de uso y aviso legal.
• Datos de contacto y dirección física del sitio web.

<footer>
	<p>&copy; 2026 Clínica Veterinaria Castillo Puche. Todos los derechos reservados.</p>
</footer>

Resumen