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
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.
¿Cuáles son los beneficios de la estructura HTML semántica?
Sabemos que HTML5 tiene nuevas etiquetas, como
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
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