semánticos - ¿Cuáles son los beneficios de usar HTML semántico?
sintaxis html5 (14)
HTML semántico y rendimiento
El HTML semántico no solo utiliza las etiquetas correctas para los fines correctos, lo que obviamente mejora el SEO, sino también la separación de marcado (HTML), estilo (CSS) y scripts (JS). La separación no solo mejorará el mantenimiento, sino que también mejorará el rendimiento de descarga, ya que normalmente almacena en caché los archivos CSS / JS. Si desordena el archivo HTML con todo el código CSS / JS sin procesar y / o usa el style lugar del id o la class , solo haría que la página HTML fuera innecesariamente más grande y llevaría más tiempo arrastrarla.
¿Hay algún resultado notable en términos de rendimiento u otros aspectos a seguir en HTML semántico?
Gracias
Clear Code is More Maintainable
Además de los beneficios para el usuario, el HTML semántico tiene más sentido para los humanos: usted y sus colegas.
Si estuvieras codificando JavaScript, ¿escribirías funciones como esta?
dothething(q);
CmtFn(x);
...¿o así?
loadUserData(username);
parseComments(language);
Si dijiste que # 2 es mejor, bueno, el mismo principio se aplica a HTML . Etiquetar las cosas claramente, sangrar el código correctamente, etc. hace que su código sea más fácil de mantener.
Además de todas estas respuestas, el HTML semántico mejora su clasificación de búsqueda (ver SEO ). Google y otros buscadores buscan ciertas piezas semánticas de su página y las utilizan para hacer una gran parte de la clasificación.
Además, el uso del HTML semántico beneficiará a los usuarios de tecnologías de asistencia, como los lectores de pantalla, que pueden alterar el tono o el género de la voz de lectura para significar información importante o información de presentación, o énfasis. Por ejemplo, si la información que desea resaltar realmente está marcada como < em> para eximirse, en lugar de simplemente en negrita (aún puede darle estilo a una etiqueta <em> para ponerla en negrita en su CSS), un lector de pantalla alterará el inflexión de esa palabra en particular para enfatizarla.
Además de utilizar la separación adecuada de los datos y el formato, hacer que el código sea más eficiente y legible en la pantalla, usar el marcado correctamente no solo significará visualmente que la información es de cierto tipo, sino que también beneficiará a los usuarios de tecnología de asistencia. Por ejemplo, si tiene una lista de información simplemente marcada como párrafos, para alguien que no pudo ver la página, no hay forma de indicar que la información está relacionada, mientras que si su información está marcada como, por ejemplo, lista desordenada <ul> o una lista ordenada <ol> , visualmente es más fácil para alguien leer esa información porque está claramente sangrada o tiene viñetas. Para los usuarios de lectores de pantalla, por ejemplo, cuando se trata de una lista, el lector de pantalla anunciará que el próximo contenido es una lista.
Es como usar el estilo del código de barras aquí en : si usa el formato de ''código'' para resaltar cualquier código en su publicación, deja más claro para que todos lo lean, y muestra que el texto resaltado es de hecho un código. HTML es lo mismo.
Aunque redactar el marcado semánticamente correcto es bueno para la organización y la administración del código, y facilita la separación del estilo y el código, creo que hay una motivación más fuerte detrás de su uso.
El margen de beneficio semánticamente correcto aumenta la probabilidad de que una máquina (motor de búsqueda / bot / raspador de pantalla u otro tipo de script) pueda analizar su contenido para evaluar su propósito.
Los microformatos son una extensión lógica del marcado semántico; el uso de estándares de microformato puede permitir una evaluación más precisa.
El código semántico usa elementos html para su propósito dado. Un HTML bien estructurado tendrá un significado semántico para una amplia gama de usuarios y agentes de usuario (navegadores sin hojas de estilo, navegadores de texto, PDA, motores de búsqueda, etc.)
Beneficios
Los dos puntos mencionados anteriormente son los beneficios básicos del uso del código semántico. Si usamos etiquetas conocidas mundialmente, otros lo entienden sin ningún esfuerzo adicional. Cualquier programa de software que use las etiquetas conocidas mundialmente no podrá entender nuestra página.
Un ejemplo práctico de esto es que los motores de búsqueda pesan la importancia de las palabras clave de acuerdo con lo que son. Por ejemplo, y el título del artículo encerrado en uno de los títulos (h1 y su jerarquía) tendría mayor importancia y, por lo tanto, visibilidad que los intervalos. El HTML semántico permite una optimización efectiva del Search Engine (SEO).
El extractor de datos semánticos del W3C es una buena demostración de las posibilidades de utilizar el HTML semántico y la automatización del software.
Un efecto secundario de excluir información de presentación del marcado semántico es que ahora los datos y su presentación se pueden desacoplar en la implementación. Lo que significa que puede cambiar la presentación sin tocar los datos, o aplicar la presentación a múltiples tipos de datos. Esto es exactamente lo que logran tecnologías como CSS y XHTML. Por supuesto, el HTML semántico no es necesario para este desacoplamiento, sino que, al ser semántico, impone la exclusión de la información de presentación.
http://www.seoblogger.co.uk/serps/the-benefits-of-using-semantic-code.html
El marcado no semántico corre el riesgo de ser inaccesible para personas con discapacidades, para empezar. Lea el reciente artículo de Nicholas C. Zakas sobre este tema; Creo que es una gran introducción al tema.
Y tenga en cuenta que un motor de búsqueda como Google ve su sitio casi de la misma manera que la tecnología de asistencia que usa una persona con discapacidad. El robot de Google no sabe ni le preocupa que algo tenga esquinas redondeadas y un bonito fondo azul, pero hace una gran diferencia si sabe que es un <h1> y no cualquier antiguo <div> .
Más fácil para usted y para otros desarrolladores saber qué está sucediendo, se lee mejor cuando CSS y otros no están disponibles. "Puede" funcionar mejor cuando se usa un lector de pantalla, por lo que mejora su accesibilidad. Lo que es más importante, creo que es que te hace el hábito de escribir una marca mejor, que es más probable que valide sin tener que hacer demasiadas correcciones. Simplemente ponga sus buenas prácticas, pero yo diría que no se obsesione demasiado con estar 100% en lo correcto todo el tiempo, el poder del cerebro es mejor gastar en otros problemas que discutir sobre el clima un dl es mejor que un ul para un problema dado, etc.
Puede encontrar que la separación de sus datos de la presentación de sus datos ayudará a su desempeño como programador. Lo que quiero decir con esto es que eventualmente querrás mostrar tus datos de manera diferente. Cuando llegue ese día, no querrás que tus datos se mezclen con el formato. Desea que sus datos sean puros, de modo que todo lo que tiene que hacer es ajustar el formato, no los datos.
En términos de HTML y CSS, solo desea tener que ajustar el CSS y dejar el HTML solo.
En cuanto a la ejecución de, por ejemplo, lo que sea que represente su HTML / CSS, la separación adecuada de los datos y el formateo pueden hacer que su HTML sea más pequeño.
Resultado más predecible sobre los diferentes dispositivos utilizados para mostrar HTML en.
Su energía puede enfocarse en las diferentes peculiaridades / errores en cada uno de los dispositivos (más comúnmente utilizados para su aplicación).
Muchas personas piensan que el rendimiento es una medida de la velocidad con la que algo se ejecuta. En la presentación de Linus Torvald en git (en youtube), argumenta que el rendimiento es más que eso. El rendimiento también se trata de utilidad. Creo que mi coche es un vehículo de rendimiento porque consume menos combustible. Un sitio web que es difícil de usar puede ser rápido de descargar, pero realiza su tarea de manera deficiente.
El argumento de que la semántica en la web aumenta la eficiencia porque los archivos CSS y js están en caché no es sólido. Es posible construir un sitio web con una huella muy pequeña que no es, en absoluto, semántica. Pero la mayoría de las veces, si eres considerado y dices lo que quieres decir (semántica), entonces probablemente aumentes el rendimiento general porque de todos modos eres eficiente. Decir lo que quieres decir es la mejor respuesta la mayor parte del tiempo.
Mucha gente cree que nunca deberías desviarse de la web semántica. Esta disciplina / regla en particular nunca debe romperse y para hacerlo invita a críticas severas o al ridículo. Esto no es práctico, dada la amplia gama de situaciones y usos en los que puede existir su aplicación. A veces, es más inteligente ser flexible.
Finalmente, no hay semántica absoluta. Consideraría una celda de tabla como una columna en algunas circunstancias. ¿Y qué tan diferentes son los términos fuertes y audaces? ¿Puedes realmente argumentar que siempre se debe usar "fuerte"? "Negrita" tiene un significado igualmente claro la mayor parte del tiempo. Por supuesto, "énfasis" y "cursiva" son diferentes. "Cursiva" es la implementación de "énfasis". Si eres semántico hasta el extremo, puedes terminar gastando mucho tiempo y esfuerzo en aplicar las reglas y menos tiempo para hacer las cosas. ¡Además, acabarás siendo un gruñón!
¡Espero que ayude!
Hay claros beneficios. Por ejemplo, eche un vistazo a este fragmento de código: <article>Bla bla bla</article>
Ahora eche un vistazo al "equivalente" con HTML4: <div class="article">Bla bla bla</div>
Para una máquina, no hay diferencia especial entre <div> o <article> . Dos cadenas diferentes sin ningún significado especial. Pero si proporciona etiquetas diferentes, puede asignarle un significado diferente a cada una de ellas, y es lo que hace, de hecho.
Desde el punto de vista de un robot de motor de búsqueda, una etiqueta <div> es algo que se usa como contenedor, sin otro significado especial. Pero si utilizo <article> el robot del motor de búsqueda puede entender que dentro de él va a haber un texto con algo interesante que decir a la gente.
Puedes verlo más claro con otra etiqueta como <aside> , donde estás diciendo que lo que está dentro de ella no tiene ninguna relación con el resto del documento. Por ejemplo, puede poner anuncios dentro (los anuncios pueden estar relacionados con el contenido, pero esto es accidental) :)
En términos de rendimiento, no sé si hay una gran diferencia o si hay una diferencia, pero no es el objetivo lo que se quiere alcanzar.
Si escribe HTML semántico, cada elemento de su página contiene su propio significado. Es bueno para las páginas de búsqueda, para los lectores de pantalla, para los navegadores de escritorio y dispositivos móviles. Y por ti tambien. Por ejemplo, puede escribir estilos solo para etiquetas. Verifique este ejemplo: awsm.css .
No sobre el rendimiento
El marcado semántico no se trata de rendimiento, se trata de significado.
Imaginemos dos universos paralelos.
- En Dumb HTML World , solo hay una etiqueta:
<thing>. ¿Cómo se especifica dónde se deben aplicar los estilos? ¿Cómo sabrían los navegadores cómo renderizar la página? ¿Cómo distinguirían los lectores de pantalla para ciegos la diferencia entre los titulares y el texto y las notas al pie y los elementos del menú? Tendría que agregar todo tipo de atributos incómodos. - Mientras tanto, en Detailed HTML World , hay muchos nombres. Tiene
<header>y<footer>y<article>y<caption>y<menu>y<paragraph>y<footnote>, etc. Ahora puede aplicar estilos de forma inteligente, y cualquier programa que lea su contenido - navegadores , lectores de pantalla, lo que sea, pueden tener reglas apropiadas para el contenido. Por ejemplo:- "Mi usuario está ciego, por lo tanto, debo anunciar que hay imágenes, ofrecerle leer los subtítulos asociados y no molestarme en descargar los datos reales de la imagen".
- "Mi usuario tiene una pantalla pequeña y buena vista, y me ha pedido que haga párrafos pequeños para que quepan muchos en una página".
- "A mi usuario no le importan las notas al pie y nunca quiere verlas".
El mundo real está en algún lugar entre estos dos escenarios.
Algunos aspectos del HTML semántico son un poco idealistas, pero el principio es el sonido. Por ejemplo, usar <strong> lugar de <b> transmite "este texto es importante" y no necesariamente "este texto debe estar en negrita". Tal vez su usuario quiera que el texto importante se resalte en naranja. Eso depende de ellos.
El punto es que HTML es marcado , que se trata de etiquetar las cosas de manera útil . El HTML semántico es lo que debería ser todo HTML: etiquetas útiles y significativas.
Hacer que su sitio se cargue rápidamente es una pregunta diferente por completo.
(Ver también: mi respuesta aquí .)
Adición - evolucionando hacia HTML semántico
Creo que es natural que HTML se vuelva más semántico con el tiempo.
De vuelta en el mundo de Dumb HTML, probablemente terminarían con un marcado loco, como <thing type=''list''> , y <thing render=''image''> . Los programadores web se quejaban: "oye, hacemos esto todo el tiempo. ¿Por qué no tener una etiqueta <image> ? Nos haría la vida más fácil".
En el mundo real, las personas codifican constantemente cosas como <div id=''nav''> y <div class=''article''> . Por lo tanto, tiene sentido crear nuevos elementos, como <nav> y <article> y <section> . Que es lo que harían las especificaciones preliminares de HTML5 .