Formatação de texto
O curso trata das tags HTML que formatam texto e do significado de cada uma. Começa pelos headings como um esboço numerado, usado por leitores de tela e mecanismos de busca, e pela regra de um único h1 sem níveis pulados. Depois separa strong e em, que marcam importância e ênfase, de b e i, que marcam uma convenção visual. As aulas seguintes cobrem mark, small, del, ins, s, sub, sup, code, kbd, samp, var, abbr e time. A última aula formata uma descrição de produto com todas elas.
O que você vai aprender
- ✓Escolher o nível do heading pela posição no esboço da página, e não pelo tamanho da fonte
- ✓Montar um único h1 e uma hierarquia de headings sem níveis pulados
- ✓Distinguir strong e em de b e i com um teste de leitura em voz alta
- ✓Usar mark, small, del, ins, s, sub e sup para o papel de cada uma
- ✓Marcar conteúdo preciso com code, kbd, samp, var, abbr e time
- ✓Conferir a estrutura de headings no painel Accessibility das DevTools
Headings são uma hierarquia, não um tamanho de fonte
Estilizado assim, o h3 parece um heading grande e importante, e o h1 parece um rótulo pequeno: visualmente, isso lê corretamente. Estruturalmente, está invertido, e o tema recorrente dos últimos dois cursos se aplica com força total: h1–h6 carregam significado independente de qualquer CSS, como…
Ler a aula completa grátis →Currículo
7 aulasHeadings são uma hierarquia, não um tamanho de fonte
Os níveis h1 a h6 indicam a posição no esboço da página, usada por leitores de tela e buscadores.
Um h1, uma hierarquia de verdade, sem níveis pulados
Use um h1 por página e uma hierarquia contínua abaixo dele, pois o algoritmo de esboço nunca foi implementado.
strong e em: significado, não só aparência
O strong marca importância e o em marca ênfase que muda o sentido, registrados na marcação do documento.
b e i: quando só a aparência importa, honestamente
O b e o i marcam texto destacado por convenção visual, como termos-chave, palavras estrangeiras e nomes de navio.
mark, small, del, ins, sub, e sup
Seis tags inline com papéis estreitos: destaque de contexto, letras miúdas, edições do documento e posições com significado.
code, kbd, samp, var, abbr, e time: marcando conteúdo preciso
Tags para conteúdo preciso: código, teclas, saída de programa, variáveis, abreviações expandidas e datas legíveis por máquina.
Juntando tudo: formatando uma descrição de produto real
Uma descrição de produto marcada com todas as tags do curso, e um checklist para qualquer bloco de texto.