<div>
div es un contenedor de bloque: empieza en una línea nueva y ocupa todo el ancho disponible. Sirve para agrupar y maquetar, y no aporta ningún significado.
La tipografía del template
Cada muestra de abajo es el elemento HTML de verdad, no una copia disfrazada. Copias el marcado y te llevas la semántica que leen el lector de pantalla y el buscador.
Títulos
Seis niveles que describen la estructura del documento, no el tamaño de la letra. Si te saltas un nivel, rompes el mapa con el que navega un lector de pantalla.
<h1>
El veloz murciélago hindú comía feliz cardillo y kiwi.
<h2>
El veloz murciélago hindú comía feliz cardillo y kiwi.
<h3>
El veloz murciélago hindú comía feliz cardillo y kiwi.
<h4>
El veloz murciélago hindú comía feliz cardillo y kiwi.
<h5>
El veloz murciélago hindú comía feliz cardillo y kiwi.
<h6>
El veloz murciélago hindú comía feliz cardillo y kiwi.
Párrafos
El párrafo es la unidad de lectura. Usa hr para separar temas y pre cuando los espacios y los saltos de línea son parte del contenido.
<p>
El navegador colapsa los espacios y los saltos de línea del código fuente: escribe el texto como te resulte cómodo, que la línea la arma el ancho de la columna.
Una columna cómoda ronda los 65 caracteres por línea. Más ancha que eso, el ojo pierde el renglón cada vez que vuelve a la izquierda.
<hr>
<pre>
proyecto/
app/
pages/ rutas
assets/css/ estilo
i18n/
locales/ es, pt-BR, enBloques y en línea
Dos contenedores sin significado propio. Cuando exista un elemento que sí signifique algo, ese es el que va.
<span>
span es un contenedor en línea: envuelve un tramo de texto sin cortar la línea. Sirve para pintar o marcar una parte de la frase.
Formato
Cada efecto tiene un elemento que carga el significado. Negrita por gusto es una utility; negrita porque importa es strong.
<strong>Texto de importancia alta, no solo grueso.
<em>Énfasis que cambia el sentido de la frase.
<mark>Fragmento resaltado por su relevancia en este contexto.
<small>Nota al margen, aviso legal o letra chica.
<del>Texto que una revisión quitó.
<ins>Texto que una revisión agregó.
<sub>Subíndice, para fórmulas y notas.
<sup>Superíndice, para potencias y llamadas.
Citas
Marcado para citar a alguien, abreviar una sigla, dar una dirección de contacto e invertir la dirección de lectura.
<blockquote> + <cite>
La semántica no es decoración: es la única parte del marcado que sigue trabajando cuando el CSS no llega a cargar. Manual de estilo de EchoSistema
<q>
Una cita corta va dentro de la frase, así: las comillas las pone el navegador según el idioma del documento
<abbr>
El lenguaje de la web es el HTML y la sigla siempre lleva su forma completa en el título.
<address>
EchoSistema, Avenida de la Plataforma 42, piso 3, Montevideo<bdo dir="rtl">
Este texto se lee al revés
Código
Cuatro elementos que dicen de dónde sale el texto: lo que se escribe, lo que se teclea, lo que responde la máquina y lo que es variable.
<code>font-family: var(--font-mono)
<kbd>Ctrl + K
<samp>Compilación terminada en 3.4 s
<var>anchoDeColumna
Enlaces
El mismo elemento navega dentro de la página, abre el correo, marca un teléfono y sale del sitio. Lo único que cambia es el destino.
<a href>
Un enlace lleva a un ancla de esta misma página, hola@echosistema.online o a un sitio externo.
El enlace externo abre en otra pestaña y va con rel noopener: sin eso, la página abierta recibe una referencia a la nuestra.
Imágenes
La imagen entra con su descripción y sus medidas. figure la ata a su leyenda, y picture elige la fuente según el ancho de la pantalla.
<figure> + <figcaption>
<picture> + <source>
picture elige la fuente por ancho o por formato; srcset dentro de img elige la densidad. Aquí, arriba de 40rem verás la bandera de España en lugar de la anterior.
Semánticos
Los hitos de la página. Un lector de pantalla salta de uno a otro, y cada nombre promete algo distinto.
<header>
El encabezado de la página o de una sección: título, logo y lo que la presenta.
<nav>
Un bloque de enlaces de navegación principal, no cualquier lista de enlaces.
<main>
El contenido propio de esta página, uno solo por documento.
<section>
Un tramo temático del contenido, con su propio título.
<article>
Una pieza que se entiende sola, incluso fuera de esta página.
<aside>
Contenido relacionado pero secundario, como una barra lateral.
<footer>
El pie de la página o de la sección: autoría, contacto y enlaces legales.
<figure>
Contenido citado desde el texto, con su leyenda opcional.
<details>
Un bloque que abre y cierra, con teclado y estado, sin una línea de script.
<time>
Una fecha u hora que la máquina lee en el atributo datetime.
La estructura montada: los mismos hitos, uno dentro del otro, vestidos por el sistema.
<header>
El encabezado de la página o de una sección: título, logo y lo que la presenta.
<section>
Un tramo temático del contenido, con su propio título.
<article> + <time>
Una pieza que se entiende sola, incluso fuera de esta página.
<details> + <summary>
¿Por qué preferir details a un accordion hecho a mano?
Porque el navegador ya entrega teclado, foco, estado abierto y cerrado, y hasta la búsqueda dentro de la página. El script entra solo cuando el comportamiento pide más de lo que el elemento da.
Entidades
Cuando el carácter es sintaxis del HTML o no está en tu teclado, se escribe por su nombre.
| Código | Sale | Cuándo usarla |
|---|---|---|
| ␣ | Espacio que no deja cortar la línea entre dos palabras. |
< | < | Signo de menor que, para mostrar marcado sin que se interprete. |
> | > | Signo de mayor que, el cierre del par anterior. |
& | & | El ampersand literal, que en texto crudo abre una entidad. |
" | " | Comilla doble dentro del valor de un atributo. |
© | © | Símbolo de copyright, el del pie de página. |
… | … | Puntos suspensivos como un solo carácter tipográfico. |
× | × | Signo de multiplicación, el correcto para medidas. |
Codificación de URL
Una dirección solo viaja en caracteres seguros. Todo lo demás sale convertido en un porcentaje y dos dígitos.
| Carácter | Codificado | Por qué |
|---|---|---|
| ␣ | %20 | El espacio corta la dirección en servidores y en clientes de correo. |
| @ | %40 | Separa el usuario del host, así que dentro de un valor va codificado. |
| / | %2F | Separa los segmentos de la ruta; cuando es dato, se codifica. |
| ? | %3F | Abre la cadena de consulta, así que como texto se codifica. |
| & | %26 | Separa un parámetro del siguiente dentro de la consulta. |
| # | %23 | Abre el fragmento, la parte de la dirección que nunca llega al servidor. |
Atributos
Lo que cada elemento promete además de su nombre. Estos ocho aparecen en casi toda página.
lang
El idioma de este tramo: guía la pronunciación, las comillas y el corte de palabras.
title
Texto de ayuda que aparece al pasar el puntero; nunca la única fuente del dato.
alt
La descripción de la imagen para quien no la ve, y también cuando la imagen no carga.
href
El destino del enlace: una ruta, un ancla, un correo o un teléfono.
id
Un nombre único en el documento, destino de anclas y de etiquetas de formulario.
class
El gancho de estilo, repetible: nombra el rol, nunca el color.
data
Un dato propio de la aplicación, disponible en el dataset del elemento.
aria
Lo que la accesibilidad necesita y el marcado no dice; el elemento correcto siempre gana.
Familias
Tres familias con papeles fijos. Ninguna entra por gusto: cada una tiene su lugar en el sistema.
Manrope
Display y cuerpo
Manrope arma los títulos y el texto corrido. Es la voz principal del sistema.
Montserrat
Secundaria
Montserrat entra en la tagline y en los acentos institucionales, siempre en tramos cortos.
JetBrains Mono
Monoespaciada
JetBrains Mono para código, comandos y todo lo que se lee columna por columna.
Pesos
Los cinco pesos que el sitio carga de verdad. Fuera de esta lista el navegador sintetiza, y la negrita sintética ensucia el trazo de la Manrope.
El veloz murciélago hindú comía feliz cardillo y kiwi. 400
El veloz murciélago hindú comía feliz cardillo y kiwi. 500
El veloz murciélago hindú comía feliz cardillo y kiwi. 600
El veloz murciélago hindú comía feliz cardillo y kiwi. 700
El veloz murciélago hindú comía feliz cardillo y kiwi. 800
Reglas
Cuatro decisiones que sostienen todo lo anterior.
Medida de lectura
Un párrafo largo no pasa de unos 65 caracteres por línea. En una columna ancha el ojo pierde el renglón al volver a la izquierda.
Jerarquía
Los niveles de título bajan de a uno. El tamaño se elige después: primero está el orden del documento.
Peso
Dos pesos por pantalla alcanzan. Si todo pesa, nada resalta.
Semántica antes que estilo
Elige el elemento por lo que significa y píntalo después. La utility se cambia en un minuto; la semántica es lo que leen las máquinas.