HTML semântico

HTML semântico

As tags que usamos antes - header, section e footer - são tags novas do HTML5. Antigamente, numa situação parecida com essa, teríamos criado apenas três div, uma para cada parte da página, e talvez colocado ids diferentes pra cada uma.

Qual a diferença entre colocar div e essas novas tags do HTML5? Visualmente e funcionalmente, nenhuma. A única diferença é o nome da tag e o significado que elas carregam. E isso é bastante importante.

Dizemos que a função do HTML é fazer a marcação do conteúdo da página, representar sua estrutura da informação. Não é papel do HTML, por exemplo, cuidar da apresentação final e dos detalhes de design - isso é papel do CSS. O HTML precisa serclaro e limpo, focado em marcar o conteúdo.

As novas tags do HTML5 trazem novos significados semânticos para usarmos em elementos HTML. Em vez de simplesmente agrupar os elementos do cabeçalho em um divgenérico e sem significado, usamos uma tag header que carrega em si o significado de representar um cabeçalho.

Com isso, temos um HTML com estrutura baseada no significado de seu conteúdo, o que traz uma série de benefícios, como a facilidade de manutenção e compreensão do documento.

Provavelmente, o design da sua página deixa bastante claro qual parte da sua página é o cabeçalho e qual parte é o menu de navegação. Visualmente, são distinguíveis para o usuário comum. Mas e se desabilitarmos o CSS e as regras visuais? Como distinguir esses conteúdos?

Um HTML semântico carrega significado independente da sua apresentação visual. Isso é particularmente importante quando o conteúdo for consumido por clientes não visuais. Há vários desses cenários. Um usuário cego poderia usar um leitor de tela para ouvir sua página. Neste caso, a estrutura semântica do HTML é essencial para ele entender as partes do conteúdo.

Mais importante ainda, robôs de busca como o Google também são leitores não visuais da sua página. Sem um HTML semântico, o Google não consegue, por exemplo, saber que aquilo é um menu e que deve seguir seus links. Ou que determinada parte é só um rodapé informativo, mas não faz parte do conteúdo principal. Semântica é uma importante técnica de SEO - Search Engine Optimization - e crítica para marketing digital.

Vamos falar bastante de semântica ao longo do curso e esse é um ingrediente fundamental das técnicas modernas de web design. Veremos mais cenários onde uma boa semântica é essencial.