HTML válido. Extensiones del navegador. Errores y advertencias de CSS
Hola, queridos amigos! ¡Me alegro de verte en mi blog! Hoy hablaremos de Validez HTML en el sitio en su conjunto y sus páginas separadas. La validez es el cumplimiento del código con ciertos estándares. El Consorcio Mundial trabaja en el desarrollo de estándares web Amplia red(W3C) es una comunidad internacional de organizaciones, personal y público.
La misión del consorcio es desbloquear todo el potencial de la World Wide Web mediante el desarrollo e implementación de protocolos y directrices que permitan el crecimiento a largo plazo de Internet.
El sitio web oficial del W3C proporciona herramientas en línea muy útiles para webmasters, una de ellas es un validador: este servicio gratuito, que le permite comprobar el cumplimiento del sitio con los estándares web modernos.
Desafortunadamente, el servicio es completamente Inglés, pero si sabes un poco de desarrollo y maquetación seguro que entenderás su esencia y mensaje 😉
Pronto pagina de inicio Hay tres pestañas:
Para iniciar el analizador, debe cambiar a la pestaña requerida. Como ejemplo, consideraré verificar por URL; Oculto bajo el enlace Más opciones opciones adicionales, haz clic en él para acceder a la configuración:
- Codificación de caracteres: codificación de caracteres. WordPress usa UTF-8, pero puedes dejar el valor predeterminado "Detectar automáticamente" para detección automática codificaciones.
- Tipo de documento: tipo de documento (HTML, XHTML, SVG, etc.). Marque la casilla Sólo si falta si el tipo de documento no está especificado en la página y debe especificarse manualmente para su verificación.
- Enumerar mensajes secuencialmente: muestra errores y advertencias en una lista secuencial;
- Agrupar mensajes de error por tipo: agrupar errores y advertencias por tipo;
- Mostrar fuente: muestra el código fuente;
- Mostrar esquema: muestra la estructura del documento;
- Limpiar marcado con HTML Tidy: limpiar marcado con HTML-Tidy;
- Validar páginas de error: verifique las páginas con errores, por ejemplo, errores 404;
- Salida detallada - salida detallada. Para ser honesto, no noté diferencia al habilitar esta opción, si sabes lo que hace, compártelo en los comentarios, te lo agradeceré mucho.
Cuando todas las configuraciones estén configuradas, presione el botón Verificar para comenzar validador HTML. Si el documento no tiene errores aparecerá el siguiente mensaje:
Verificación de documentos completada. No hay errores ni advertencias que mostrar.
Traducido al ruso, esto significa: “Se ha completado la verificación del documento. No se encontraron errores ni advertencias." ¡Excelente!
Si el documento no pasa la verificación, veremos inscripción sencilla sobre su finalización:
Y por supuesto, una lista de mensajes que contienen información sobre errores y advertencias con explicaciones, así como enlaces a líneas específicas documentos, pero sólo si la opción Mostrar fuente estaba habilitada.
La siguiente captura de pantalla muestra un fragmento de la consulta de la página principal de Yandex. Es extraño ver esto, ni siquiera me lo esperaba, porque el propio Yandex participa en el desarrollo de los estándares W3C... Bueno, bueno, es realmente difícil cumplir con absolutamente todos los estándares, especialmente para un portal tan grande. .
Al comienzo de su andadura, el Blog gratuito para webmasters contenía muchos errores y advertencias. Mientras estudiaba, logré reducir su número y, con el tiempo, deshacerme de ellos por completo. De ahora en adelante seguiré los estándares del W3C, aunque algunos complementos añaden un inconveniente... ¡El tiempo lo dirá!
Entonces, ¿por qué deberíamos código válido? Validación de documentos web - paso importante, lo que puede ayudar enormemente a mejorar y garantizar su calidad, además de ahorrar mucho tiempo y dinero. Algunos expertos afirman que código correcto puede tener un efecto beneficioso sobre resultados de búsqueda! ¡Pruebe su sitio y comparta sus resultados!
¡Hola a todos!
Es necesario comprobar la validez del código HTML porque los robots de búsqueda sólo ven el código HTML. Por este motivo, es aconsejable incluir el código del sitio en orden completa. En esto nos ayudarán los servicios especiales en línea que verifican el código y señalan específicamente los errores.
Uno de estos servicios es validator.w3.org, que probablemente sea el mejor. Está íntegramente en inglés, por lo que algunos pueden tener problemas para trabajar con él, pero no te alarmes: el validador te mostrará tanto el número de línea como el propio error.
El código válido es el código que cumple con todos los estándares.
Para la lección necesitarás el siguiente material:
El servicio en línea mencionado anteriormente verifica el código HTML en línea en todo el sitio. Sólo necesita especificar el dominio de su sitio y hacer clic en el botón "Verificar", así comenzará a verificar el código HTML del sitio.
El validador también proporciona una muy interesante oportunidad— comprobar los archivos del sitio con computadora local. En mi opinión, esta herramienta será útil para quienes crean sitios web personalizados. Antes de enviar su pedido, debe verificar todo nuevamente, porque desea que la gente siempre esté satisfecha con su trabajo. Puede verificar archivos yendo a la pestaña "Validar mediante carga de archivo": 
El servicio W3c Validator me mostró dos errores y me dio 8 advertencias. Intentaré solucionarlos y mostrarte cómo se hace. 
Se corrigió el error “El estilo del elemento no se permite como hijo del elemento div en este contexto. (Suprimiendo más errores de este subárbol)". Este error me dice que no es necesario especificar estilos en el código HTML, es decir, en la etiqueta. Por lo tanto, los estilos que están escritos en este bloque deben transferirse al archivo style.css y listo.
El validador también indica dónde está exactamente el error: 
De esta manera puede encontrar y corregir errores de código HTML. Pero los sitios no solo constan de código de marcado, sino también CSS, por lo que también verificamos las hojas de estilo en cascada del recurso web.
Comprobando la validez del código CSSTambién puede verificar la validez del código CSS en el validador W3c. Puedes hacerlo usando este enlace. El principio de funcionamiento es el mismo: especifica la URL del sitio o selecciona un archivo en su computadora y hace clic en el botón "Verificar".
A diferencia del mismo validador HTML, el validador CSS está en ruso.
En Comprobador CSS código de validez, el servicio emite gran número errores y advertencias. Recibí 23 errores y hasta 281 advertencias. A primera vista esto puede parecer mucho e incluso asustarte, pero la mayoría de ellos errores especificados y las advertencias se muestran solo porque el servicio no conoce ciertas propiedades que se aplican a diferentes navegadores.
En mi caso, la mayoría de las 281 advertencias son propiedades CSS para visualización normal en diferentes navegadores:
El servicio coloca etiquetas como “ extensión desconocida proveedor." Por lo tanto, si al comprobar sus archivos CSS ve una gran cantidad de errores de este tipo, no se alarme. Todo está bien.
No enumeraré los errores más comunes ni las formas de eliminarlos, ya que las soluciones de cada uno pueden ser diferentes y es necesario mirar el código HTML para comprender lo que está sucediendo.
Si no puede resolver un error, comparta el problema en los comentarios de la lección, tal vez encontremos una solución juntos.
Espero que las lecciones que se publicaron durante esta semana te hayan sido útiles y te hayan ayudado a resolver ciertos problemas.
Bueno, ¡adiós!
Artículo anteriorArtículo siguiente
Todos los servicios presentados en este extremadamente selección útil ayudar a un diseñador web a probar que su sitio cumple con los estándares y normas generalmente aceptadas de los desarrolladores web. En particular, puede comprobar la exactitud del código HTML de la página, los estilos CSS, la accesibilidad del sitio en todo el mundo, la accesibilidad para dispositivos móviles, carga extrema en el sitio, velocidad de carga de la página, cómo se ve el sitio en diferentes navegadores y, en particular, en Internet Explorer.
1. Enlace de verificación
Comprueba un sitio o página en busca de enlaces rotos 
2. Comprobador de URL
Comprueba la disponibilidad del sitio en diferentes puntos globo. 
3. Comprobador móvil
Comprueba qué tan accesible es el sitio para dispositivos móviles y muestra una lista de errores y comentarios. 
4. Unicornio
Varias pruebas para el sitio, en particular HTML 1.0 y validación del Feed. 
5. validador CSS
Validación de hojas de estilo en cascada (CSS) y documentos (X)HTML. 
6. Fuente RSS Validador
Comprobación de la sintaxis de los canales RSS. 
7. Accesibilidad con estilo
Prueba el sitio para verificar el cumplimiento de los estándares WCAG 1.0. 
8. Contraste de colores
cheques contraste de color entre los elementos frontal y posterior del sitio. 
9. Validador HTML de WDG
Validador de páginas web HTML. 
10.Dr. Verificación de validación del sitio de Watson
Verificación completa del sitio en varias áreas: HTML, enlaces, enlaces de imágenes, velocidad de carga, SEO. 
11. Comprobador de robots
Servicio de comprobación del archivo robots.txt. 
12. Firebug Firefox Extensión
Extensión para Firefox con un conjunto de herramientas de prueba. 
13. Impacto de carga
Probando el sitio en condiciones extremas aumento de carga al sitio. 
14.Comprobador de accesibilidad
Otro servicio para probar el cumplimiento de los estándares de un sitio. 
15. Viewlike.us: el servicio no funciona
Muestra cómo se ve el sitio cuando diferentes resoluciones pantalla. 
Hola a todos. Regresé a San Petersburgo nuevamente después de 3 semanas en el Círculo Polar Ártico. Y aquí todo es igual de gris y lúgubre :(
La lección de hoy es para webmasters avanzados. No recomiendo que los principiantes comprendan un tema tan difícil por sí solos; es mejor leer las publicaciones en la sección "". El artículo menciona que uno de los criterios de calidad de un tema es la validez de su código.
EN esquema general le di una definicion este término. Pero creo que vale la pena analizar esto con más detalle, que es lo que haremos en el artículo de hoy.
Validez en en un sentido general esta palabra significa cumplimiento de normas. En el caso de Internet, las reglas y estándares para el diseño de páginas y la creación de códigos los establece el W3C. Los creadores de esta organización estuvieron en los orígenes del desarrollo de las primeras versiones de HTML (Hyper Text Markup Language, o marcado de hipertexto) y se convirtieron en los pioneros de la World Wide Web, que poco a poco fue ganando enorme popularidad. Este descubrimiento pertenece a Sir Timothy John Berners-Lee junto con Robert Caillot. Bernes-Lee antes hoy es el jefe del W3C ( Mundial Web Consortium, World Wide Web Consortium) y pionero en esta área.
Con el uso del marcado HTML, fue posible crear páginas web y se crearon navegadores para reconocerlas en una forma familiar para los usuarios. El W3C ha introducido una serie de estándares que deben cumplir los documentos en la web para que todos los navegadores puedan reconocerlos correctamente. A lo largo del desarrollo de Internet, los creadores libraron guerras por la supremacía. Algunos de ellos incluso intentaron introducir sus propios estándares nuevos, pero el W3C, gracias a sus desarrollos, pudo mantener el papel de legislador en las reglas para la creación de código. EN Versiones HTML 3 soporte para CSS (hojas de estilo en cascada o mesas en cascada estilos). Inicialmente, los estilos, colores y formas se especificaban directamente en el código html, pero creación de css simplificó significativamente esta tarea, alivió el código fuente y, en consecuencia, el tiempo de carga de la página. Última versión– Este es HTML 5, que es cada vez más relevante. Por mucho tiempo su lugar lo ocupó Html 4.01 (desde 1999).
Este antecedentes historicos se proporciona para que tenga una comprensión más integral del tema de la revisión de hoy: la validación del sitio web. Si visita el sitio web oficial del W3C en la sección "Estándares", verá una lista completa de subsecciones con estándares. Aquí, por ejemplo, puedes ver el estado actual en HTML:
Para cada uno de los subpárrafos existen largas listas de normas que definen tal o cual atributo, elemento versión actual código. Aquí, por ejemplo, hay contenido incompleto para HTML 5:
Hay muchas reglas, como comprenderá. Para verificar el cumplimiento de estos por parte de su sitio, puede utilizar validadores de sitios especiales.
Pero antes de considerar su trabajo, averigüemos qué tan importante es realizar esta operación.
¿El sitio debería ser válido?No hay consenso sobre este tema, pero existen razones objetivas que indican que es necesario verificar la validación del sitio.
Lo primero a lo que debe prestar atención es a la llamada compatibilidad del sitio entre navegadores. Aquellos. Lo ideal es que el sitio se muestre por igual en todos los navegadores. EN en este caso El cumplimiento de los estándares W3C garantiza esta opción.
En segundo lugar, los robots de los motores de búsqueda reconocen el código HTML utilizando los mismos parámetros que los navegadores. Aquellos. si su código contiene errores, por ejemplo, etiquetas abiertas, enlaces rotos, o una estructura rota, todo esto puede afectar la indexación del sitio. robots de búsqueda. lo que significa errores graves en el código puede bajar la posición del recurso en los resultados de búsqueda.
Sin embargo, como ya hemos visto, el W3C tiene muchas reglas, y en ocasiones no es posible cumplirlas todas. Por lo tanto, en este asunto es mejor quedarse en el medio: corregir primero los errores graves. Es importante seguir la sintaxis correcta, comprobar el anidamiento de etiquetas y mantener su secuencia y estructura correctas.
Validadores de código HTML y CSSEs mejor garantizar el cumplimiento de las normas desde el principio. En la primera etapa de selección. temas de WordPress Para tu blog, tómate el tiempo para comprobar la validez de su código HTML y CSS. Es deseable que el código html y el validador css produzcan inicialmente el siguiente resultado:
Después de instalar complementos y complementos, consulte también el blog para identificar inmediatamente los problemas y sus fuentes.
Para comprobar la validación de la página existen diferentes servicios en línea. Los más fiables y completos son los validadores del W3C.
Puede encontrar enlaces a ellos en la página principal del sitio web oficial: www.w3.org 
Unicorn es un validador combinado en ruso (tiene una función para cambiar de idioma) que proporciona información sobre todos los parámetros del sitio a la vez.
Ingrese la URL del sitio y haga clic en "Verificar".
A la derecha está el número de errores (cruz roja) y advertencias (signo de exclamación amarillo).
Ver información detallada Los errores se pueden encontrar en la lista desplegable debajo de cada opción.
El validador HTML verifica los errores de la página especificada por la URL y no de todo el sitio.
Se puede obtener información más detallada sobre errores con información sobre herramientas verificando la validación CSS y código html en programas separados.
Así es como se ve la descripción de los errores y sus causas en el validador html:
Como puede ver, la información se proporciona en inglés. Cada error o advertencia va acompañado del número de la línea del código fuente en la que se encuentra (Línea 381, Línea 652). En primer lugar, debe corregir los errores (icono rojo). Si no sabes qué es este error y cómo solucionarlo, intenta buscar información en foros especializados o haz preguntas en los comentarios de este artículo.
Nuevamente, el validador html diagnostica el código fuente y los errores deben corregirse en los archivos correspondientes de su blog. Discutimos cómo encontrarlos en el artículo sobre.
Este validador tiene la capacidad de habilitar opciones adicionales:
- Puede agrupar errores por un tipo (Agrupar mensajes de error por tipo);
- mostrar todo el código fuente que el servicio utilizó en el análisis (Mostrar Fuente);
- comprobar páginas que generan Error (Validar páginas de error).
Además, la función habilitada "Limpiar marcado con Html-Tidy" le permite ver su código con los errores corregidos según la versión del programa Html-Tidy. Sin embargo, el W3C advierte que este programa no es su desarrollo y por lo tanto no brindan garantías de que el código sea correcto. Sin embargo este codigo puede servirle como pista a la hora de corregir errores.
El validador de código CSS del W3C también proporciona una opción de corrección de errores similar. No es necesario habilitarlo, funciona de forma predeterminada.
Además de los validadores de sitios en línea, también es posible instalar una extensión para Firefox, que comprobará si hay errores en código fuente páginas directamente en el navegador. Se llama "Validador HTML".
Permítanme recordarles también que además de html y css, también existe . Su presencia es importante para la optimización de los motores de búsqueda.
El tema de hoy es bastante difícil. Cuando empiece a corregir errores, probablemente tendrá muchas preguntas. Es recomendable corregir aquello en lo que confía para no dañar el sitio. Recuerde hacerlo antes de realizar cambios. ¡Adiós!
PD El otro día compramos billetes para Kamchatka en septiembre al precio milagroso de 16.600 por persona ida y vuelta. Es muy barato, los precios no estaban así desde hace mucho tiempo. Si alguien está interesado, creo que todavía hay tiempo para conseguir esas entradas. Escalaremos volcanes y admiraremos la naturaleza salvaje e intacta con el club turístico PIK.
Realiza varias comprobaciones de su código. Los principales:
No puede confiar en un código no válido.
El principal argumento en contra de la validación es que es demasiado estricta y no se corresponde con el funcionamiento real de los navegadores. Sí, el HTML puede no ser válido, pero todos los navegadores pueden tratar algún código no válido de la misma manera. Si estoy dispuesto a asumir la responsabilidad por el código incorrecto que escribo, entonces no tengo que preocuparme por verificarlo. Lo único que me tiene que preocupar es que funcione. Mi posición Esta es una de las pocas veces que hablo públicamente sobre mi posición sobre algo. Siempre he estado entre los opositores a la validación, basándose en el hecho de que el validador es demasiado estricto para ser práctico en aplicaciones reales. Hay cosas que son compatibles con la mayoría de los navegadores (en, después) que no son válidas, pero a veces son muy necesarias para su correcto funcionamiento. En realidad, mi mayor problema La validación es la verificación n.º 4 (para elementos extraños). Soy partidario del uso de atributos personalizados en etiquetas HTML para almacenar metadatos adicionales relacionados con un elemento específico. Según tengo entendido, esto es, por ejemplo, agregar el atributo foo cuando tengo datos (barra) con los que necesito asociar. A veces las personas sobrecargan los atributos existentes para estos fines sólo para pasar la validación, aunque el atributo se utilizará para otros fines. No tiene sentido para mí.
El secreto de los navegadores es que nunca comprueban que el código HTML coincida con la DTD especificada. El Doctype que especificó en el documento cambia el analizador del navegador a modo específico, pero esto no carga el tipo de documento ni compara el código. Es decir, el analizador del navegador procesa HTML con algunas suposiciones de invalidez, como etiquetas de cierre automático y elementos de bloque cadenas interiores (estoy seguro de que hay otras).
En el caso de atributos personalizados, todos los navegadores analizan y reconocen como válidos los atributos sintácticamente correctos. Esto hace posible acceder a dichos atributos a través del DOM con usando Javascript. Entonces, ¿por qué debería preocuparme por la validez? Seguiré usando mis atributos y estoy muy contento de que HTML5 los formalice.
El mejor ejemplo de una tecnología que genera HTML no válido pero que marca una gran diferencia es ARIA. ARIA funciona agregando nuevos atributos a HTML 4. Estos atributos proporcionan significado semántico Los elementos HTML y el navegador pueden transmitir esta semántica. dispositivos auxiliares para ayudar a las personas con discapacidad. Todos los principales navegadores ahora admiten el marcado ARIA. Sin embargo, si utiliza estos atributos, tendrá HTML no válido.
En cuanto a las etiquetas personalizadas, creo que no hay nada de malo en agregar nuevas etiquetas sintácticamente correctas a una página, pero no veo mucho valor práctico en ello.
Para dejar clara mi posición: creo que los controles n.º 1 y 2 son muy importantes y siempre deben realizarse. También considero importante el control número 3, pero no tanto como los dos primeros. La verificación n.º 4 me resulta muy cuestionable porque afecta los atributos personalizados. Creo que, como máximo, los atributos personalizados deben marcarse como advertencias (en lugar de errores) en los resultados de la validación para poder verificar si ingresé el nombre del atributo incorrectamente. Es posible marcar etiquetas personalizadas como errores Buena idea, pero también tiene algunos problemas, por ejemplo, al incrustar contenido en otro marcado: SVG o MathML.
¿Validación por validar? Creo que la validación por validar es extremadamente estúpida. HTML válido solo significa que las 4 comprobaciones se aprobaron sin errores. Hay varias cosas importantes que el HTML válido no garantiza:- HTML válido no garantiza accesibilidad;
- HTML válido no garantiza una buena UX (experiencia de usuario);
- HTML válido no garantiza que un sitio web funcione;
- HTML válido no garantiza la correcta visualización del sitio.
Sé que este es un tema controvertido para muchos, así que absténgase de ser puramente emocional en los comentarios.
UPD: gracias por el karma, lo moví a temático. Repito las palabras del autor: entiendo que este es un tema controvertido, pero por favor absténgase de comentarios puramente emocionales y dé argumentos.
