Uno de los errores más comunes que comete la gente al usar etiquetas es equiparar la <sección> de HTML5 con <div>, específicamente, usarla directamente como reemplazo (para fines de estilo). En XHTML o HTML4, a menudo vemos código como este:
<!-- Código HTML de 4 estilos --><div id=wrapper> <div id=header> <h1>Mi página súper tonta</h1> Contenido del encabezado </div> <div id=main> Contenido de la página < /div> <div id=secundario> Contenido secundario </div> <div id=footer> Contenido de pie de página </div></div>
Ahora en HTML5, se verá así:
¡No copie este código! ¡Esto está mal!
<section id=wrapper> <header> <h1>Mi página súper tonta</h1> <!-- Contenido del encabezado --> </header> <section id=main> <!-- Contenido de la página --> </ sección> <sección id=secundario> <!-- Contenido secundario --> </sección> <pie de página> <!-- Contenido del pie de página --> </pie de página></sección>
Este uso es incorrecto:**
No es un contenedor de estilo. El elemento **sección representa la parte semántica del contenido utilizado para ayudar a crear un resumen de documento. Debe contener un encabezado. Si está buscando un elemento que actúe como contenedor de página (como el estilo HTML o XHTML), considere escribir el estilo directamente en el elemento del cuerpo, como sugiere Kroc Camen. Si aún necesita contenedores de estilo adicionales, quédese con los divs.
Con base en las ideas anteriores, los siguientes son ejemplos del uso correcto de HTML5 y algunas funciones de roles ARIA (tenga en cuenta que, dependiendo de su propio diseño, es posible que también necesite agregar divs)
<body><header> <h1>Mi página súper tonta</h1> <!-- Contenido del encabezado --></header><div role=main> <!-- Contenido de la página --></div>< aside role=complementary> <!-- Contenido secundario --></aside><footer> <!-- Contenido de pie de página --></footer></body>2. Utilice encabezados y grupos h solo cuando sea necesario
Por supuesto, no tiene sentido escribir etiquetas que no es necesario escribir. Desafortunadamente, a menudo veo encabezados y grupos h mal utilizados sin ningún propósito. Puede leer los dos artículos sobre los elementos de encabezado y hgroup para una comprensión detallada. Resumo brevemente el contenido de la siguiente manera:
Dado que los encabezados se pueden usar varias veces en un documento, esto puede hacer que este estilo de codificación sea popular:
¡No copie este código! Aquí no se necesita ningún encabezado ->
<header> <h1>Mi mejor publicación de blog</h1> </header> <!-- Contenido del artículo --></article>
Si su elemento de encabezado contiene solo un elemento de encabezado, descarte el elemento de encabezado. Dado que el elemento del artículo ya garantiza que el encabezado aparecerá en el resumen del documento y el encabezado no puede contener varios elementos (como se define anteriormente), ¿por qué escribir código adicional? Simplemente escríbelo así:
<article> <h1>Mi mejor publicación de blog</h1> <!-- Contenido del artículo --></article>
uso incorrecto de
Sobre el tema de los encabezados, también veo a menudo que hgroups se usa incorrectamente. A veces, hgroup y header no se deben usar juntos:
La primera pregunta suele tener este aspecto:
¡No copie este código! Aquí no se necesita hgroup –> <hgroup> <h1>Mi mejor publicación de blog</h1> </hgroup> <p>por Rich Clark</p></header>
En este ejemplo, simplemente elimine el grupo h y deje que el encabezado siga su curso.
<header> <h1>Mi mejor publicación de blog</h1> <p>por Rich Clark</p></header>
La segunda pregunta es otro ejemplo innecesario:
¡No copie este código! No se requiere encabezado aquí ->
<hgroup> <h1>Mi empresa</h1> <h2>Establecida en 1893</h2> </hgroup></header>
Si el único subelemento del encabezado es hgroup, ¿qué más hace el encabezado? Si no hay otros elementos en el encabezado (como varios hgroups), simplemente elimine el encabezado directamente.
<hgroup> <h1>Mi empresa</h1> <h2>Establecida en 1893</h2></hgroup>3. No coloques todos los enlaces tipo lista en la navegación.
Con la introducción de 30 nuevos elementos en HTML5 (en el momento de la publicación original), nuestras elecciones en la construcción de etiquetas semánticas y estructuradas se han vuelto algo descuidadas. Dicho esto, no deberíamos abusar de los elementos hipersemánticos. Desafortunadamente, nav es un ejemplo de tal abuso. La especificación del elemento de navegación se describe a continuación:
El elemento de navegación representa un bloque en la página que enlaza con otras páginas u otras partes de esta página;
Nota: No es necesario colocar todos los enlaces de la página en el elemento de navegación; este elemento está diseñado para usarse como bloque de navegación principal. Para dar un ejemplo específico, suele haber muchos enlaces en el pie de página, como términos de servicio, página de inicio, página de declaración de derechos de autor, etc. El elemento de pie de página en sí es suficiente para manejar estas situaciones. Aunque el elemento de navegación también se puede utilizar aquí, normalmente pensamos que es innecesario.
Las palabras clave son la navegación principal. Por supuesto que podemos hablar todo el día sobre lo que es importante. Así lo defino personalmente:
Para un acceso más fácil, ¿agregarás un enlace a esta etiqueta de navegación en un acceso directo?
Si la respuesta a estas preguntas es no, simplemente haga una reverencia y váyase por su cuenta.
4. Errores comunes en los elementos de las figuras.El uso correcto de figura y leyenda es realmente difícil de dominar. Echemos un vistazo a algunos errores comunes,
No todas las imágenes son cifras.
Arriba, te dije que no escribieras código innecesario. Lo mismo ocurre con este error. He visto muchos sitios web etiquetar todas las imágenes como cifras. Por el bien de la imagen, no le agregue etiquetas adicionales. Simplemente te estás lastimando y no aclaras tu página.
Las figuras se describen en la especificación como contenido fluido, a veces con su propia descripción del título. Generalmente, se hace referencia a ellos como unidades independientes en el flujo de documentos. Ésta es la belleza de la figura: se puede mover desde la página de contenido principal a la barra lateral sin afectar el flujo del documento.
Estos problemas también se tratan en el diagrama de flujo de elementos HTML5 mencionado anteriormente.
Si el diagrama es puramente para presentación y no se hace referencia en ninguna otra parte del documento, entonces definitivamente no es
. El resto depende de la situación, pero empieza por preguntarte: ¿Esta imagen tiene que ser relevante para el contexto? Si no, probablemente tampoco lo sea (tal vez lo sea). Continuando: ¿Puedo mover esto a un apéndice? Si se aplican ambas preguntas, probablemente lo sea.
El logo no es una figura.
Además, los logotipos tampoco se aplican a las figuras. Aquí hay algunos fragmentos de código comunes que uso:
<!-- ¡No copie este código! Esto es incorrecto--><header> <h1> <figure>  </figure> Nombre de mi empresa </h1 > </header><!-- ¡No copie este código! Esto también es incorrecto--><header> <figure>  </figure></header>
No hay nada más que decir. Este es un error muy común. Podemos discutir entre nosotros hasta que las vacas se vayan a casa sobre si el logotipo debería ser una etiqueta H1, pero ese no es el punto aquí. El verdadero problema es el uso excesivo del elemento figura. Solo se debe hacer referencia a las figuras dentro del documento o rodearlas de elementos de sección. Creo que es poco probable que se haga referencia a su logotipo de esta manera. Es simple, no uses figura. Sólo necesitas hacer esto:
<header> <h1>Nombre de mi empresa</h1> <!-- Más cosas aquí --></header>
La figura no es solo una imagen.
Otro error común sobre la figura es que sólo se utiliza en imágenes. Una figura puede ser un vídeo, un audio, un gráfico, una cita, una tabla, un código, una prosa o cualquier combinación de estos u otros. No limites las cifras a imágenes. El trabajo de los estándares web es describir con precisión el contenido mediante etiquetas.
5. No utilice atributos de tipo innecesariosEste es un problema común, pero no un error, y creo que deberíamos evitar este estilo mediante las mejores prácticas.
En HTML5, los elementos de script y de estilo ya no requieren el atributo de tipo. Sin embargo, es probable que su CMS los agregue automáticamente, por lo que no es tan fácil eliminarlos. Pero si estás codificando a mano o tienes control total sobre tus plantillas, realmente no hay razón para incluir el atributo de tipo. Todos los navegadores piensan que los scripts son javascript y los estilos son estilos css, por lo que ya no es necesario hacer esto.
<!-- ¡No copie este código! ¡Es demasiado redundante! --><link type=text/css rel=stylesheet href=css/styles.css /><script type=text/javascript src=js/ scripts /></script>
De hecho, todo lo que necesitas hacer es escribir:
<enlace rel=hoja de estilo href=css/styles.css /><script src=js/scripts /></script>
Incluso se puede omitir el código que especifica el juego de caracteres. Mark Pilgrim lo explica en el capítulo Semántica de Sumérgete en HTML5.
6. Uso incorrecto del atributo de formulario.HTML5 introduce algunos atributos nuevos de formulario. Aquí hay algunas notas sobre su uso:
Propiedades booleanas
Algunos elementos multimedia y otros elementos también tienen propiedades booleanas. Aquí se aplican las mismas reglas.
Algunos de los nuevos atributos del formulario son booleanos, lo que significa que mientras aparezcan en la etiqueta, se garantiza que se establecerá el comportamiento correspondiente. Estas propiedades incluyen:
Francamente, rara vez veo esto. Tomando como ejemplo los requeridos, los más comunes son los siguientes:
<!-- ¡No copie este código! ¡Esto es incorrecto! --><tipo de entrada=nombre de correo electrónico=nombre de correo electrónico =true /><!-- Otro ejemplo de error --><tipo de entrada=nombre de correo electrónico = correo electrónico requerido=1 />
Estrictamente hablando, esto no es gran cosa. Siempre que el analizador HTML del navegador vea que el atributo requerido aparece en una etiqueta, se aplicará su funcionalidad. Pero ¿qué pasa si escribes requerido=falso al revés?
<!-- ¡No copie este código! ¡Esto es incorrecto! --><tipo de entrada=nombre de correo electrónico=correo electrónico requerido=false />
El analizador seguirá tratando el atributo requerido como válido y realizará el comportamiento correspondiente, incluso si intenta decirle que no lo realice. Obviamente esto no es lo que quieres.
Hay tres formas válidas de utilizar propiedades booleanas. (Los dos últimos sólo son válidos en xthml)
La forma correcta de escribir el ejemplo anterior es:
<tipo de entrada=nombre de correo electrónico=correo electrónico requerido />Resumir
Lo anterior es lo que el editor le presenta sobre cómo evitar 6 usos incorrectos comunes de HTML5. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!