Creo que todo el mundo conoce html y css, conoce la separación entre la estructura html y el rendimiento de css y conoce la semántica de html. Estas son palabras clave populares en los últimos años. El HTML semántico comenzó a ser popular en China hace uno o dos años. Si observamos la estructura HTML discutida ahora en el grupo y las preguntas de la entrevista sobre la estructura HTML, el HTML semántico representa una gran parte. Entonces, ¿por qué utilizar HTML semántico? ¿Cuáles son los beneficios del HTML semántico?
HTML proporciona la estructura contextual y el significado del contenido del documento web; el html en sí no tiene representación. Por ejemplo, vemos que <h1> está en negrita, con un tamaño de fuente de 2 em, y negrita <strong> está en negrita, así que no lo haga. Creo que es HTML Rendimiento, estos son en realidad los estilos CSS predeterminados de HTML en funcionamiento, por lo que primero debemos saber que HTML no tiene nada que ver con el rendimiento de la página, estos son asuntos de CSS. El papel del HTML en la página es estructura y significado. En términos sencillos, es dividir el contenido.
La estructura HTML semántica primero debe enfatizar la estructura HTML.
La estructura HTML es el esqueleto de la página. Una página es como una casa. La estructura HTML son las paredes de acero y hormigón. Si una casa no tiene paredes de acero y hormigón, es sólo un montón de ladrillos inútiles. no se puede vivir ni utilizar para trabajar. CSS es un material decorativo. Es un piso de troncos, mármol y pintura. No hace falta decir que el poder de CSS no tiene una estructura HTML, es solo una pila de madera. tableros están pintados juntos y no tienen valor de uso real. CSS se basa completamente en el documento (X)HTML que hace referencia a él. Si desea aprovechar al máximo el poder de CSS, es necesario proporcionar a HTML un contenido limpio y estructurado "HTML es la lengua franca para publicar hipertexto en Internet... HTML utiliza etiquetas para estructurar el texto. ización” ( http://www.w3.org/MarkUp/ ).
¿Cómo escribir una estructura HTML semántica?
HTML es un método para agregar estructura y significado (o "semántica") al contenido del texto. Nos dirá: "Esta línea es un título, estas líneas forman un párrafo. Estas palabras son una lista de elementos y estas palabras son un hipervínculo a otro archivo en Internet. Vale la pena señalar que no debe permitir HTML". nos dice: "Estos textos son azules y estos textos son rojos. Esta parte del contenido es la columna más a la derecha y esta línea de contenido está en cursiva. Esta información relacionada con el rendimiento es trabajo de CSS". Al realizar desarrollo front-end, recuerde: HTML nos dice qué es un contenido (o su significado), no cómo se ve. Cuando hablamos de "marcado semántico", el HTML del que hablamos debe estar completamente separado de la información de presentación y las etiquetas que contiene deben definir semánticamente la estructura del documento.
La estructura semántica de HTML es realmente muy simple. Primero, comprenda la semántica de cada etiqueta en html. <div> es un contenedor; <strong> es para enfatizar, <ul><li> es una lista desordenada, etc. viendo el contenido Cuando pienses en qué etiqueta puede describirlo mejor, usa la etiqueta que sea.
¿Cuáles son los beneficios de la estructura HTML semántica?
Sabemos que HTML5 tiene nuevas etiquetas, como <header> y <footer>. HTML se está desarrollando hacia una estructura HTML más robusta y semántica. xhtml2 no es tan avanzado como html5 en este sentido. Muerte de xhtml2. También muestra que la estructura semántica de HTML es la tendencia de desarrollo de HTML.
1. Cuando el estilo se elimina o se pierde, la página puede presentar una estructura clara:
HTML en sí no tiene rendimiento. Por ejemplo, vemos que <h1> está en negrita, el tamaño de fuente es 2em, y <strong> está en negrita. Estos son en realidad los estilos CSS predeterminados de HTML. Función, por lo que eliminar o perder el estilo puede hacer que la página presente una estructura clara, lo cual no es una ventaja de la estructura semántica HTML. Sin embargo, los navegadores tienen estilos predeterminados. El propósito del estilo predeterminado también es expresar mejor la semántica. html. Se puede decir que los estilos predeterminados del navegador y la estructura semántica de HTML son inseparables.
2. Los lectores de pantalla (si el visitante tiene discapacidad visual) "leerán" su página basándose completamente en su marcado .
Por ejemplo, si utiliza marcado semántico, los lectores de pantalla "deletrearán" su palabra en lugar de intentar pronunciarla en su totalidad.
3. Es posible que dispositivos como PDA y teléfonos móviles no puedan representar páginas web como los navegadores de computadora comunes (generalmente porque estos dispositivos tienen un soporte débil para CSS).
El uso del marcado semántico garantiza que estos dispositivos representen páginas web de manera significativa. Idealmente, el dispositivo de visualización tiene la tarea de representar páginas web consistentes con las condiciones del propio dispositivo.
El etiquetado semántico proporciona al dispositivo la información relevante que necesita, ahorrándole la molestia de tener que considerar todos los escenarios de visualización posibles (en dispositivos nuevos o existentes en el futuro. Por ejemplo, un teléfono podría optar por mostrar una sección etiquetada con un título). El texto se muestra en negrita. Una computadora portátil puede mostrarlo en una fuente más grande. De cualquier manera, una vez que marque el texto como título, puede estar seguro de que el dispositivo de lectura mostrará la página correctamente en sus propios términos.
4. Los rastreadores de los motores de búsqueda también se basan en etiquetas para determinar el contexto y el peso de las palabras clave individuales.
En el pasado, es posible que no haya considerado que los rastreadores de los motores de búsqueda también son "visitantes" del sitio web, pero ahora son usuarios extremadamente valiosos. Sin ellos, los motores de búsqueda no podrán indexar su sitio web, y luego lo serán. difícil para los usuarios comunes venir y visitar.
5. Es muy importante si su página es fácil de entender para los rastreadores, porque los rastreadores ignorarán en gran medida el marcado utilizado para el rendimiento y solo se centrarán en el marcado semántico.
Por lo tanto, si el título del archivo de la página está etiquetado en lugar de etiquetado, entonces la página puede aparecer más abajo en los resultados de búsqueda. Además de mejorar la facilidad de uso, el marcado semántico facilita el uso correcto de CSS y JavaScript porque proporciona muchos ". Hook" para aplicar el estilo y comportamiento de la página.
El SEO se basa principalmente en el contenido de su sitio web y los enlaces externos.
6. Facilitar el desarrollo y mantenimiento del equipo.
W3C ha establecido 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 lograr un desarrollo modular .
Si tiene opiniones o adiciones diferentes, deje un mensaje para discutir.
Gracias al hermano Gui, Milk Tea, Xiaozhi, Stealing Rice, Caspar y CSS Forest Group por la discusión.
Texto original: http://www.css88.com/archives/1668