Contents

1 Prefacio del autor 3

2 Introducción 5

3 Bases de HTML 7
3.1 Estructura de una página en HTML . . . . . . . . . . . . . . . . 8
3.2 Etiquetas o elementos . . . . . . . . . . . . . . . . . . . . . . . . 10
3.3 Atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.4 ¿Mayúsculas o minúsculas? . . . . . . . . . . . . . . . . . . . . . 11
3.5 Espaciado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

4 La etiqueta head 14
4.1 La etiqueta title . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.2 La etiqueta script . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.3 La etiqueta noscript . . . . . . . . . . . . . . . . . . . . . . . . 16
4.4 La etiqueta link . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.5 La etiqueta style . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.6 La etiqueta base . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.7 La etiqueta meta . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

5 La etiqueta ´body´ 22
5.1 Bloques o líneas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

6 Etiquetas que interactúan con el texto 24

6.1 La etiqueta p . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
6.2 La etiqueta span . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
6.3 La etiqueta br . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
6.4 Etiquetas de encabezado . . . . . . . . . . . . . . . . . . . . . . . 25
6.5 La etiqueta strong . . . . . . . . . . . . . . . . . . . . . . . . . . 26
6.6 La etiqueta em . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
6.7 Citas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
6.8 Línea horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
6.9 Bloques de código . . . . . . . . . . . . . . . . . . . . . . . . . . 27
6.10 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
6.11 Otras etiquetas de texto . . . . . . . . . . . . . . . . . . . . . . . 30

7 Enlaces 31

8 Etiquetas de contenedor y estructura de página 33

8.1 Etiquetas de contenedor . . . . . . . . . . . . . . . . . . . . . . . 33
8.2 Etiquetas relacionadas con la página . . . . . . . . . . . . . . . . 35

9 Formularios 37

1
 9.1 La etiqueta input . . . . . . . . . . . . . . . . . . . . . . . . . . 38
9.2 Envío de formulario . . . . . . . . . . . . . . . . . . . . . . . . . 40
9.3 Validación de Formulario . . . . . . . . . . . . . . . . . . . . . . 41
9.4 Otros campos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
9.5 La etiqueta textarea . . . . . . . . . . . . . . . . . . . . . . . . 46
9.6 La etiqueta select . . . . . . . . . . . . . . . . . . . . . . . . . . 46

10 Tablas 48
10.1 Descripción de tabla . . . . . . . . . . . . . . . . . . . . . . . . . 55

11 Etiquetas multimedia: audio y video 56

11.1 La etiqueta audio . . . . . . . . . . . . . . . . . . . . . . . . . . 56
11.2 La etiqueta video . . . . . . . . . . . . . . . . . . . . . . . . . . 57

12 Iframes 60
12.1 Srcdoc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
12.2 Sandbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
12.3 Allow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
12.4 Referrer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

13 Imágenes 64
13.1 La etiqueta figure . . . . . . . . . . . . . . . . . . . . . . . . . . 64
13.2 Imágenes responsivas usando srcset . . . . . . . . . . . . . . . . 65
13.3 La etiqueta picture . . . . . . . . . . . . . . . . . . . . . . . . . 66

14 Accesibilidad 68
14.1 Uso de HTML semático . . . . . . . . . . . . . . . . . . . . . . . 69
14.2 Use atributos alt para las imágenes . . . . . . . . . . . . . . . . 70
14.3 Use el atributo role . . . . . . . . . . . . . . . . . . . . . . . . . 70
14.4 Use el atributo tabindex . . . . . . . . . . . . . . . . . . . . . . 71
14.5 Use los atributos aria . . . . . . . . . . . . . . . . . . . . . . . . 71
14.6 Dónde aprender más . . . . . . . . . . . . . . . . . . . . . . . . . 73

2
1 Prefacio del autor
HTML es la base de la maravilla que hoy conocemos como la Web.
Hay un increíble poder bajo este relativamente simple y limitado conjunto de reglas,
que nos permite crear documentos, aplicaciones y experiencias para personas
alrededor del mundo.
Mi primer libro de HTML (refiriéndose al autor original) fue lanzado en 1997 y
se llamaba “HTML Unleashed”. Un tomo largo, grande y de muchas páginas.
20+ años han pasado desde entonces, y HTML es todavía la base de la web tal y
como la conocemos hoy en día, con cambios mínimos desde entonces.
Sí, tenemos nuevas etiquetas semánticas, se dejó de usar HTML para dar estilos,
y CSS ha tomado las riendas del diseño.
Pero el éxito de HTML se basa en una sola cosa: su sencillez.
Resistió su transformación a un dialecto de XML por medio de XHTML, cuando,
eventualmente, la gente se dió cuenta que era demasiado complejo.
Logró hacerlo gracias a otra de sus funciones: su flexibilidad. Aunque hay
algunas reglas, después de aprenderlas el usuario tiene mucha libertad para
programar.
Los navegadores de internet aprendieron a ser resilientes y a intentar hacer lo
mejor al presentar código HTML a sus usuarios.
Y había algo que la plataforma Web hacía muy bien: siempre funcionaba con
documentos antiguos. Por increíble que sea, podemos ir hoy en día a documentos
HTML escritos en 1991, y se ven prácticamente iguales a como se veían en aquel
entonces.
Incluso sabemos cuál fue la primera página. Es ésta: http://info.cern.ch/hyperte
xt/WWW/TheProject.html.
Y puedes ver su código fuente ya que, gracias a otra gran función de HTML,
podemos inspeccionar el código HTML de cualquier página web.
Sin embargo, no crea que es algo común. No conozco otra plataforma que nos dé
ésta habilidad.
Las excepcionales Herramientas de Desarrollador incluidas en cualquier naveg-
ador nos permiten tomar inspiración de cualquier documento HTML escrito por
cualquier persona del mundo.
Si recién aprendes sobre HTML, este libro apunta a darte una mano en tu
aprendizaje. Si eres un desarrollador web experimentado, este libro mejorará tus
conocimientos.

3
Aprendí mucho al escribirlo, a pesar que llevo trabajando en la web más de 20
años, y estoy seguro que usted también aprenderá algo nuevo.
. . . O tal vez vuelva a aprender algo que había olvidado.
De cualquier manera, la finalidad del libro es que le sea útil, y espero tenga éxito
en su misión.

4
2 Introducción
HTML es un estándar definido por el WHATWG, un acrónimo para Web
Hypertext Application Technology Working Group, una organización formada por
gente trabajando en los navegadores web más populares. Básicamente significa
que está controlado por Google, Mozilla, Apple y Microsoft.
En el pasado, el W3C (Consorcio World Wide Web) era la organización a cargo
de crear el estándar HTML.
El control del mismo pasó del W3C al WHATWG cuando quedó claro que la
inclinación del W3C hacia el XHTML no era una buena idea.
Si nunca has escuchado de XHTML, acá tienes una historia corta. A principios
de los 2000, todos creíamos que el futuro del internet era XML (en serio). Así
que HTML pasó de ser un lenguaje de marcado basado en SMGL a un lenguaje
de marcado XML.
Era un cambio bastante grande. Teníamos que conocer y respetar más reglas,
siendo estas también más estrictas.
Eventualmente, las empresas detrás de los navegadores se dieron cuenta que no
era el camino a tomar, creando lo que es ahora conocido como HTML5.
El W3C no cedió al principio el control de HTML, y por años tuvimos dos
estándares competidores, cada uno buscando ser el oficial. El 28 de mayo de 2019,
eventualmente, se hizo oficial por medio del W3C que la “verdadera” versión de
HTML era la publicada por WHATWG.
Mencioné HTML5, así que tengo otra pequeña historia. Lo sé, es un poco confuso
hasta ahora, como con cualquier cosa en la vida en la que hay muchos actores en
juego, pero es igual de fascinante.
Tuvimos la versión 1 de HTML en 1993. Acá está el RFC original.
HTML 2 apareció en 1995.
Tuvimos HTML 3 en enero de 1997, y HTML 4 en diciembre del mismo año.
¡Tiempos ajetreados!
Más de 20 años pasaron y tuvimos esta cosa del XHTML, y eventualmente
terminamos teniendo HTML5, que ya no es simplemente HTML.
HTML5 es ahora un término que define un conjunto entero de tecnologías, las
cuales incluyen a HTML, pero también así a un montón de APIs y estándares
como WebGL, SVG y más.
Es importante entender que ahora ya no existe una cosa tal como una versión
HTML. Es ahora un estándar viviente como CSS, que es llamado “3”, pero es en
realidad un montón de módulos independientes desarrollados por separado, justo

5
como JavaScript, donde tenemos cada año una nueva edición. Sin embargo, lo
único que importa son las características individuales que son implementadas por
el motor.
Sí, lo llamamos HTML5, pero HTML4 viene de 1997. Para cualquier cosa eso es
un montón de tiempo, aún más para el área de tecnologia.
La definición del estándar ahora “vive” en https://html.spec.whatwg.org/multi
page.

6
3 Bases de HTML
HTML es el lenguaje de marcado que usamos para estructural el contenido que
consumimos en internet.
HTML se sirve al navegador de diferentes maneras. * Puede ser generado por
una aplicación del servidor que lo construya dependiendo de la petición o de los
datos de la sesión, como por ejemplo con Rails, Laravel o Django. * Puede ser
generado por una aplicación de JavaScript del lado del cliente que genere HTML
en su ejecución. * De manera más simple, puede ser almacenado en un archivo y
servido al navegador por medio de un servidor web.
Vayamos a este último caso. Aunque en la práctica posiblemente es la forma
menos popular para generar HTML, sigu siendo esencial conocer al menos los
bloques más básicos.
Por convención, un archivo HTML es guardado con una extensión .html o .htm.
Dentro de este archivo, organizamos el contenido usando etiquetas (o tags, en
inglés).
Las etiquetas están alrededor del contenido, y cada una le da un significado
especial al texto que rodea.
Hagamos algunos ejemplos.
Este fragmento de HTML crea un parágrafo usando la etiqueta p:
<p>Un parágrafo de texto</p>

Este otro fragmento crea una lista de objetos usando la etiqueta ul, que significa
lista sin ordenar (el nombre viene del inglés unordered list), y las etiquetas li,
que significan objeto de lista (list item, en inglés):
<ul>
<li>Primer objeto</li>
<li>Segundo objeto</li>
<li>Tercer objeto</li>
</ul>

Cuando una página HTML es servida por el navegador, las etiquetas son interpre-
tadas, y el navegador muestra los elementos de acuerdo con las reglas que definen
su apariencia visual.
Algunas de estas reglas están estrablecidas de fábrica, como la manera en la que
una lista se muestra o como un enlace está subrayado y en color azul.
Algunas otras reglas pueden ser establecidas por usted usando hojas de estilo en
cascada, conocidas más comúnmente como CSS..

7
HTML no es un lenguaje de presentación. No se preocupa por cómo las cosas se
ven, sino por qué significan.
Queda de parte del navegador determinar cómo se ven las cosas con las reglas
establecidas por la persona que crea la página usando el lenguaje CSS.
Sin embargo, esos dos ejemplos eran fragmentos tomados fuera del contexto de
una página real.

3.1 Estructura de una página en HTML

Hagamos un ejemplo de una página en HTML real
Las cosas comienzan con la declaración del tipo de documento (conocido como
doctype), una manera de decirle al navegador que lo que está “viendo” es una
página HTML, así como la versión que está utilizándose.
El HTML moderno usa esta declaración de la siguiente manera:
<!DOCTYPE html>

Luego tenemos el elemento html, que tiene una etiqueta de apertura y de clausura:
<!DOCTYPE html>
<html>
...
</html>

La mayoría de las etiquetas viene en pares, con una etiqueta de apertura y de

cerradura. La etiqueta de cerradura se escrible casi de la misma manera que la
de clausura, pero con un /:
<etiqueta>contenido</etiqueta>

Hay algunas etiquetas que no requieren etiquetas de clausura, dado que no

contienen nada dentro de ellas.
La etiqueta de apertura html se usa al principio del documento, después de la
declaración del tipo de documento.
La etiqueta de clausura de html es lo último presente en un documento de HTML.
Dentro del elemento html tenemos dos elementos : head y body:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>

8
 ...
</body>
</html>

Dentro de head tendremos etiquetas esenciales para la creación de una página web,
como el título, los metadatos, el CSS interno o externo y el código de JavaScript.
La mayoría de estas cosas no aparecen directamente en la página, sino que ayudan
al navegador (o a los bots de búsqueda) a mostrarla apropiadamente.
Dentro de body tendremos el contenido de la página. Las cosas visibles.

3.2 Etiquetas o elementos

Mencioné etiquetas y elementos. ¿Cuál es la diferencia?
Los elementos tienen una etiqueta de apertura y una de clausura. En este ejemplo,
usaremos las etiquetas de apretura y clausura ppara crear un elemento p:
<p>Un parágrafo de texto</p>

Así, un elemento constituye el paquete entero:

• una etiqueta de apertura
• el texto de contenido (y posiblemente otras cosas)
• una etiqueta de clausura
Si un elemento no tiene una etiqueta de clausura, está solo escrito con la etiqueta
de apertura y por esto no puede contener ningun texto.
Explicado esto, puedo usar ambos términos de manera intercambiable, a menos
que explícitamente se mencione una etiqeuta de apertura o de clausura.

3.3 Atributos
La etiqueta de apertura de un elemento puede tener fragmentos especiales de
información que podemos agregarle, llamados atributos.
Los atributos tienen una sintaxis de atributo="valor":
<p class="una-clase">Un parágrafo de texto</p>

También pueden usarse comillas simples, pero es una buena práctica

usar comillas dobles en su lugar.
Podemos tener muchos de ellos:
<p class="una-clase" id="un-id">Un parágrafo de texto</p>

algunos de los atributos son booleanos, lo que significa que solo se necesita el
atributo:

9
<script defer src="archivo.js"></script>

Los atributos class e id son de los que más te encontrarás.

Tienen un significado especial, y son útiles tanto en CSS como en JavaScript.
La diferencia entre ambos es que un id es único dentro del contexto de una página
web, no puede ser duplicado.
Las clases, por otra parte, pueden aparecer múltiples veces en múltiples elementos.
Además, un id debe ser solo un valor. class, por su parte, puede contener
múltiples valores, separados por un espacio:
<p class="una-clase otra-clase">Un parágrafo de texto</p>

Es común usar guiones - para separar palabras en un valor de clase, pero no es

obligatorio.
Esos son solo dos de los atributos que puede usar. Algunos de ellos pueden ser
usados solo en ciertas etiquetas, ya que son altamente especializados.
Otros atributos pueden ser usados de manera más general. Justo acaba de ver
dos de ellos, id y class, pero también tenemos otros, como style, que puede ser
usado para agregar CSS dentro de un elemento (vale acotar que es una práctica
no recomendada).

3.4 ¿Mayúsculas o minúsculas?

En HTML, es irrelevante que se use unas u otras dentro de las etiquetas. Las
etiquetas pueden ser escritas enteramente en mayúsculas o minúsculas. Otrora
era común usar mayúsculas, pero hoy en día es común usar minúsculas.
Usualmente escribiría así:
<p>Un parágrafo de texto</p>

y no así:
<P>Un parágrafo de texto</P>

3.5 Espaciado
Un detalle importante. En HTML, el espaciado no es relevante. A la hora de la
interpretación, los espacios en blanco se quitan de la ecuación.
Para el navegador,
<p>Un parágrafo de texto</p>

10
es lo mismo que
<p> Un parágrafo de texto</p>

y lo mismo que
<p>Un parágrafo

de
texto </p>

Le aconsejaría que usara una sintaxis que le permita organizar visualmente los
elementos, de manera que sea más fácil de leer, pero es libre de usar cualquier
sintaxis que desee.
Yo prefiero,
<p>Un parágrafo de texto</p>

o
<p>
Un parágrafo de texto
</p>

Las etiquetas que estén dentro de otras deberían ser indentadas con 2 o 4 espacios
(o tabulaciones, dependiendo de su gusto):
<body>
<p>
Un parágrafo de texto
</p>
<ul>
<li>Un objeto de lista</li>
</ul>
</body>

Nota: esta característica del espaciado significa que, si asi lo desea,

agregar espacio puede ser bastante complicado. Le sugiero que use
CSS para hacer más espacio cuando sea necesario.
Nota: en casos especiales, puede usar la entidad HTML &nbsp;
(un acrónimo que significa non-breaking space (o un espacio que
sí se muestra), pero explicaré más luego. Sin embargo, creo que
esto no debería ser abusado. Es preferible usar CSS para alterar la
presentación visual.

11
4 La etiqueta head
Esta etiqueta contiene otras etiquetas especiales que definen las propiedades del
documento.
Siempre se escribe antes de la etiqueta body, justo después de la etiqueta html
de apertura:
<!DOCTYPE html>
<html>
<head>
...
</head>
...
</html>

Nunca usamos atributos en esta etiqueta, tampoco escribimos contenido en ella,

ya que es solo un contenedor para otras etiquetas.
Algunas de ellas son las siguientes, dependiendo de lo que necesite
• title
• script
• noscript
• link
• style
• base
• meta

4.1 La etiqueta title

Esta etiqueta determina el título de la página. El mismo es mostrado en el
navegador, y es especialmente importante ya que es parte esencial en el tema de
la optimización de motor de búsqueda (o SEO, por sus siglas en inglés).

4.2 La etiqueta script

Esta etiqueta es usada para agregar JavaScript a la página.
Puede agregarlo dentro del mismo documento, con una etiqueta de apertura, el
código, y una etiqueta de clausura:
<script>
..código JS
</script>

O, alternativamente, puede cargar un archivo JavaScript externo usando el

atributo src:

12
<script src="archivo.js"></script>

El atributo type, por defecto, está configurado como text/javascript,

así que es completamente opcional.
Hay un detalle bastante importante respecto a esta etiqueta.
Suele ser colocada, si existe, al final de la página, justo antes de la etiqueta
</body> de clausura. ¿Por qué? Por cuestiones de rendimiento.
Al cargar código JS (o scripts), el navegador bloquea por defecto la visualización
de la página hasta que el script esté interpretado y cargado.
Al colocarlo al fondo de la página, es cargado y ejecutado después que la página
haya sido interpretada y cargada, otorgando una mejor experiencia al usuario
que si estuviera en la etiqueta head.
En mi opinión, estas son malas prácticas hoy en día. No hay problemas en dejar
que las etiquetas script estén dentro de head.
En el JS moderno, tenemos una alternativa mejor que dejar los scripts al final,
siendo este el atributo defer. Este es un ejemplo que carga un archivo.js,
relativo a la dirección actual:
<script defer src="archivo.js"></script>

Con esto, se tiene un escenario que llevará a un camino más rápido para cargar
tanto la página como el JavaScript.

4.3 La etiqueta noscript

Esta etiqueta es usada para detectar si los scripts están deshabilitados por el
navegador.
Nota: los usuarios pueden elegir deshabilitar los scripts de JS en los
ajustes del navegador, así como también puede que el navegador no
los soporte por defecto.
Se usa de manera distinta dependiendo del lugar en el que se ponga, pudiendo
ser dentro de la etiqueta head o dentro de la etiqueta body.
Ya que estamos hablando de la etiqueta, presentaré su uso.
En este caso, la etiqueta noscript solo puede contener etiquetas:
• link
• style
• meta

13
para alterar los recursos servidos por la página, en caso que los scripts estén
deshabilitados.
En este ejemplo, establezco un elemento con la clase no-script-alert a mostrarse
si los scripts están desactivados, ya que tiene la clase de CSS display: none por
defecto:
<!DOCTYPE html>
<html>
<head>
...
<noscript>
<style>
.no-script-alert {
display: block;
}
</style>
</noscript>

...
</head>
...
</html>

Por otra parte, si se pone dentro de la etiqueta body, puede contener

parágrafos u otras cosas para ser mostradas en la interfaz de usuario.

4.4 La etiqueta link

Es usada para establecer relaciones entre un documento y otros recursos.
Es usada principalmente para enlazar y permitir cargar un archivo de CSS externo.
Este elemento no tiene etiqueta de clausura.
Uso:
<!DOCTYPE html>
<html>
<head>
...
<link href="archivo.css" rel="stylesheet">
...
</head>
...
</html>

14
El atributo media permite cargar diferentes hojas de estilo dependiendo de las
capacidades del dispositivo:
<link href="file.css" media="screen" rel="stylesheet">
<link href="print.css" media="print" rel="stylesheet">

También se pueden lanzar otros contenidos además de hojas de estilo.

Por ejemplo, podemos enlazar una fuente RSS usando
<link rel="alternate" type="application/rss+xml" href="/index.xml">

O podemos enlazar un favicon usando:

<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-ico

<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x3

<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x1

Esta etiqueta fue usada por Google para contenido multipágina, para indicar la
página anterior y previa, usando rel="prev" y rel="next". Hasta el momento
de la escritura de este libro (2019), Google anunció que ya no usa más esta
etiqueta, ya que puede encontrar la estructura correcta del libro sin ella.

4.5 La etiqueta style

Puede ser usada para agregar estilos al documento, en lugar de cargar una hoja
de estilos externa.
Uso:
<style>
.algun-css {}
</style>

Como con a etiqueta link, peude usar el atributo media para ajustar dónde se
usará, específicamente, ese CSS:
<style media="print">
.some-css {}
</style>

4.6 La etiqueta base

Es usada para establecer una dirección base para todas las direcciones relativas
contenidas en la página.

15
<!DOCTYPE html>
<html>
<head>
...
<base href="https://github.com/zetta102">
...
</head>
...
</html>

4.7 La etiqueta meta

Las etiquetas meta ejecutan una variedad de importantes tareas, especialmente
en cuando a SEO se refiere.
Los elementos meta solo tienen una etiqueta de apertura.
La más básica es la etiqueta meta de description, usada para describir algo:
<meta name="descripción" content="Una bonita página">

Esto “puede” ser usado por Google para generar la descripción de la página en
sus resultados de búsqueda, en caso que lo encuentre mejor que el contennido
dentro de la misma (no me pregunte cómo).
La etiqueta meta de charset es usada para establecer la codificación de los
caracteres de la página. Suele ser utf-8 en la mayoría de los casos:
<meta charset="utf-8">

La etiqueta meta de robots instruye al motor de búsqueda respecto a la posibili-

dad (o no) de indexar una página (en otras palabras, mostrarla en los resultados
de búsqueda del respectivo motor):
<meta name="robots" content="noindex">

O si deberían seguir los enlaces o no (esto significa pedir que los enlaces sean

ono

indexados por el motor de búsqueda):

<meta name="robots" content="nofollow">

También puede establecerlo con enlaces individuales. Esta es una

manera de establecerlo globalmente.
También se pueden combinar:

16
<meta name="robots" content="noindex, nofollow">

El comportamiento por defecto es index, follow.

También puede usar otras propiedades, como podrían ser nosnippet, noarchive,
noimageindex y más.
También puede simplemente ‘hablar’ con Google en lugar de todos los motores de
búsqueda:
<meta name="googlebot" content="noindex, nofollow">

Y otros motores de búsqueda podrían también tener sus propias etiquetas meta.
Hablando de ello, podemos pedirle a Google que deshabilite algunas características.
Esto previene, por ejemplo, que se active la funcionalidad de traducción en los
resultados del motor de búsqueda:
<meta name="google" content="notranslate">

La etiqueta meta viewport es usada para decirle al navegador que estableca la

anchura de la página en base a la del dispositivo.
<meta name="viewport" content="width=device-width, initial-scale=1">

Otra etiqueta meta bastante popular es http-equiv="refresh". En este caso,

pide que el navegador redirija a otra página después de esperar 3 seg:
<meta http-equiv="refresh" content="3;url=http://otra-pagina.com>

Usar 0, redirigirá tan rápido como sea posble.

Vale acotar que no es una referencia completa, existen otras etiquetas meta menos
usadas.
Después de este deocumento, podremos ahondar en el cuerpo del mismo.

17
5 La etiqueta ´body´
Después de cerrar la etiqueta ´head´, solo podemos tener una etiqueta más en
un documento HTML: el elemento body.
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>

Tal como las etiquetas head y html, solo podemos tener una etiqueta ´body´ en
una página.
Dentro de la etiqueta body tenemos todas las etiquetas que definen el contenido
de la página.
Técnicamente, las etiquetas de apertura y clausura son opcionales, pero considero
que es una buena práctica agregarlas solo por cuestiones de claridad.
En los próximos capítulos definiremos la variedad de etiquetas que se pueden usar
dentro del cuerpo de la página.
Pero antes, debemos presentar la diferencia entre elementos de bloque y elementos
de línea.

5.1 Bloques o líneas

Los elementos visuales, que están definindos en el cuerpo de la página, pueden
ser generalmente clasificados en dos categorías:
• elementos en bloque (p, div, listas y sus objetos, . . . )
• elementos en línea (a, span, img, . . . )
¿Cuál es la diferencia?
Los elementos en bloque, al posicionarse en la página, no permiten otros elementos
cerca de ellos,. ya sea a la derecha o izquierda.
Los elementos en línea, en su lugar, pueden estar cerca de otros elementos en
línea.
La diferencia también yace en las propiedades visuales que podemos editar usando
CSS. Podemos alterar la altura/anchura, margen interno/externo y el borde de

18
los elementos en bloque, mientras que no podemos en el caso de los bloques en
línea.
Nótese que usar CSS permite cambiar los valores por defecto de
los elementos, haciendo que una etiqueta p esté en línea, o que un
elemento span esté en bloque.
Otra diferencia es que los elementos en línea pueden estar dentro de elementos en
bloque, pero no al revés.
Algunos elementos en bloque pueden contener otros elementos en bloque, pero
depende de cada caso. La etiqueta p, por ejemplo, no permite tal opción.

19
6 Etiquetas que interactúan con el texto
6.1 La etiqueta p
Define un parágrafo de texto.
<p>Algún texto</p>

Es un elemento en bloque.
Dentro, podemos agregar cualquier elemento en línea que queramos, como un
span o a.
No podemos agregar elementos en bloque. Tampoco podemos crear un elemento
p dentro de otro.
Por defecto, los navegadores dan estilo a los parágrafos con un margen arriba
y debajo del mismo. Es de 16px en Chrome, pero el valor exacto puede variar
entre navegadores.
Esto causa que dos parágrafos consecutivos estén espaciados entre ellos, replicando
lo que esperaríamos de un “parágrafo” en medios como un periódico.

6.2 La etiqueta span

Es una etiqueta en línea que puede ser usada para crear una sección en un
parágrafo para que pueda ser modificada con CSS:
<p>Una parte del texto <span>y aquí otra</span></p>

6.3 La etiqueta br
Esta etiqueta representa un salto de línea. Es un elemento en línea, y no necesita
una etiqueta de clausura.
La usamos para crear saltos de línea dentro de una etiqueta p, sin crear un nuevo
parágrafo.
Y, comparados con un nuevo parágrafo, no necesitan espaciado adicional.
<p>Algo de texto<br>Una nueva línea</p>

6.4 Etiquetas de encabezado

HTML nos provee 6 etiquetas de encabezado. De la más a la menos importante,
tenemos h1, h2, h3, h4, h5, h6.
Tipicamente, una página tendrá un elemento h1, que será el título de la página.
Luego, puede que tenga uno o más elementos h2 dependiendo del contenido de la

20
página.
Los encabezados, especialmente durante la organización de los mismos, son
esenciales para el SEO, donde los motores de búsqueda los usan de diferentes
maneras.
El navegador mostrará por defecto a la etiqueta h1 con el tamaño de texto más
grande, reduciéndolo a medida que el número cerca de h aumenta:

Todos los encabezados son elementos en bloque. No pueden contener otros

elementos, solo texto.

21
6.5 La etiqueta strong
Esta etiqueta es usada para marcar al texto que lleva dentro como importante.
Vale notar esto porque no es una ayuda visual sino semántica, cuya interpretación
dependerá del medio usado.
Los navegadores, por defecto, cambiarán el texto que tengan dentro a negritas.

6.6 La etiqueta em
Esta etiqueta es usada para darle énfasis al texto que lleva dentro. Como strong,
no es una ayuda visual sino semántica.
Los navegadores, por defecto, cambiarán el texto que tengan dentro a cursiva.

6.7 Citas
La etiqueta HTML blockquote es útil para insertar citas en el texto. Es una
etiqueta en bloque.
Los navegadores, por defecto, aplicarán un margen a un elemento blockquote.
Chrome aplica un margen de 40px izquierdo y derecho, y un margen de 10px
arriba y abado.
La etiqueta HTML q es usada también para citas, pero en línea.

6.8 Línea horizontal

No está realmente basada en texto, pero la etiqueta hr suele ser usada dentro de
una página para agregar una página horizontal en la misma.
Es útil para separar secciones de una página.

6.9 Bloques de código

La etiqueta code es especialmente útil para mostrar código, debido a la fuente
especial que le otorga al texto que tiene dentro.
Eso suele ser lo único que hacen los navegadores con el texto. Este es el CSS
aplicado por Chrome:
code {
font-family: monospace;
}

Esta etiqueta es típicamente agregada dentro de una etiqueta pre tag, ya que el
elemento code ignora el espacio y los saltos de línea, similar a la etiqueta p.
Chrome le da el siguiente estilo a la etiqueta pre:

22
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0px;
}

lo que previene que el espacio en blanco colapse, haciéndolo un elemento en

bloque.

6.10 Listas
Tenemos 3 tipos de listas:
• listas sin ordenar
• listas ordenadas
• listas de definiciones
Las listas sin ordenar son creadas usando la etiqueta ul. Cada objeto en la lista
es creado con la etiqueta li:
<ul>
<li>Primero</li>
<li>Segundo</li>
</ul>

Las listas ordenadas son similares, solo que con la etiqueta ol en su lugar:
<ol>
<li>Primero</li>
<li>Segundo</li>
</ol>

La diferencia entre ambas es que las listas ordenadas tienen un número antes de
cada objeto:

23
Las listas de definición son un poco más diferentes. Están compuestas de un
término y su descripción:
<dl>
<dt>Flavio</dt>
<dd>El nombre</dd>
<dt>Copes</dt>
<dd>El apellido</dd>
</dl>

Típicamente son mostradas de la siguiente forma por los navegadores:

Debo admitir que no se ven tanto en el día a día como las dos anteriores, pero
pueden ser útiles en algunas ocasiones.

24
6.11 Otras etiquetas de texto
Hay otro número de etiquetas con propósitos de presentación:
• la etiqueta mark
• la etiqueta ins
• la etiqueta del
• la etiqueta sup
• la etiqueta sub
• la etiqueta small
• la etiqueta i
• la etiqueta b
Este es un ejemplo de la la visualización aplicada por los navegadores:

Acá puede que se pregunte, ¿en qué se diferencia b de strong? ¿Y cómo es i

diferente de em?
La diferencia radica en el significado semántico. Aunque b e i son instrucciones
directas al navegador para que aplique un estilo en particular al texto, strong
y em le da un significado especial, y queda de parte del navegador el estilo que
le otorgue. Casualmente, es por defecto el mismo estilo de b e i, pero puede
cambiarse usando CSS.
Todavía quedan algunas otras etiquetas relacionadas al texto por explicar, pero
son muy poco usadas.

25
7 Enlaces
Los enlaces son definidos usando la etiqueta a. El destino del enlace estará en su
atributo href.
Ejemplo:
<a href="https://flaviocopes.com">haz click aquí</a>
``

Entre la etiqueta de apertura y de clausura tendremos el texto del enlace.

El ejemplo de arriba es una dirección absoluta, aunque los enlaces también

```html
<a href="/test">haz click aquí</a>

En este caso, al hacer click en el enlace, el usuario es movido a la dirección /test,

partiendo desde el punto actual.
Tenga cuidado con el caracter ‘/’. Si es omitido, en lugar de comenzar desde la
raíz, el navegador solo agregará la palabra ‘test’ a la dirección actual.
Por ejemplo, si estoy en la página https://flaviocopes.com/axios/ y tengo
los enlaces /test y test:
• /test me llevará a https://flaviocopes.com/test
• test me llevará a https://flaviocopes.com/axios/test
Las etiquetas de enlace pueden contener otras cosas dentro aparte del texto. Por
ejemplo, imágenes:
<a href="https://flaviocopes.com">
<img src="test.jpg">
</a>

o cualquier otro elemento, excepto otras etiquetas a.

Si desea que el enlace se abra en una nueva ventana, puede usar el atributo
target:
<a href="https://flaviocopes.com" target="_blank">abrir en nueva ventana</

26
8 Etiquetas de contenedor y estructura de página
8.1 Etiquetas de contenedor
HTML provee un conjunto de etiquetas contenedor. Estas etiquetas contienen un
conjunto no especificado de otras etiquetas.
Tenemos:
• article
• section
• div
y puede ser difícil entender la diferencia entre ellas.
Veamos cuándo usar cada una de ellas.

8.1.1 article
Esta etiqueta identifica una cosa que puede ser independiente de otras cosas en
una página.
Por ejemplo, una lista de posts en la página principal.
O una lista de enlaces.
<div>
<article>
<h2>Un post</h2>
<a ...>Leer más</a>
</article>
<article>
<h2>Otro post</h2>
<a ...>Leer más</a>
</article>
</div>

El límite no son solo las listas: un articulo puede ser el elemento principal de una
página.
<article>
<h2>Un post</h2>
<p>Contenido...</p>
</article>

Dentro de una etiqueta article deberíamos tener un título (h1-h6) y una

27
8.1.2 section
Representa una sección de un documento. Cada sección tiene una etiqueta de
encabezado (h1-h6), y luego la sección del cuerpo.
Ejemplo:
<section>
<h2>Una sección de la página</h2>
<p>...</p>
<img ...>
</section>

Es útil dividir un artículo largo en diferentes secciones.

No debería usarse como un elemento contenedor génerico, ya que ese es el trabajo
de div.

8.1.3 div
div es el elemento contenedor genérico:
<div>
...
</div>

Se suele agregar un atributo class o id a este elemento, para poder modelarlo

con CSS.
Usamos div en cualquier lugar que necesitemos un contenedor, pero que las
etiquetas existentes no se ajusten lo suficiente.

8.2 Etiquetas relacionadas con la página

8.2.1 nav
Está etiqueta es usada para crear el esqueleto que define la navegación de página.
Dentro de ella suele agregarse una lista ul u ol:
<nav>
<ol>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ol>
</nav>

28
8.2.2 aside
La etiqueta aside es usada para agregar una pieza de contenido que está rela-
cionado al contenido principal.
Una caja en la cual agregar una cita, por ejemplo. O una barra lateral.
Ejemplo:
<div>
<p>algún texto..</p>
<aside>
<p>Una cita..</p>
</aside>
<p>otro texto...</p>
</div>

Usar aside permite señalar que las cosas que contiene no son parte del flujo
regular del documento.

8.2.3 header
La etiqueta header representa la introducción (o también el resumen) de una
página. Puede, por ejemplo, contener una o más etiquetas de encabezado (h1-h6),
un resumen, o una imagen.
<article>
<header>
<h1>Título del Artículo</h1>
</header>
...
</div>

8.2.4 main
La etiqueta main representa la parte principal del artículo main:
<article>
....
<main>
<p>....</p>
</main>
</div>

8.2.5 footer
La etiqueta footer se usa para determinar el pie de un artículo, o el pie de una
página:

29
<article>
....
<footer>
<p>Pie de nota..</p>
</footer>
</div>

30
9 Formularios
Los formularios son una forma de interacturar on una página o una aplicación
construida con tecnologías web.
Tiene un conjunto de controles, y cuando envía el formulario, ya sea con un boton
dedicado o por medio de código, el navegador enviará la información al servidor.
Por defecto, este envío de información hace que la página se recargue después
de enviar los datos, pero este comportamiento puede ser alterado con JS. Sin
embargo, este libro está dedicado únicamente a HTML.
Un formulario se crea usando la etiqueta form:
<form>
...
</form>

Por defecto, los formularios son enviados usando el método HTTP GET, el cual
tiene algunas contraindicaciones, por lo que usualmente preferirá usar POST.
Puede ajustar el método a POST al enviar usando el atributo method:
<form method="POST">
...
</form>

El formulario se enviará, ya sea usando GET o POST, a la misma dirección en la

que está alojada.
Así, si el formulario está en https://flaviocopes.com/contacts, al presionar
el botón de envío, hará una petición a la misma dirección.
Lo que puede que resulte en que no ocurra nada
Se necesita algo del lado del servidor para manejar la petición, y normalmente se
“escuchan” estos eventos por medio de una dirección dedicada.
Puedes especificar la dirección por medio el parámetro action:
<form action="/new-contact" method="POST">
...
</form>

Esto causará que el navegador envíe los datos de formulario con método POST a
la dirección /new-contact del mismo origen.
Si el origen (esto es, protocolo + dominio + puerto) es https://flaviocopes.com
(siendo el puerto 80 el usado por defecto), esto significa que los datos del formulario
serán enviados a https://flaviocopes.com/new-contact.

31
Hablé de datos, ¿pero cuáles datos?
Los datos son provistos por los usuarios por medio de un conjunto de controles
que están disponibles en la plataforma web:
• Cajas de texto (de línea única)
• Áreas de texto (de líneas múltiples)
• Cajas de selección (de selección única de una lista)
• Botones radio (o radio buttons, de selección única de una lista siempre
visible)
• Cajas de tildado (o checkboxes, de selección múltiple, o ninguna)
• Subida de archivos
• ¡Y mucho más!
Procederé a presentar cada uno de ellos a continuación.

9.1 La etiqueta input

Este campo es uno de los elementos de formulario más usados. También es un
elemento muy versátil, que puede cambiar completamente su comportamiento
basado en su atributo type.
El comportamiento por defecto es de un control de línea única:
<input>

Y eso es equivalente a:
<input type="text">

Como con todos los otros campos a continuación, se debe dar un nombre al campo
para que su contenido sea correctamente identificado al ser enviado el formulario
al servidor:
<input type="text" name="username">

El atributo placeholder se usa para mostrar texto dentro del elemento, en

color gris claro, cuando esté vacío. Es útil para dar una pista al usuario de qué
información introducir:
<input type="text" name="username" placeholder="Su nombre de usuario">

9.1.1 Email
Usar type="email" validará la información introducida del lado del cliente (en
otras palabras, en el navegador), para asegurarse que esté semáticamente correcto
(lo que significa que no verificará si existe el correo), antes de enviar el formulario.

32
<input type="email" name="email" placeholder="Su correo">

9.1.2 Contraseña
Usar type="password" hará que cualquier información introducida se muestre
como un asterisco (*), o un punto, útil para campos que estén destinados a
contraseñas.
<input type="password" name="password" placeholder="Su contraseña">

9.1.3 Números
Puede tener un campo que únicamente reciba números:
<input type="number" name="edad" placeholder="Su edad">

Puede especificar un valor máximo y mínimo por medio de los atributos max y
min, respectivamente:
<input type="number" name="edad" placeholder="Su edad" min="18" max="110">

El atributo step permite establecer los ‘pasos’ entre distintos valores. Por ejemplo,
este campo acepta un valor entre 10 y 50, en incrementos de 5 unidades:
<input type="number" name="un-numero" min="10" max="50" step="5">

9.1.4 Campo oculto

Los campos pueden estar ocultos del usuario, pero aún así su información será
enviada al servidor:
<input type="hidden" name="campo-oculto" value="algun-valor">

Esto es usado para almacenar valores como un token CSRF, conocido por ser
útil para seguridad e identificación de usuario, e inclusive la detección de bots de
envío de spam, usando técnicas especiales.
También se puede usar para identificar un formulario y su acción.

9.1.5 Configurando un valor por defecto

Todos estos tipos aceptan un valor por defecto. Si el usuario no lo cambia, ese
será el valor enviado al servidor:
<input type="number" name="edad" value="18">

Si usa un placeholder, ese valor aparecerá si el usuario borra el valor dentro del
campo:

33
<input type="number" name="edad" placeholder="Su edad" value="18">

9.2 Envío de formulario

El campo type="submit" es un botón que, una vez presionado, envía el formulario:
<input type="submit">

El atributo value ajusta el texto del botón, el cual se ajusta por defecto a
“Submit”:
<input type="submit" value="Haz click">

9.3 Validación de Formulario

Los navegadores proveen funcionalidades de validación del lado del cliente a los
formularios.
Puedes ajustar los campos como sea requerido, asegurándose de que fueron
rellenados, así como imponer un formato establecido para los datos de cada
campo.
Veamos ambas opciones.

9.3.1 Establecer campos requeridos

El atributo required ayuda a validar los campos. Si el campo no está lleno, la
validación del lado del cliente falla y el navegador no envía el formulario:
<input type="text" name="nombre de usuario" required>

9.3.2 Establecer un formato específico

Describí el type="email" hace unos párrafos atrás. Automáticamente valida
la dirección de correo electrónico de acuerdo con un formato establecido en su
especificación.
En el campo type="number", mencioné el atributo min y max para limitar los
valores a cierto intervalo.
Pero puede hacer más.
Puede imponer un formato específico en cualquier campo.
El atributo pattern le otorga la habilidad de establecer una expresión regular,
conocida como regular expression en inglés, contra la cual comparar la información
introducida.
Recomiendo leer mi guía de expresiones regulares en el siguiente enlace, en inglés.

34
<input type="text" name="username" pattern="[a-zA-Z]{8}">

9.4 Otros campos

9.4.1 Subidas de archivos
Puede subir archios locales desde su computador y enviarlos al servidor usando
un elemento con atributo type="file":
<input type="file" name="documentos-secretos">

Puede también adjuntar múltiples archivos:

<input type="file" name="documentos-secretos" multiple>

Puede especificar uno o más tipos de archivo permitido con el atributo accept.
Este ejemplo en particular acepta imágenes:
<input type="file" name="documentos-secretos" accept="image/*">

Puede usar un tipo MIME específico, como application/json, o también es-

tablecer una o múltiples extensiones de archivo, como podría ser .pdf:
<input type="file" name="secret-documents" accept=".jpg, .jpeg, .png">

9.4.2 Botones
Los campos type="button" pueden ser usados para agregar botones adicionales
a el formulario, que no sean botones de envíos:
<input type="button" value="Hazme click">

Son usados para hacer algo por medio de un método de código, usando JS.
Hay un campo especial mostrado como un botón, cuya acción es la de limpiar el
formulario entero y reestablecer el estado de los campos:
<input type="reset">

9.4.3 Botones radio

Son usados para crear un conjunto de elecciones dónde, si uno es presionado, los
demás son deshabilitados.
El nombre viene de las antiguas radios de automóvil que tenían este tipo de
interfaz.
Se define por medio de un conjunto de type="radio", todos con el mismo atributo
name, y diferentes atributos value:

35
<input type="radio" name="color" value="amarillo">
<input type="radio" name="color" value="rojo">
<input type="radio" name="color" value="azul">

Una vez el formulario sea enviado, la propiedad de datos color tendrá un único
valor.
Siempre hay al menos un elemento seleccionado. El primer objeto es el seleccionado
por defecto.
Se puede establecer el valor preseleccionado por medio del atributo checked. Solo
puede ser usado una vez por cada grupo de botones radio.

9.4.4 Cajas de tildado

Similares a los botones radio, pero permiten múltiples valores, o ninguno de ellos.
Se definen por medio de un conjunto de type="checkbox", todos con el mismo
atributo name, y diferentes atributos value:
<input type="checkbox" name="color" value="amarillo">
<input type="checkbox" name="color" value="rojo">
<input type="checkbox" name="color" value="azul">

Ninguna de estas cajas estarán tildadas por defecto. Puede usar el atributo
checked para tildarlas al cargar la página.
Ya que este campo permite múltiples valores, al enviar el formulario, estos serán
enviados al servidor como un array.

9.4.5 Fecha y hora

Tenemos algunos campos que aceptan valores de fecha.
El campo type="date" permite al usuario introducir una fecha, y muestra un
seleccionador si es necesario:
<input type="date" name="cumpleaños">

El campo type="time" permite al usuario introducir una hora, y muestra un

seleccionador si es necesario:
<input type="time" name="hora-de-busqueda">

El campo type="month" permite al usuario introducir un mes y un año:

<input type="month" name="mes-lanzamiento">

El campo type="week" permite al usuario introducir una semana y un año:

36
<input type="week" name="elegir-semana">

Todos estos campos permiten limitar el rango y los incrementos entre cada valor.
Recomiendo revisar la Red de Desarrolladores de Mozilla (abreviado MDN) para
los pormenores de su uso.
El campo type="datetime-local" te permite elegir una fecha y una hora.
<input type="datetime-local" name="fechar-y-hora">

Acá una página en la cual probarlos todos.

9.4.6 Selección de color

Puedes permitir que el usuario seleccione un color por medio del elemento
type="color":
<input type="color" name="color-auto">

Puede ajustar un valor por defecto usando el atributo value:

<input type="color" name="color-auto" value="#000000">

El navegador se encargará de mostrar un seleccionador al usuario.

9.4.7 Rango
Este elemento muestra una barra deslizante, la cual puede ser movida desde un
valor de inicio hasta un valor final:
<input type="range" name="edad" min="0" max="100" value="30">

Opcionalmente, se puede incluir el valor de los incrementos entre valores:

<input type="range" name="age" min="0" max="100" value="30" step="10">

9.4.8 Teléfono
El campo type="tel" se usa para introducir un número de teléfono:
<input type="tel" name="numero-telefono">

La ventaja de usar tel sobre text es que, en móviles, el dispositivo mostrará un

teclado númerico.
Puede especificar un atributo pattern para validación adicional:
<input type="tel" pattern="[0-9]{3}-[0-9]{8}" name="numero-teléfono">

37
9.4.9 Dirección
El campo type="url" se usa para introducir una dirección.
<input type="url" name="sitio-web">

Se puede validar usando el atributo pattern:

<input type="url" name="website" pattern="https://.*">

9.5 La etiqueta textarea

El elemento textarea permite a los usuarios introducir texto multilinea. Com-
parado con input, requiere una etiqueta de clausura:
<textarea></textarea>

Puede ajustar sus dimensiones usando CSS, así como también usando los atributos
rows y cols:
<textarea rows="20" cols="10"></textarea>

Como otras etiquetas de formulario, el atributo name determinar el nombre de

los datos enviados al servidor:
<textarea name="articulo"></textarea>

9.6 La etiqueta select

Esta etiqueta se usa para crear un menú desplegado.
Allí, el usuario puede elegir una de las opciones disponibles.
Cada opción se crea usando la etiqueta option. Se agrega un nombre a la
selección, y un valor a cada opción:
<select name="color">
<option value="rojo">Rojo</option>
<option value="amarillo">Amarillo</option>
</select>

También puede deshabiltar alguna de las opciones:

<select name="color">
<option value="rojo" disabled>Rojo</option>
<option value="amarillo">Amarillo</option>
</select>

También puede tener una opción vacía:

38
<select name="color">
<option value="">None</option>
<option value="rojo">Rojo</option>
<option value="amarillo">Amarillo</option>
</select>

Las opciones pueden ser agrupadas usando la etiqueta optgroup. Cada grupo de
opciones tiene un atributo label:
<select name="color">
<optgroup label="Primarios">
<option value="rojo">Rojo</option>
<option value="amarillo">Amarillo</option>
<option value="azul">Azul</option>
</optgroup>
<optgroup label="Otros">
<option value="verde">Verde</option>
<option value="rosa">Rosa</option>
</optgroup>
</select>

39
10 Tablas
En los primeros días de la web, las tablas eran parte importante en la construcción
de interfaces.
Luego, fueron reemplazadas por CSS y su capacidad de creación de interfaces, y
hoy tenemos poderosas herramientas como Grid y Flexbox de CSS para construir
interfaces. Las tablas son hoy en día usadas para, como se puede imaginar, ¡crear
tablas!

10.0.1 La etiqueta table

Puede definir una tabla usando la etiqueta table:
<table>

</table>

Dentro de la tabla definiremos los datos. Tenemos que pensar en términos de

filas, lo que significa que lo que se agrega a una table son filas, no columnas. Las
columnas se definirán dentro de una fila.

10.0.2 Filas
Una fila se agrega usando la etiqueta tr, y es lo único que podemos agregar a
una etiqueta table:
<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>

Esta es una tabla con tres filas.

La primera fila puede tomar el rol de encabezado.

10.0.3 Encabezados de columna

El encabezado de una tabla contiene el nombre de una columna, típicamente en
negritas.
Piense en un documento de Excel / Google Sheets. Es similar al encabezado
A-B-C-D... superior.

40
Se define el encabezado usando la etiqueta th:
<table>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
<tr></tr>
<tr></tr>
</table>

10.0.4 Contenido de una tabla

El contenido de una tabla se define usando etiquetas td dentro los otros elementos
tr:
<table>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
<tr>
<td>Fila 1 Columna 1</td>
<td>Fila 1 Columna 2</td>
<td>Fila 1 Columna 3</td>
</tr>
<tr>
<td>Fila 2 Columna 1</td>
<td>Fila 2 Columna 2</td>
<td>Fila 2 Columna 3</td>
</tr>

41
</table>

Los navegadores lo renderizan de la siguiente manera, si no le agrega estilos con

CSS:

Agregarl el siguiente CSS:

th, td {
padding: 10px;
border: 1px solid #333;
}

Hace que la tabla se vea más como una tabla:

42
10.0.5 Tamaño de filas y columnas
Una fila puede expandirse a dos o más columnas, usando el atributo colspan:
<table>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
<tr>
<td colspan="2">Fila 1 Columnas 1-2</td>
<td>Fila 1 Columna 3</td>
</tr>
<tr>
<td colspan="3">Fila 2 Columnas 1-3</td>
</tr>
</table>

O puede expandirse a dos o más filas, usando el atributo rowspan:

<table>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
<tr>
<td colspan="2" rowspan="2">Filas 1-2 Columnas 1-2</td>
<td>Fila 1 Columna 3</td>
</tr>
<tr>
<td>Fila 2 Columna 3</td>

43
 </tr>
</table>

10.0.6 Encabezados de fila

Antes, le expliqué cómo tener encabezados de columnas, usando la etiqueta th
dentro de la primera etiqueta tr de la tabla.
Puede agregar una etiqueta th como el primer elemento dentro de una etiqueta
tr que no sea la primera tr de la tabla para obtener encabezados de fila:
<table>
<tr>
<th></th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
<tr>
<th>Fil 1</th>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr>
<th>Fil 1</th>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</table>

44
10.0.7 Más etiquetas para organizar las tablas
Existen tres etiquetas más que pueden ser agregadas a una tabla para tenerla
más organizada.
Son mejor usadas con tablas grandes, para así definir correctamente tanto el pie
como el encabezado de la misma.
Esas etiquetas son:
• thead
• tbody
• tfoot
Estas envuelven las etiquetas tr de manera que claramente definan las diferentes
secciones de la tabla. Aquí un ejemplo:
<table>
<thead>
<tr>
<th></th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Fil 1</th>
<td>Col 2</td>
<td>Col 3</td>
</tr>

45
 <tr>
<th>Fil 2</th>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Pie de Col 1</td>
<td>Pie de Col 2</td>
</tr>
</tfoot>
</table>

10.1 Descripción de tabla

Una tabla debería tener una etiqueta caption que describa su contenido. Esa
etiqueta debería ser agregada inmediatamente después de la etiqueta table:
<table>
<caption>Edades de los Perritos</caption>
<tr>
<th>Perrito</th>
<th>Edad</th>
</tr>
<tr>

46
 <td>Solovino</td>
<td>7</td>
</tr>
</table>

47
11 Etiquetas multimedia: audio y video
En esta sección quiero mostrarte las etiquetas audio y video.

11.1 La etiqueta audio

Esta etiqueta le permite agregar audio a sus páginas HTML.
Este elemento puede tanto transmitir audio, por medio de getUserMedia(), o
puede reproducir de alguna fuente de audio a la cual debe hacer referencia con
un atributo src:
<audio src="file.mp3">

Por defecto el navegador no muestra controles para este elemento, lo que significa
que el audio solo será reproducido si se establece con reproducción automática
(explicación al respecto más adelante) y el usuario no puede detenerlo, cambiar el
volumen, o moverse a una posición específica del audio.
Para mostrar controles, puede agregar el atributo controls:
<audio src="file.mp3" controls>

Los controles de esta etiqueta puede tener un aspecto visual personalizado.

Puede especificar el tipo MIME del archivo de audio usando el atributo type. Si
no es agregado, el navegador intentará determinarlo de forma automática:
<audio src="file.mp3" controls type="audio/mpeg">

Por defecto, un archivo de audio no se reproduce automáticamente. Agregue el

atributo autoplay para darle esta funcionalidad:
<audio src="file.mp3" controls autoplay>

Nota: los navegadores móviles no permiten la reproducción automática

El atributo loop reinicia el archivo desde el minuto 0:00. Si no es agregado, la
reproducción se detiene al terminarse:
<audio src="file.mp3" controls autoplay loop>

También puede reproducir un archivo de audio con el volumen silenciado usando

el atributo muted (no estoy muy seguro cuál pueda ser la utilidad de esto):
<audio src="file.mp3" controls autoplay loop muted>

Usando Javascript puede ‘escuchar’ (detectar) varios eventos que puedan ocurrir
en un elemento audio, siendo los más básicos:
• play cuando el archivo comience a reproducirse

48
 • pause cuando la reproducción del archivo se pause
• playing cuando la reproducción de un archivo se continue
• ended cuando la reproducción del archivo se termine

11.2 La etiqueta video

Esta etiqueta le permite agregar contenido a su página de HTML.
Este elemento puede tanto transmitir video, por medio de getUserMedia() o
WebRTC, o puede reproducir de alguna fuente de video a la cual debe hacer
referencia con un atributo src:
<video src="file.mp4">

Tal como los archivos de audio, el navegador no muestra por defecto controles
para este elemento, solo el video en cuestión.
Por defecto el navegador no muestra controles para este elemento, lo que significa
que el audio solo será reproducido si se establece con reproducción automática
(explicación al respecto más adelante) y el usuario no puede detenerlo, cambiar el
volumen, o moverse a una posición específica del video.
Para mostrar los controles, puede agregar el atributo controls:
<video src="file.mp4" controls>

Los controles de esta etiqueta puede tener un aspecto visual personalizado.

Puede especificar el tipo MIME del archivo de audio usando el atributo type. Si
no es agregado, el navegador intentará determinarlo de forma automática:
<video src="file.mp4" controls type="video/mp4">

Por defecto, un archivo de video no se reproduce automáticamente. Agregue el

atributo autoplay para darle esta funcionalidad:
<video src="file.mp4" controls autoplay>

Algunos navegadores también requieren el atributo muted (que hace exactamente

lo mismo que si se aplicara a un archivo de audio) para poder reproducir au-
tomáticamente, de manera que el video se reproduce automáticamente solo si
está silenciado por defecto:
<audio src="file.mp3" controls autoplay muted>

El atributo loop reinicia el archivo desde el minuto 0:00. Si no es agregado, la

reproducción se detiene al terminarse:
<video src="file.mp4" controls autoplay loop>

49
También puede definir una imagen para que se vea por defécto antes que se
reproduzca el video.
<video src="file.mp4" poster="picture.png">

Si no está definida, el navegador mostrará el primero cuadro del vídeo apenas

esté disponible.
Puede establecer los atributos width (anchura) y height (altura) para definir el
espacio que el elemento tomará de manera que el navegador pueda tomarlo en
cuenta para que no modifique la interfaz cuando termine de cargarse. Toma un
valor numérico, expresado en píxeles.
Usando Javascript puede ‘escuchar’ (detectar) varios eventos que puedan ocurrir
en un elemento audio, siendo los más básicos:
• play cuando el archivo comience a reproducirse
• pause cuando la reproducción del archivo se pause
• playing cuando la reproducción de un archivo se continue
• ended cuando la reproducción del archivo se termine

50
12 Iframes
La etiqueta iframe nos permite agregar contenido de origen distinto (otras
páginas) a nuestra página web.
A nivel técnico, un iframe crea el contenido de forma anidada. Esto significa que
el iframe no interfiere con la página original y viceversa. JavaScript y/o CSS no
“gotean” desde/hacia los iframes.
Muchos sitios usan iframes para ejecutar varios procesos. Puede que conozca
CodePen, Glitch u otros sitios que le permiten escribir código en una parte de la
página, y luego ver el resultado en otra. Eso es un iframe.
Puede crear uno de la siguiente manera:
<iframe src="page.html"></iframe>

También puede hacer referencia a una URL absoluta:

<iframe src="https://site.com/page.html"></iframe>

Puede también establecer parámetros de altura y anchura. En caso que no lo

haga, iframe usará los valores por defecto, una caja de 300x150 píxeles:
<iframe src="page.html" width="800" height="400"></iframe>

12.1 Srcdoc
El atributo srcdoc le permite especificar algún código HTML para mostrar. Es
un alternativa a src, pero más reciente y no soportada por Edge 18 y versiones
anteriores, así como por Internet Explorer:
<iframe srcdoc="<p>My dog is a good dog</p>"></iframe>

12.2 Sandbox
El atributo sandbox permite limitar las operaciones permitidas dentro de los
iframes.
Si lo omitimos, todo estará permitido:
<iframe src="page.html"></iframe>

Si lo establecemos en "", nada estará permitido:

<iframe src="page.html" sandbox=""></iframe>

Podemos seleccionar las acciones que permitiremos al añadir opciones al atributo

sandbox. Puede permitir múltiples acciones al agregarlas con un espacio entre

51
ellas. Esta es una lista incompleta de las opciones posibles:
• allow-forms: permite enviar el contenido de las forms.
• allow-modals: permite abrir ventanas modales, incluyendo llamar a
alert() en JavaScript.
• allow-orientation-lock permite bloquear la orientación de pantalla.
• allow-popups permite popups, usando window.open() y enlaces
target="_blank".
• allow-same-origin trata el recurso que está cargándose como si fuera del
mismo origen.
• allow-scripts deja que el iframe cargado corra scripts (pero no que deje
crear popups).
• allow-top-navigation da al iframe acceso al nivel superior de navegación.

12.3 Allow
Actualmente experimental y solo soportado por navegadores basados en
Chromium, es el futuro de intercambio de recursos entre la ventana padre y el
iframe.
Es similar al atributo sandbox, pero permitiéndonos características más específi-
cas, incluyendo:
• accelerometer, que da acceso a la interfaz API de acelerómetros.
• ambient-light-sensor, que da acceso a la interfaz API de AmbientLight-
Sensor.
• autoplay, que permite reproducir automáticamente archivos de audio y
video.
• camera, que da acceso a la cámara del dispositivo por medio de la interfaz
API getUserMedia.
• display-capture, que permite acceder al contenido de la pantalla usando
la API getDisplayMedia.
• fullscreen, que permite acceder al modo de pantalla completa.
• geolocation, que permite acceder a la API de geolocalización.
• gyroscope, que da acceso a la interfaz API del giroscopio.
• magnetometer, que da acceso a la interfaz API del magnetómetro.
• microphone, que da acceso al micrófono del dispositivo por medio de la
interfaz API getUserMedia.
• midi, que da acceso a la API Web MIDI.
• payment, que da acceso a la API de petición de pagos.
• speaker, que da acceso a la reproducción de audio por medio de los altavoces
del dispositivo.
• usb, que da acceso a la API WebUSB.
• vibrate, que da acceso a la API de vibración.
• vr, que da acceso a la API WebVR.

52
12.4 Referrer
Al cargar un iframe, el navegador envía información importante sobre el usuario
que lo carga con el encabezado de Referer.
El atributo referrerpolicy nos deja establecer la información del usuario a
enviar al iframe cuando carga. Esta etiqueta es un encabezado HTTP que deja
que la página sepa quién la está cargando. Estos son los valores permitidos:
• no-referrer-when-downgrade, que es el atributo por defecto, y envía la
información cuando la página actual esté cargada sobre HTTPS y el iframe
en HTTP.
• no-referrer, que no envía la información del encabezado.
• origin, que envía la información, y solo contiene el origen (puerto, protocolo
y dominio), no solo el origen más la dirección, que suele ser la información
que envía por defecto.
• origin-when-cross-origin, que envía la información del encabezado en
su forma completa (origen + dirección) al cargarlo en una página del mismo
dominio (puerto, protocolo y dominio). De otra manera, solo envía el origen.
• same-origin, la información se envía solamente si el iframe se carga desde
el mismo dominio (puerto, protocolo y dominio).
• strict-origin, envía la información de origen como el encabezado si la
página actual fue cargada sobre HTTPS y el iframe también. No envía
nada si el iframe se envía sobre HTTP.
• strict-origin-when-cross-origin, envía el origen + dirección como
infomación de encabezado al trabajar en el mismo origen. Envía el origen
como infomación si la página actual se carga sobre HTTPS y el iframe
también. No envía nada si el iframe se carga sobre HTTP.
• unsafe-url, que envía el origen + dirección como información incluso al
cargar recursos sobre HTTP mientras que la página haya sido cargada sobre
HTTPS.

53
13 Imágenes
Las imágenes pueden ser mostradas usando la etiqueta img.
Esta etiqueta acepta un atributo src, usado para configurar la fuente de la
imagen:
<img src="image.png">

Podemos usar una amplia cantidad de imágenes, estando las más comunes en
formato PNG, JPEG, GIF, SVG y, más recientemente, en WebP.
El estándar HTML requiere que esté presente un atributo alt que describa el
contenido de la imagen. Esto es usado tanto por herramientas de lectura de
pantalla como por bots de motores de búsqueda:
<img src="dog.png" alt="Una foto de un perro">

Puede cambiar los atributos width y height para configurar el espacio que el
elemento tomará, de manera que el navegador pueda tomarlo en cuenta y no
cambie la interfaz al terminarse de cargar. Toma un valor numérico, expresado
en píxeles.
<img src="dog.png" alt="Una foto de un perro" width="300" height="200">

13.1 La etiqueta figure

La etiqueta figure suele ser usada con la etiqueta img.
figure es una etiqueta semántica que suele usarse cuando se busca mostrar una
imagen con pie de foto. Se usa de la siguiente manera:
<figure>
<img src="dog.png"
alt="Un buen chico">
<figcaption>Un buen chico</figcaption>
</figure>

La etiqueta figcaption ajusta el texto del pie de foto.

13.2 Imágenes responsivas usando srcset

El atributo srcset te permite configurar imágenes responsivas que el navegador
puede usar dependiendo de la densidad de píxeles o la anchira de la ventana, de
acuerdo a sus preferencias. De esta manera, solo podrá descargar los recursos
que necesite para mostrar la página, sin descargar una imagen grande si está en
un dispositivo móvil, por ejemplo.

54
Acá un ejemplo, donde damos 4 imágenes adicionales para 4 tamaños de pantalla
diferentes:
<img src="dog.png"
alt="Una foto de un perro"
srcset="dog-500.png 500w,
dog-800.png 800w,
dog-1000.png 1000w,
dog-1400.png 1400w">ventana de

En srcset usamos la medida w (del inglés width) para indicar la anchura de la

ventana.
Ya que lo hacemos, también debemos usar el atributo sizes:
<img src="dog.png"
alt="Una foto de un perro"
sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
srcset="dog-500.png 500w,
dog-800.png 800w,
dog-1000.png 1000w,
dog-1400.png 1400w">

En este ejemplo, la línea (max-width: 500px) 100vw, (max-width: 900px)

50vw, 800px en el atributo sizes describe el tamaño de la imagen en relación a
la ventana del navegador, con múltiples condiciones separadas por una coma.
La condición max-width: 500px configura el tamaño de la imagen en correlación
con la anchura de la ventana del navegador. En resumen, si el tamaño de la
ventana es < 500px, muestra la imagen al 100% del tamaño de la ventana.
Si el tamaño de la ventana es más grande, pero < 900px, muestra la imagen,
pero al 50% del tamaño de la ventana.
Y si es incluso más grande, ajusta la imagen a 800px.
La unidad de medida vw (del inglés viewport width) puede ser nueva para usted, y
en resumen diremos que 1 vw es 1% de la anchura de la ventana, así que 100vw es
el 100% de la misma. También existe una medida vh (del inglés viewport height)
que, como tal vez se imagine, es similar a vw, pero refiriéndose a la altura de la
ventana, en lugar de su anchura.
Un sitio útil para generar las imágenes necesarias para srcset es https://respon
sivebreakpoints.com/.

55
13.3 La etiqueta picture
HTML también nos otorga la etiqueta picture, que hace un trabajo similar a
srcset, con diferencias muy sutiles pero importantes.
Puede usar picture cuando, en lugar de mostrar una versión más pequeña de la
imagen, quiera cambiarla completamente. O usar un formato distinto.
El mejor caso que he encontrado es usarlo al mostrar una imagen en formato
WebP, que no está todavia ampliamente soportado. En la etiqueta picture
puede especificar una lista de imágenes, y éstas serán mostradas en orden, de
manera que, en el siguiente ejemplo, los navegadores que soporten WebP usarán
la primera, o JPG si no es el caso:
<picture>
<source type="image/webp" srcset="image.webp">
<img src="image.jpg" alt="An image">
</picture>

La etiqueta source define uno (o más) formatos para las imágenes.

La etiqueta img se usa en caso que el navegador sea antiguo y no
soporte la etiqueta picture.
En la etiqueta source dentro de picture puede agregarse un atributo media
para configurar consultas multimedia (llamadas también media queries).
El ejemplo siguiente funciona más o menos como el ejemplo usado con srcset:
<picture>
<source media="(min-width: 500w)" srcset="dog-500.png" sizes="100vw">
<source media="(min-width: 800w)" srcset="dog-800.png" sizes="100vw">
<source media="(min-width: 1000w)" srcset="dog-1000.png" sizes="800px">
<source media="(min-width: 1400w)" srcset="dog-1400.png" sizes="800px">
<img src="dog.png" alt="Una imagen de un perro">
</picture>

Aunque funciona más o menos de la misma manera, lleva un poco más de código
que la etiqueta img.
Esta etiqueta es muy reciente, pero ya es soportada por todos los navegadores
más populares, salvo Opera Mini e IE en todas sus versiones.

56
14 Accesibilidad
Es importante que diseñemos nuestro HTML con la accesibilidad en mente.
Tener un HTML con esto en mente significa que las personas con discapacidad
puedan usar tu página. Existen personas completa o parcialmente invidentes,
personas con pérdida auditiva y una multitud de otras diferentes discapacidades.
Desafortunadamente, no suele dársele a esta sección la importancia que requiere,
ya que no es tan llamativa como las demás.
¿Qué pasaría si una persona que no puede ver tu página quiere consumir su
contenido? En primer lugar, ¿cómo lo hacen? No pueden usar el ratón, usan
algo llamado lector de pantalla. No tiene por qué imaginárselo cuando puede
probarlo. Google provee la extensión gratuita de Chrome, ChromeVox. La
accesibilidad también debe tomar en cuenta que se permita a estas herramientas
seleccionar los elementos o navegar por las páginas con tranquilidad.
Las páginas y aplicaciones web no son siempre construidas con la accesibilidad
como una de sus primeras metas y, aunque tal vez la versión 1 no tenga este
acercamiento, puede hacerse accesible en una iteración futura. Mientras antes se
haga, mejor, pero nunca es demasiado tarde.
Es importante tomar esto siempre en cuenta, especialmente cuando se habla de
contenido de interés público, como puede ser las páginas web de los gobiernos u
otras organizaciones públicas.
¿Qué significa hacer una página HTML accesible? Déjeme ilustrarle las cosas
principales que debe tomar en cuenta.
Nota: hay una gran cantidad de cosas extra para tomar en cuenta,
pero van dentro de otra sección, dedicada a CSS, como podría ser los
colores, el contraste y las fuentes. O tal vez cómo hacer las imágenes
en formato SVG accesibles. No hablaremos de esto en este libro.

14.1 Uso de HTML semático

El HTML semático es importantísimo, y una de las cosas principales que usted
debería hacerse cargo al crear una página. Déjeme ilustrar algunos escenarios
comunes.
Es importante usar la estructura correcta para las etiquetas de escritura. La
más importante es h1, siendo otros números usados para información menos
importante, pero todas las del mismo nivel deberían tener el mismo significado
(piense en ello como en la estructura de un árbol):
h1
h2

57
 h3
h2
h2
h3
h4
Use strong y em en lugar de b e i, respectivamente. Tienen el mismo aspecto
visual, pero las dos primeras tienen significado semántico asociado a ellas. b e i
son elementos mas visuales.
Las listas también son parte importante en la accesibillidad. Un lector de pantalla
puede detectar uan lista y proveer un resumen, dejando luego que el usuario
decida leer el resto o no.
Una tabla debería tener una etiqueta caption que describa su contenido:
<table>
<caption>Edad de los perros</caption>
<tr>
<th>Perro</th>
<th>Edad</th>
</tr>
<tr>
<td>Roger</td>
<td>7</td>
</tr>
</table>

14.2 Use atributos alt para las imágenes

Todas sus imágenes deben tener un atributo alt que describa el contenido de la
misma. No solo es una buena práctica, es requerido por el estándar HTML y su
HTML no estará validado sin esto.
<img src="dog.png" alt="Una foto de mi perro">

También ayuda al SEO, así que es otro incentivo para agregarlo.

14.3 Use el atributo role

Este atributo role le permite asignar roles específicos a los varios elementos de
su página.
Puede asignar un montón de roles distintos, eso sí, todos en perfecto inglés, por
lo que puede que tener un diccionario a la mano le ayude.
Son un montón, y para una completa referencia de cada uno, le entrego este
enlaze de MDN. Pero tampoco es necesario asignar un rol a cada elemento de

58
la página. Los lectores de pantalla pueden inferirlo de la etiqueta HTML en la
mayoría de los casos. Por ejemplo, no necesita agregar este atributo a etiquetas
como nav, button o form.
Tomemos un ejemplo con la etiqueta nav. Puede usarla para definir la navegación
de página de la siguiente manera:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>

Si estuviera forzado a usar una etiqueta div en lugar de nav, debería entonces
usar el rol navigation:
<div role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</div>

Así que acá tiene un ejemplo práctico: role es usado para asignar un valor
significativo cuando la etiqueta no entrega el significado deseado

14.4 Use el atributo tabindex

Este atributo le permite cambiar el orden en el cual la tecla Tabulador “selecciona”
los elementos seleccionables. Por defecto, solo los enlaces y elementos de un
formulario solo “seleccionables” de esta manera, por lo que no tiene que usar
tabindex en ellos.
Agregar tabindex="0" a un elemento hace al mismo seleccionable:
<div tabindex="0">
...
</div>

Por otra parte, usar tabindex="-1" en su lugar elimina este tipo de navegación
del elemento, siendo bastante útil en algunos casos.

14.5 Use los atributos aria

ARIA es un acrónimo que significa Aplicaciones de Internet Ricas y Accesibles
(Accessible Rich Internet Applications, en inglés), y define semática aplicada a
elementos.

59
14.5.1 aria-label
Este atributo se usa para agregar una oración que describa a un elemento.
Ejemplo:
<p aria-label="Descripción de un producto">...</p>

14.5.2 aria-labelledby
Este atributo configuta una correlación entre el elemento actual y el que lo
etiqueta.
Si entiende cómo un elemento input se puede asociar a un elemento label, puede
pensar esto en términos similares.
Pasamos la identificación del objetoq ue describe el elemento actual.
Ejemplo:
<h3 id="descripcion">Descripción del producto</h3>

<p aria-labelledby="descripcion">
...
</p>

14.5.3 aria-describedby
Este atributo nos permite asociar un elemento con otro elemento que sirva como
descripción.
Ejemplo:
<button aria-describedby="pADescripcion" >Pague Ahora</button>

<div id="pADescripcion">¡Hacer click en el botón lo enviará a nuestro fomu

14.5.4 Use aria-hidden para ocultar contenido

Con el atributo aria-hidden="true", le dirá a los lectores de pantalla que
ignoren el elemento

14.6 Dónde aprender más

Esta es solo una introducción al tema. Para aprender más, recomiendo estos
recursos (en inglés):
• W3
• WebAim

60
• Google Developers

61