Links e imagens
O curso trata de links e imagens em HTML e Rails. Ele mostra por que o href faz do a um link, quando usar URLs relativas ou absolutas e como o link_to com rotas nomeadas mantém os caminhos atualizados. Também aborda texto de link que faz sentido fora de contexto, o target="_blank" e o tabnabbing reverso, e os principais atributos do img. Fecha com texto alt, imagens responsivas com srcset e picture e um cartão de produto que reúne essas regras.
O que você vai aprender
- ✓Como funcionam href, URLs relativas e absolutas, âncoras e links mailto e tel
- ✓Como escrever texto de link que faz sentido na lista de links do leitor de tela
- ✓O que fazem o target="_blank" e o rel="noopener noreferrer"
- ✓Como usar src, width, height e loading no img para evitar layout shift
- ✓Como escrever texto alt, ou deixá-lo vazio em imagens decorativas
- ✓Como servir imagens responsivas com srcset, sizes e picture
A tag a: mais que texto azul sublinhado
O href não é uma opção entre várias para o <a>: é o que torna a tag um hyperlink em primeiro lugar. Um <a> sem href não recebe foco pelo teclado nem ganha papel link na árvore de acessibilidade que os três últimos cursos conferiram nas DevTools. É texto inline com cara de link:
Ler a aula completa grátis →Currículo
7 aulasA tag a: mais que texto azul sublinhado
Como o href transforma o a em link, além de URLs relativas e absolutas, rotas nomeadas, âncoras, mailto e tel.
Escrevendo texto de link que faz sentido fora de contexto
Texto de link que faz sentido sozinho na lista de links do leitor de tela, inclusive em links só com ícone.
target="_blank" e o risco de tabnabbing
Como o target="_blank" permitia tabnabbing reverso, o que o rel="noopener" faz e por que navegadores atuais já o aplicam.
img: a anatomia de uma tag img
Os atributos src, alt, width, height e loading do img e o problema que cada um resolve.
Texto alt: escrevendo certo, ou deixando vazio
Quando uma imagem precisa de alt descritivo, quando o alt deve ficar vazio e como usar figure e figcaption.
Imagens responsivas e eficientes
Como srcset, sizes e picture deixam o navegador baixar o tamanho certo e um formato moderno menor.
Juntando tudo: um cartão de produto real com links e imagens
Um cartão de produto que junta as regras de links e imagens, conferido no painel Accessibility das DevTools.