Creo que todos conocen HTML y CSS, conocen la separación de la estructura HTML y el rendimiento de CSS, y conocen la semántica de HTML. Estas son las palabras clave populares en los últimos años. HTML semántico solo se buscó hace un año o dos en China. Mire la estructura HTML de la que se está hablando en el grupo ahora. Preguntas de la entrevista sobre la estructura HTML, el HTML semántico representa una gran parte. Entonces, ¿por qué usar HTML semántico? ¿Cuáles son los beneficios del HTML semántico?
HTML proporciona la estructura de contexto y el significado del contenido del documento de la página web; HTML en sí no lo expresa. Vemos que, por ejemplo, <h1> es audaz, el tamaño de la fuente es 2EM, en negrita; <strong> es audaz, no piense que esta es la manifestación de HTML. Este es en realidad el estilo CSS predeterminado de HTML en acción, por lo que primero debemos saber que HTML no tiene nada que ver con el rendimiento de la página, esta es la cuestión de CSS. El papel de HTML en una página es la estructura y el significado. En términos de Layman, es dividir el contenido. Lo que se coloca aquí y lo que ponemos.
La estructura HTML semántica debe enfatizar primero la estructura HTMLLa estructura HTML es el esqueleto de una página. Una página es como una casa. La estructura HTML es una pared de concreto reforzado con acero. Si una casa no tiene una pared de concreto reforzado con acero, será un montón de ladrillos y no puede vivir en personas o trabajos. CSS es un material decorativo, un piso de troncos, una mármol, una pintura, y se usa para decorar la casa. No hay necesidad de decir más sobre el poder de CSS. Si CSS no tiene una estructura HTML, será un montón de tablas de madera, pintadas juntas, sin valor de uso real. CSS se basa completamente en (x) documentos HTML que lo hacen referencia. Si desea obtener toda la potencia de CSS al máximo, es muy necesario proporcionar un HTML con contenido limpio y estructurado. HTML es el término común para publicar hipertexto en Internet ... HTML usa etiquetas para estructurar texto ( http://www.w3.org/markup/ ).
¿Cómo escribir una estructura HTML semántica?HTML es un método para complementar la estructura y el significado de contenido de texto (o semántica). Nos dirá: esta línea es un título, y estas líneas forman un párrafo. Estos textos son listas de elementos, y estos textos son hipervínculos que vinculan a otro archivo en Internet. Vale la pena señalar que HTML no debe decirnos: estos textos son azules y estos textos son rojos. Esta parte del contenido es la columna más derecha, y esta línea está en cursiva. Esta información relacionada con el rendimiento es el trabajo de CSS. Al hacer un desarrollo front-end, recuerde: HTML nos dice qué es una pieza de contenido (o su significado), no cómo se ve. Cuando mencionamos etiquetas semánticas, lo que llamamos HTML debe estar completamente separado de la información de presentación, y las etiquetas en ella deben definir semánticamente la estructura del documento.
La estructura semántica HTML es en realidad muy simple. Primero, domine la semántica de cada etiqueta en HTML. <Viv> es un contenedor; <strong> es un énfasis; <ul> <li> es una lista desordenada, etc. Cuando ve el contenido, piense en qué etiquetas pueden describirlo mejor y use cualquier etiqueta.
¿Cuáles son los beneficios de las estructuras semánticas de HTML?Sabemos que las etiquetas recientemente agregadas de HTML5, como <WEADER> y <ToToTer>, HTML se está desarrollando hacia una estructura HTML semántica más robusta. XHTML2 no está tan avanzado como HTML5 a este respecto, lo cual también es una razón para la muerte de XHTML2. Esto también muestra que la estructura semántica HTML es la tendencia de desarrollo de HTML.
1. Cuando se retira la página o se pierde el estilo, puede darle a la página una estructura clara:HTML en sí no se expresa. Vemos que, por ejemplo, <h1> es audaz, con un tamaño de fuente de 2EM, en negrita; <strong> es audaz, no piense que esta es la manifestación de HTML. Estos son en realidad los estilos CSS predeterminados de HTML en acción, por lo que eliminar o perder estilos puede hacer que la página presente una estructura clara no es la ventaja de la estructura semántica de HTML, pero los navegadores tienen estilos predeterminados. El propósito del estilo predeterminado también es expresar mejor la semántica de HTML. Se puede decir que el estilo predeterminado del navegador y la estructura HTML semántica son inseparables.
2. Los lectores de pantalla (si el visitante tiene discapacidad visual) leerán sus páginas web por completo en función de su marcado .Por ejemplo, si usa marcadores semánticos, el lector de pantalla deletreará sus palabras una por una, en lugar de tratar de pronunciarlos en su totalidad.
3. PDA, teléfono móvil y otros dispositivos pueden no poder representar páginas web como navegadores de computadora ordinarios (generalmente porque estos dispositivos tienen un soporte débil para CSS).El uso de etiquetado semántico garantiza que estos dispositivos rinden páginas web de una manera significativa. Idealmente, la tarea de ver un dispositivo es hacer que las páginas web estén en línea con las condiciones del dispositivo en sí.
El marcado semántico proporciona al dispositivo la información relevante que necesita, eliminándose para considerar todas las situaciones de visualización posibles (incluidos los dispositivos existentes o nuevos en el futuro). Por ejemplo, un teléfono puede optar por hacer un párrafo de texto marcado con un título en negrita. La computadora portátil puede mostrarla en una fuente más grande. De cualquier manera, una vez que marque el texto como un título, puede estar seguro de que el lector mostrará la página adecuadamente en función de sus propias condiciones.
4. Los rastreadores de motores de búsqueda también dependen de las etiquetas para determinar el contexto y los pesos de las palabras clave individuales.En el pasado, es posible que no haya considerado que los rastreadores de motores de búsqueda también son visitantes de los sitios web, pero ahora en realidad son usuarios extremadamente valiosos. Sin ellos, los motores de búsqueda no podrán indexar su sitio web, y luego el usuario promedio será muy difícil de visitar.
5. Si su página es fácil de entender para los rastreadores, porque los rastreadores ignorarán en gran medida los marcadores utilizados para la representación y solo se centrarán en marcadores semánticos.Por lo tanto, si el título del archivo de página está marcado en lugar de, la página puede estar en la posición más baja de los resultados de búsqueda. Además de mejorar la facilidad de uso, el etiquetado semántico es propicio para el uso correcto de CSS y JavaScript, porque en sí mismo proporciona muchos ganchos para aplicar el estilo y el comportamiento de la página.
El SEO depende principalmente del contenido y los enlaces externos de su sitio web.
6. Fácil del desarrollo y mantenimiento del equipoW3C establece un buen estándar para nosotros. Todos en el equipo siguen este estándar, lo que puede reducir muchas cosas diferenciadas, facilitar el desarrollo y el mantenimiento, mejorar la eficiencia del desarrollo e incluso realizar el desarrollo modular .
Si tiene opiniones diferentes, agrégalas. Deje un mensaje para discutir.
Gracias a Gui Ge, Milk Tea, Xiaozhi, robo de arroz, Caspar y CSS Forest Group para discusión