HTML - Escrevendo Semanticamente

Apenas com os blocos principais (html, head, body) e os iniciais (div, p, h) já se pode montar toda a estrutura e uso de um site. Inclusive isso independe to tamanho e idade dele. Pode-se se passar uma vida inteira sem sair desses 6. Mas por mais que o HTML tenha começado bem simples, ele evoluiu em vários aspectos, inclusive nas quantidades de tags, então é no mínimo triste ao menos não dar uma chance para se aprender parte dessas tags.

Daí vem a questão sobre a escrita do HTML semanticamente, que é a escrita usando as tags definidas para cada ocasião. Isso ajuda tanto na separação do conteúdo ao se escrever uma página, quanto ajuda os robôs de pesquisa de conteúdo a acharem cada separação daquela página.

Dentre as várias tags, as que são mais utilizadas para essas separações são: header, navigation, main, article, section, footer, details, summary, figure, figcaption, mark, time, progress.

Header

Também chamado de cabeçalho, essa tag define a parte superior da página, onde se colocam a logo, título e itens para navegação da página, que em geral se traduz como os links das páginas principais.

Navigation

Esta parte define os itens para navegação, que são os links que levam a partes mais importantes daquele site, como página de início, contato, história, loja e afins.

Main

Esta tag define que ali dentro é onde se encontra o conteúdo principal daquela página, isso facilita encontrar o conteúdo mais importante dali.

Article

Demarcam pequenas separações de conteúdos dentro da página, como pequenos posts de um blog, ou um resumo de uma subpágina.

Section

É uma tag usada para separar grandes seções de mesmo contexto dentro da página.

Footer

É a seção final da página, contendo links auxiliares, endereço, contato e as vezes alguma descrição de quem escreveu aquele site.

Details e Summary

De certo modo, seria a navegação do conteúdo daquela única página, em uma página sobre a descrição de um assunto, essa parte serviria para se navegar entre os títulos e subtítulos.

Figure e Figcaption

São duas tags que vem para auxiliar o uso da tag "img". Figure define a divisão que vai encapsular as outras duas. Figcaption é usada para descrever sobre o que a imagem se trata, como um título da imagem. Facilitando a identificação daquele conteúdo.

Mark

Utilizado para marcar partes importantes em um texto ou parágrafo, geralmente colocando ele em negrito ou em itálico.

Time

Uma tag para facilitar a compreensão de que aquela parte do texto se trata de uma data.

Progress

Em casos onde se utiliza algum indicador de progresso, essa tag é utilizada para de padronizar o acesso a informação daquele item, tendo opções específicas para o valor atual e o máximo daquela progressão.

Conclusão

A escrita semântica não é o único jeito de se escrever um site, mas com certeza ajuda na organização do conteúdo e na compreensão e distuibuição dele a partir de buscadores na internet.

Referências

CS.FYI - Escrevendo Semanticamente