La semántica HTML parece ser un cliché. Google tiene muchos artículos sobre semántica. ¿Por qué las etiquetas de semántica? Creo que esto es lo que creo: cada etiqueta de HTML tiene su significado específico, y la semántica es permitirnos usar las etiquetas apropiadas en el lugar correcto para hacer mejor a las personas y máquinas (las máquinas pueden entenderse como navegadores se pueden entender como motores de búsqueda). Si mi explicación no es lo suficientemente clara, por favor google.
¿Cómo usar la etiqueta correcta en el lugar correcto?Esta es una lógica de comprensión simple. Por ejemplo, las etiquetas H1 ~ H6 se utilizan para clases de título; UL se usa para listas desordenadas; OL se usa para listas llenas; DL se usa para definir listas; EM, se usan etiquetas fuertes para enfatizar ... para decirlo sin rodeos, cada definición en inglés de la etiqueta HTML determina su semántica (más adelante de este artículo, pondré una tabla de comparación de definiciones de inglés de etiquetas HTML de uso común para referencia).
¿Qué es lo que las personas y las máquinas pueden ver de un vistazo?La mejor manera de verificar si la página HTML es semántica es eliminar el enlace CSS de la página para ver si la estructura de la página web es ordenada y si la página aún es legible. ¿Por qué puedo decir eso? Todos saben que los navegadores tienen estilos predeterminados (se recomienda usar herramientas de desarrollador web Chrome para el complemento Chrome o el complemento de desarrollador web de Firefox). Por ejemplo, H1 ~ H6, habrá un estilo predeterminado de reducción de tamaño en negrita/fuente y márgenes superiores e inferiores. UL, OL y DL tienen balas predeterminadas, y Strong tiene un estilo audaz de forma predeterminada ... por lo tanto, para la misma página, un HTML bien semántico aún puede funcionar bien cuando se elimina el CSS de la página.
Otro punto es que la buena codificación semántica es mejor amigable para los motores de búsqueda. Las arañas de búsqueda no reconocen su CSS, pero pueden reconocer las etiquetas HTML.
Aquí hay un ejemplo simple:Copiar el código