E você costuma utilizar <div> para tudo?
Ele é uma mão na roda, mas como um elemento genérico, é mais recomendado utilizar as tags que fazem sentido para aquele contexto.

#html5 #htmlmoderno #semantica #html

#PraCegoLer #PraCegoVer
Uma imagem com fundo preto simulando um editor de código, mostrando textos e exemplos de como utilizar da melhor maneira o elemento div.

Mostra também que no html5 surgiram diversos elementos como a tag article, section, aside, header, footer e etc.

Ao invés de utilizar a tag div com a class article, seria mais interessante usar a tag article para dar mais semântica no código.

E com dicas tipo:
Se seu bloco de elementos não tiver nenhum elemento semântico para usar, então utilize div.

A div pode ser usado criar um "wrapper" para seu código

E Usar em algumas tags por questão de suporte, por exemplo a tag main que tem suporte no internet explorer somente a partir da versão 12. Recomenda-se também utilizar o atributo role com o valor main para que mantenha o mapeamento de Landmarks da ARIA.

Parece besteira, mas tem muito mais para falar sobre o button ainda.

#html5 #htmlmoderno #semantica #html #button

#PraCegoLer #PraCegoVer
Uma imagem com fundo preto simulando um editor de código, mostrando textos e exemplos de como utilizar o element button (tag).

Mostra exemplos que funciona, porém que devem ser evitados quando possível de como criar buttons através de outros elementos como input do tipo submit, div com a landmark role=button e link sem href com a landmark role=button, tabindex e um atributo aria chamado aria-pressed que informa a alternância do botão quando pressionado.

E também utilizando o elemento button para mostrar que não precisa de tanta configuração e que tem a semântica e acessibilidade de maneira nativa.

Observações:
O elemento button sem o atributo type, assume o type automaticamente como submit;
Os types são importantes para definir sua ação e os disponíveis são (button, reset e submit)

button = Sem comportamento padrão (Muito usado fora dos forms)
reset = Quando usado em forms, redefine para valores iniciais
submit = Envia dados (Normalmente encontrado em forms)

E para deixar mais acessível usar "aria-label" ou "aria-labelledby" quando o <button> não tiver uma descrição (usado normalmente quando utilizamos ícones), essa abordagem atende a técnica (ARIA14) da WCAG 2.0

Existem diversos elementos semânticos inline que podem ser usados no lugar do <span> quase sempre.

https://developer.mozilla.org/pt-BR/docs/Web/HTML/Inline_elemente

#htmlmoderno #html5 #semantica #acessibilidade #a11y

#PraCegoLer #PraCegoVer
Uma imagem com fundo preto simulando um editor de código, mostrando textos e exemplos de que as vezes existem um elemento semântico inline para ser usado no lugar do span.

O não traz nenhum sentido ao conteúdo interno e nenhum
estilo, com isso muitos devs cometem erros usando esse
elemento de maneira inadequada.

Mostra um exemplo a ser evitado com o span em pedaços de texto usando classes para estilizar visualmente.

E mostra um exemplo utilizando o elemento strong e o elemento em, para usar semântica e acessibilidade que cada um desses elementos tem nativamente (Uma coisa leva a outra! A semântica leva a acessibilidade)

Algumas dicas extras são:
1º Sempre opte por elementos semânticos;
2º Use span quando não for necessário dar sentido ao conteúdo interno ou que não tenha outra tag para o lugar;
3º Se quiser estilizar, pode atribuir normalmente uma "class" e customizar