La estructura invisible que sostiene cada página web. Es el primer lenguaje del oficio y el que hace que un navegador entienda qué es un título, una imagen o un enlace.
Para ubicar el tema
La estructura: qué es un título, un párrafo, una imagen, un enlace.
El aspecto: tipografía, color, retícula, espaciado y adaptación a cada pantalla.
La producción: sitios completos de forma visual, sobre estas mismas bases.
Sesión 2.2
Un lenguaje de marcado, no de programación. La diferencia importa.
Etiqueta, atributo, valor, contenido y cierre.
Del <!DOCTYPE> al </html>, con su cabecera y su cuerpo.
Nombrar cada zona de la página por lo que es, no por cómo se ve.
Encabezados, párrafos, énfasis, listas, enlaces e imágenes.
Un boilerplate listo para empezar cualquier proyecto.
Concepto
Es el lenguaje estándar con el que se crean y se estructuran las páginas web. Define qué es cada cosa dentro de un documento.
No es un lenguaje de programación: no hace cálculos ni toma decisiones. Es un lenguaje de marcado, porque usa etiquetas (tags) para envolver el contenido y decirle al navegador de qué se trata.
El navegador no entiende de estética: entiende de etiquetas. Lo estético llega después, con CSS.
Concepto
Describe qué es cada parte del contenido. No decide nada, no calcula, no cambia con el tiempo.
Equivale al guion editorial de una publicación: la jerarquía del contenido.
Describe cómo se ve. Tipografía, color, retícula, espaciado, comportamiento responsivo.
Equivale al diseño editorial: la forma que toma esa jerarquía.
Describe qué hace. Reacciona, calcula, valida formularios, anima, consulta datos.
Equivale a la interacción: lo que ocurre cuando alguien toca la pieza.
Sintaxis
Etiqueta de apertura · contenido · etiqueta de cierre
< y >Delimitan la etiqueta. Todo lo que va entre ellos es una instrucción para el navegador, no texto visible. Por eso, para escribir un signo < como texto se usa la entidad <.
pEl nombre del elemento. Es lo que define qué es ese contenido: p es párrafo, h1 es título, a es enlace. Siempre en minúsculas.
idInformación adicional sobre el elemento. Se escribe dentro de la etiqueta de apertura, nunca en la de cierre. Un elemento puede llevar varios, separados por espacios.
=Une el atributo con su valor. Sin espacios alrededor, por convención.
"intro"Lo que se le asigna al atributo, siempre entre comillas. Cuidado al copiar texto desde un procesador de palabras: las comillas tipográficas (“ ”) rompen el código; deben ser comillas rectas.
El texto u otros elementos que viven dentro. Es lo único que la persona ve en pantalla. Puede contener a su vez más etiquetas: así se anidan los elementos.
</p>Marca dónde termina el elemento. Es idéntica a la de apertura pero con una barra / y sin atributos. Olvidarla es la causa más común de que un diseño “se desacomode”.
Sintaxis
class — el puente con el CSSEtiqueta de clasificación que se le pone a uno o varios elementos para poder darles estilo en conjunto. Puede repetirse cuantas veces se necesite.
Es el atributo que más usará al maquetar con CSS.
id — identificador únicoNombra a un solo elemento de toda la página. No debe repetirse. Sirve para enlazar a una sección concreta y para que el código lo localice.
src — de dónde sale el archivoSource, origen. Indica la ruta del recurso que se va a incrustar: una imagen, un video, un audio o un script.
href — a dónde llevaHypertext reference. Es el destino de un enlace, o la ruta de la hoja de estilos que se vincula.
alt — la imagen en palabrasTexto alternativo que describe la imagen. Lo lee en voz alta un lector de pantalla y se muestra si el archivo no carga.
No es opcional. Una imagen sin alt es una imagen que no existe para quien no puede verla. Si la imagen es puramente decorativa, se deja vacío: alt="".
lang — el idioma del documentoSe pone en la etiqueta <html>. Indica en qué idioma está el contenido.
Le sirve al lector de pantalla para pronunciar bien, al navegador para ofrecer traducción y al buscador para clasificar.
title — el globo de ayudaTexto que aparece al dejar el cursor encima. Útil como complemento, nunca como sustituto de un texto visible: en pantallas táctiles no aparece.
style — estilo en líneaPermite escribir CSS directamente sobre un elemento. Funciona, pero conviene evitarlo: mezcla estructura con presentación y obliga a repetir el estilo en cada elemento.
Mejor: una class y el estilo en la hoja CSS.
Estructura
<!DOCTYPE html>No es una etiqueta: es una declaración. Le avisa al navegador que el documento usa HTML5 y que debe interpretarlo con las reglas modernas. Va siempre en la primera línea, y si falta, el navegador entra en “modo compatibilidad” y el diseño puede romperse.
<html>El elemento raíz: todo lo demás vive dentro. Lleva el atributo lang para declarar el idioma del contenido.
<head> — la ficha técnicaContiene la información sobre el documento: título, codificación, descripción, enlaces a hojas de estilo y scripts. Nada de lo que va aquí se ve en la página.
<meta charset="UTF-8">Declara la codificación de caracteres. Es lo que permite escribir acentos, eñes y signos de interrogación de apertura sin que aparezcan como símbolos raros. En español no es opcional.
<title>El título del documento. Se muestra en la pestaña del navegador, es lo que se guarda al marcar como favorito y es el titular azul del resultado de búsqueda.
<body> — lo que se veTodo el contenido visible de la página: textos, imágenes, videos, formularios y la estructura semántica que los organiza.
Estructura
Nada del <head> aparece en la página, pero determina cómo se presenta el sitio fuera de ella.
<title>El nombre del documento. Aparece en la pestaña, en los favoritos y como titular en los resultados de búsqueda.
Entre 50 y 60 caracteres: más largo, el buscador lo recorta.
<meta name="description">El texto que acompaña al titular en el resultado de búsqueda. No influye directamente en la posición, pero sí en cuánta gente da clic.
<meta property="og:image">Define la imagen de la tarjeta que se genera al compartir el enlace en redes o mensajería. Sin ella, el enlace se ve pelón.
Junto a og:title, og:description y og:url, forma el Open Graph: el diseño de cómo se ve un enlace compartido.
<meta name="viewport">Le indica al navegador móvil que use el ancho real del dispositivo. Sin esta línea el sitio se ve “alejado” en el teléfono, con la letra diminuta, por muy responsivo que sea el CSS.
<link rel="icon">El favicon: el iconito de la pestaña. Es marca en 16 píxeles, así que rara vez funciona el logotipo completo — casi siempre hay que diseñar una versión reducida.
Laboratorio 1
Evolución
Es la quinta versión del lenguaje, publicada como estándar en 2014. Se creó para modernizar y simplificar la forma de construir sitios y aplicaciones web.
Nombres que describen la función de cada zona: header, nav, main, footer.
<video> y <audio> sin necesidad de complementos externos como Flash.
Campos de tipo fecha, color, correo o rango, con validación incluida en el navegador.
<canvas> y SVG integrados para gráficos e ilustración vectorial.
Semántica
Las etiquetas semánticas dividen la página en zonas con significado. Es, literalmente, el wireframe escrito en código.
<header> — encabezadoLa cabecera de la página o de una sección: logotipo, título y normalmente la navegación principal.
Puede haber varios en un documento: cada <article> puede tener el suyo.
<nav> — navegaciónEnvuelve el menú principal de enlaces. Se reserva para la navegación importante, no para cualquier grupo de enlaces sueltos.
Los lectores de pantalla ofrecen “saltar a la navegación” gracias a esta etiqueta.
<main> — contenido principalEl contenido central y único de la página, lo que la distingue de las demás. Solo puede haber un <main> por documento, y no debe incluir cabecera, menú ni pie.
Dentro van las <section> y los <article>.
<aside> — contenido lateralInformación complementaria: notas al margen, publicidad, enlaces relacionados, biografía del autor. Se entiende si se quita.
No tiene que ir necesariamente a un costado: “aside” se refiere a la relación con el contenido, no a su posición.
<footer> — pieCierre de la página o de una sección: créditos, aviso de privacidad, contacto, redes sociales.
Igual que <header>, puede repetirse dentro de otros elementos.
Semántica
Todo son cajas iguales. El significado vive en un nombre de clase que solo entiende quien escribió el código.
La etiqueta ya dice qué es. Lo entienden el navegador, el buscador, el lector de pantalla y cualquier persona que abra el archivo.
Semántica
Un lector de pantalla anuncia “navegación”, “contenido principal” o “pie de página” y permite saltar entre ellos. Con puros <div> solo dice “grupo”, y la persona tiene que recorrerlo todo.
El buscador distingue el contenido real del menú y del pie. Un documento bien marcado se indexa mejor sin trucos.
Quien retome el proyecto —incluso uno mismo seis meses después— entiende la estructura sin descifrar nombres de clases inventados.
El modo lectura del navegador, los asistentes de voz y los agregadores de contenido extraen bien el texto porque saben dónde empieza y termina.
Semántica
Es la duda más común al empezar. Se resuelve con dos preguntas seguidas:
Si el bloque se puede publicar aparte y se sigue entendiendo —una nota de blog, una ficha de producto, un comentario—, entonces es un
Si agrupa contenido relacionado y llevaría un encabezado —“Servicios”, “Contacto”, “Portafolio”—, entonces es una
Si únicamente se requiere agrupar elementos para acomodarlos con CSS, sin que aporte significado, entonces es un
Contenido de texto
Del <h1> al <h6>. Marcan el tema de la sección que presentan, y su orden construye el índice del documento.
Baja de nivel en nivel, sin saltos.
Se eligió por el tamaño, no por la jerarquía. El tamaño se ajusta con CSS.
Contenido de texto
Ocupan todo el ancho disponible y provocan un salto de línea antes y después. Se apilan uno debajo de otro.
div · p · h1–h6 · ul · ol · li · section · header · footer · main
Ocupan solo el espacio de su contenido y conviven dentro de una misma línea de texto.
span · a · strong · em · b · i · img · br
Contenido de texto
La unidad básica del texto. Es un elemento de bloque: no hace falta añadirle saltos ni espacios, ya los trae.
Envuelve un fragmento dentro de una línea, sin darle significado, solo para poder aplicarle estilo.
Marca un cambio de tema. Se dibuja como una línea horizontal, pero su sentido es editorial, no decorativo.
Corta la línea sin abrir párrafo nuevo. Solo para cuando el salto forma parte del contenido.
Contenido de texto
strong marca lo importante: una advertencia, un dato crítico. Lleva peso semántico y el lector de pantalla lo entona.
b es solo negrita visual, sin importancia añadida: un nombre de producto, una palabra clave.
em marca énfasis: la palabra que cambia el sentido de la frase si se acentúa al hablar.
i es solo cursiva visual: un término técnico, una palabra en otro idioma, un pensamiento, el nombre de una obra.
Contenido de texto
| <ul> | unordered list. Lista sin orden: se muestra con viñetas. El orden de los elementos no altera el sentido. |
| <ol> | ordered list. Lista ordenada: numeración o letras. La secuencia sí importa, como en unos pasos. |
| <li> | list item. Cada elemento de la lista. Va siempre dentro de una ul o una ol, nunca suelto. |
Contenido de texto
Contenido de texto
| src | La ruta del archivo. Obligatorio. |
| alt | La descripción en palabras. Obligatorio. |
| width height | Las dimensiones reales. Evitan que el diseño “brinque” mientras la imagen carga. |
Es una etiqueta vacía: no lleva cierre, porque no envuelve contenido.
Laboratorio 2
Estructura semántica completa, con estilo interno en <style> para ver cómo el CSS toma el relevo sobre el HTML.
Referencia
Práctica
Es el punto de partida de cualquier proyecto: se copia en el editor de código, se personaliza el contenido y a trabajar.
<!DOCTYPE html> activa el modo estándar de HTML5 y lang="es" declara el idioma del contenido.
charset="utf-8" permite acentos y eñes. La etiqueta viewport hace que el sitio se adapte a la pantalla del teléfono: sin ella, el diseño responsivo no funciona.
Lo que aparece en la pestaña y en el resultado de búsqueda. Se personalizan en cada página del sitio, no se dejan iguales.
Las etiquetas og: controlan cómo se ve el enlace al compartirlo en redes sociales o mensajería: título, descripción e imagen de la tarjeta.
Los iconos de la pestaña y de la pantalla de inicio en móviles. Se declaran en varios formatos para cubrir distintos dispositivos.
Enlaza el archivo CSS externo. Va en el <head> para que el navegador aplique los estilos desde el primer momento y no se vea la página “sin formato”.
El contenido visible va en el <body>, y el <script> se coloca al final para que la página se muestre antes de ejecutar el código.
Práctica
Falta un </div> y el diseño se desacomoda de ahí hacia abajo. Se detecta indentando bien el código.
<p><strong>…</p></strong> está cruzado. Se cierra siempre en orden inverso al que se abrió.
Copiar desde Word convierte las comillas rectas en “curvas” y el atributo deja de funcionar. Se escribe en un editor de código.
Usar <h4> porque “se ve del tamaño que quiero”. El tamaño es CSS; la etiqueta es jerarquía.
Aparecen símbolos raros en lugar de las vocales acentuadas: falta <meta charset="UTF-8">.
Foto.JPG no es foto.jpg. En la computadora local puede funcionar; en el servidor, no. Todo en minúsculas y sin espacios.
Práctica
Un ejemplo funcionando, con el código HTML y el CSS a la vista y editables en el mismo visualizador.
Se pueden modificar los elementos y los estilos directamente ahí, o copiar el código y pegarlo en un editor como Visual Studio Code para seguir trabajándolo en la computadora.
Ir al ejemplo ↗codepen.io/LuisGil/pen/KwVaoJR
Usa header, nav, main, section, article, aside y footer.
Incluye <video> y <audio> sin complementos externos.
La etiqueta viewport hace que funcione bien en dispositivos móviles.
Estilos básicos que dan color y forma al contenido, como anticipo del siguiente tema.
Evaluación
A partir de la plantilla base, construir una página de presentación personal y entregar el archivo .html junto con una captura del resultado.
01 Partir del boilerplate y personalizar title, description y lang.
02 Estructurar con header, nav, main, aside y footer.
03 Incluir una jerarquía correcta de encabezados: un solo h1, sin saltos de nivel.
04 Agregar al menos una lista, tres enlaces y dos imágenes con su alt bien redactado.
05 Usar strong y em al menos una vez cada uno, y justificar por qué ahí.
06 Validar el documento y entregarlo sin errores.
| Criterio | Peso |
|---|---|
| Semántica correcta | 35 % |
| Estructura y jerarquía | 25 % |
| Atributos y accesibilidad | 20 % |
| Documento válido, sin errores | 20 % |
¿Por qué HTML no es un lenguaje de programación? · ¿Qué partes tiene un elemento? · ¿Qué hace el DOCTYPE? · ¿Cuándo se usa section y cuándo article? · ¿Qué diferencia hay entre strong y b? · ¿Por qué el alt no es opcional?
Referencia
Referencia y tutoriales en línea con ejemplos ejecutables de cada etiqueta.
w3schools.com
Generadores, recursos y herramientas de HTML y CSS.
cssportal.com
La documentación de referencia del oficio, en español. Cada etiqueta con su definición, ejemplos y notas de accesibilidad.
developer.mozilla.org
Revisa un documento completo y señala línea por línea los errores de marcado.
validator.w3.org
Documentación consultada en 2025. La referencia normativa del lenguaje la mantiene el WHATWG como estándar vivo.
Fin del subtema 2.2
Con HTML el contenido ya tiene nombre y jerarquía. En la siguiente sesión llega CSS y todo eso empieza a verse como un diseño.
Esta presentación está pensada para pantalla horizontal.
Código HTML: etiquetas y atributos