<div>
div é contêiner de bloco: começa em linha nova e ocupa toda a largura disponível. Serve para agrupar e diagramar, e não acrescenta significado nenhum.
A tipografia do template
Cada amostra abaixo é o elemento HTML de verdade, não uma cópia fantasiada. Você copia a marcação e leva junto a semântica que o leitor de tela e o buscador enxergam.
Títulos
Seis níveis que descrevem a estrutura do documento, não o tamanho da letra. Pular um nível quebra o mapa que o leitor de tela usa para navegar.
<h1>
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.
<h2>
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.
<h3>
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.
<h4>
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.
<h5>
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.
<h6>
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.
Parágrafos
O parágrafo é a unidade de leitura. Use hr para separar assuntos e pre quando os espaços e as quebras fizerem parte do conteúdo.
<p>
O navegador colapsa os espaços e as quebras do código-fonte: escreva o texto do jeito que for confortável, porque quem monta a linha é a largura da coluna.
Uma coluna confortável fica em torno de 65 caracteres por linha. Mais larga do que isso, o olho perde a linha toda vez que volta para a esquerda.
<hr>
<pre>
projeto/
app/
pages/ rotas
assets/css/ estilo
i18n/
locales/ es, pt-BR, enBlocos e inline
Dois contêineres sem significado próprio. Quando existir um elemento que signifique alguma coisa, é ele que entra.
<span>
span é contêiner inline: envolve um trecho de texto sem quebrar a linha. Serve para pintar ou marcar uma parte da frase.
Formatação
Cada efeito tem um elemento que carrega o significado. Negrito por gosto é utility; negrito porque importa é strong.
<strong>Texto de importância alta, não apenas mais grosso.
<em>Ênfase que muda o sentido da frase.
<mark>Trecho realçado pela relevância neste contexto.
<small>Nota de rodapé, aviso legal ou letra miúda.
<del>Texto que uma revisão retirou.
<ins>Texto que uma revisão acrescentou.
<sub>Subscrito, para fórmulas e notas.
<sup>Sobrescrito, para potências e chamadas.
Citações
Marcação para citar alguém, abreviar uma sigla, dar um endereço de contato e inverter a direção da leitura.
<blockquote> + <cite>
Semântica não é decoração: é a única parte da marcação que continua trabalhando quando o CSS não chega a carregar. Manual de estilo do EchoSistema
<q>
Uma citação curta vem dentro da frase, assim: as aspas quem coloca é o navegador, seguindo o idioma do documento
<abbr>
A linguagem da web é o HTML e a sigla leva sempre a forma completa no título.
<address>
EchoSistema, Avenida da Plataforma 42, sala 3, São Paulo<bdo dir="rtl">
Este texto se lê ao contrário
Código
Quatro elementos que dizem de onde o texto vem: o que se escreve, o que se digita, o que a máquina responde e o que é variável.
<code>font-family: var(--font-mono)
<kbd>Ctrl + K
<samp>Compilação concluída em 3,4 s
<var>larguraDaColuna
Links
O mesmo elemento navega dentro da página, abre o e-mail, disca um telefone e sai do site. O que muda é só o destino.
<a href>
Um link leva para uma âncora desta mesma página, ola@echosistema.online ou para um site externo.
O link externo abre em outra aba e vai com rel noopener: sem ele, a página aberta ganha uma referência à nossa.
Imagens
A imagem entra com a descrição e as medidas. figure amarra a imagem à legenda, e picture escolhe a fonte conforme a largura da tela.
<figure> + <figcaption>
<picture> + <source>
picture escolhe a fonte por largura ou por formato; srcset dentro de img escolhe a densidade. Aqui, acima de 40rem você vê a bandeira da Espanha no lugar da anterior.
Semânticos
Os marcos da página. Um leitor de tela salta de um para outro, e cada nome promete uma coisa diferente.
<header>
O cabeçalho da página ou de uma seção: título, logo e o que a apresenta.
<nav>
Um bloco de links de navegação principal, não qualquer lista de links.
<main>
O conteúdo próprio desta página, um só por documento.
<section>
Um trecho temático do conteúdo, com título próprio.
<article>
Uma peça que se entende sozinha, mesmo fora desta página.
<aside>
Conteúdo relacionado, porém secundário, como uma barra lateral.
<footer>
O rodapé da página ou da seção: autoria, contato e links legais.
<figure>
Conteúdo citado a partir do texto, com legenda opcional.
<details>
Um bloco que abre e fecha, com teclado e estado, sem uma linha de script.
<time>
Uma data ou hora que a máquina lê no atributo datetime.
A estrutura montada: os mesmos marcos, um dentro do outro, vestidos pelo sistema.
<header>
O cabeçalho da página ou de uma seção: título, logo e o que a apresenta.
<section>
Um trecho temático do conteúdo, com título próprio.
<article> + <time>
Uma peça que se entende sozinha, mesmo fora desta página.
<details> + <summary>
Por que preferir details a um acordeão feito à mão?
Porque o navegador já entrega teclado, foco, estado aberto e fechado, e até a busca dentro da página. O script entra só quando o comportamento pede mais do que o elemento dá.
Entidades
Quando o caractere é sintaxe do HTML ou não está no seu teclado, ele se escreve pelo nome.
| Código | Sai | Quando usar |
|---|---|---|
| ␣ | Espaço que não deixa a linha quebrar entre duas palavras. |
< | < | Sinal de menor que, para mostrar marcação sem que ela seja interpretada. |
> | > | Sinal de maior que, o fechamento do par anterior. |
& | & | O ampersand literal, que no texto cru abre uma entidade. |
" | " | Aspa dupla dentro do valor de um atributo. |
© | © | Símbolo de copyright, o do rodapé. |
… | … | Reticências como um caractere tipográfico único. |
× | × | Sinal de multiplicação, o correto para medidas. |
Codificação de URL
Um endereço só viaja em caracteres seguros. Todo o resto sai convertido em um porcento e dois dígitos.
| Caractere | Codificado | Por quê |
|---|---|---|
| ␣ | %20 | O espaço corta o endereço em servidores e em clientes de e-mail. |
| @ | %40 | Separa o usuário do host, então dentro de um valor ele vai codificado. |
| / | %2F | Separa os segmentos do caminho; quando é dado, vai codificado. |
| ? | %3F | Abre a query string, então como texto ele vai codificado. |
| & | %26 | Separa um parâmetro do seguinte dentro da query. |
| # | %23 | Abre o fragmento, a parte do endereço que nunca chega ao servidor. |
Atributos
O que cada elemento promete além do próprio nome. Estes oito aparecem em quase toda página.
lang
O idioma deste trecho: guia a pronúncia, as aspas e a separação silábica.
title
Texto de apoio que aparece ao passar o ponteiro; nunca a única fonte do dado.
alt
A descrição da imagem para quem não a vê, e também quando a imagem não carrega.
href
O destino do link: uma rota, uma âncora, um e-mail ou um telefone.
id
Um nome único no documento, destino de âncoras e de rótulos de formulário.
class
O gancho de estilo, repetível: nomeie o papel, nunca a cor.
data
Um dado próprio da aplicação, disponível no dataset do elemento.
aria
O que a acessibilidade precisa e a marcação não diz; o elemento certo sempre vence.
Famílias
Três famílias com papéis fixos. Nenhuma entra por gosto: cada uma tem o seu lugar no sistema.
Manrope
Display e corpo
Manrope monta os títulos e o texto corrido. É a voz principal do sistema.
Montserrat
Secundária
Montserrat entra na tagline e nos acentos institucionais, sempre em trechos curtos.
JetBrains Mono
Monoespaçada
JetBrains Mono para código, comandos e tudo o que se lê coluna por coluna.
Pesos
Os cinco pesos que o site carrega de verdade. Fora desta lista o navegador sintetiza, e o negrito sintético suja o traço da Manrope.
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz. 400
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz. 500
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz. 600
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz. 700
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz. 800
Regras
Quatro decisões que sustentam tudo o que veio antes.
Medida de leitura
Um parágrafo longo não passa de uns 65 caracteres por linha. Em coluna larga o olho perde a linha ao voltar para a esquerda.
Hierarquia
Os níveis de título descem de um em um. O tamanho se escolhe depois: primeiro vem a ordem do documento.
Peso
Dois pesos por tela bastam. Se tudo pesa, nada se destaca.
Semântica antes do estilo
Escolha o elemento pelo que ele significa e pinte depois. A utility se troca em um minuto; a semântica é o que as máquinas leem.