A semântica HTML parece ser um clichê. O Google tem muitos artigos sobre semântica. Por que tags semânticas? Eu acho que é isso que penso: cada etiqueta de HTML tem seu significado específico, e a semântica é nos deixar usar tags apropriadas no lugar certo para fazer melhor as pessoas e as máquinas (as máquinas podem ser entendidas como navegadores podem ser entendidos como mecanismos de pesquisa). Se minha explicação não estiver clara o suficiente, por favor, Google.
Como usar o rótulo certo no lugar certo?Esta é uma lógica de compreensão simples. Por exemplo, as tags H1 ~ H6 são usadas para classes de título; Ul é usado para listas não ordenadas; OL é usado para listas preenchidas; DL é usado para definir listas; EM, tags fortes são usadas para enfatizar ... Para ser franco, cada definição em inglês da tag html determina sua semântica (mais tarde deste artigo, colocarei uma tabela de comparação de definições em inglês de tags html comumente usadas para referência).
O que as pessoas e máquinas podem ver de relance?A melhor maneira de verificar se a página HTML é semântica é remover o link CSS da página para ver se a estrutura da página da web é ordenada e se a página ainda é legível. Por que posso dizer isso? Todo mundo sabe que os navegadores têm estilos padrão (recomendado para usar ferramentas de desenvolvedor da Web Chrome para plug-in Chrome ou plug-in do desenvolvedor da Web do Firefox). Por exemplo, H1 ~ H6, haverá um estilo padrão de redução de tamanho em negrito/fonte e margens superior e inferior. Ul, OL e DL têm balas padrão e Strong tem um estilo ousado por padrão ... Então, para a mesma página, um HTML bem-semântico ainda pode ter um bom desempenho quando o CSS da página for removido.
Outro ponto é que a boa codificação semântica é mais amigável para os mecanismos de pesquisa. As aranhas de pesquisa não reconhecem seu CSS, mas podem reconhecer tags HTML.
Aqui está um exemplo simples:Copie o código