La maquetación hasta ahora se hacía mediante capas con la etiqueta <div>. Ahora ya no es necesario, porque se han incorporado una serie de etiquetas estructurales que permiten definir las partes básicas de una página y estructurar su contenido:
- Encabezado <header>
- Pie <footer>
- Zona de navegación <nav>
- Secciones de la página <section>
- Artículos <article>
- Información que sale del flujo normal del contenido, como definiciones o aclaraciones, ampliación de la información…<aside>
Estas nuevas etiquetas proporcionan soluciones ante demandas existentes. Esto no quiere decir que deje de emplearse <div>, sino que deja de ser imprescindible para maquetar.
Existen otras etiquetas que también te pueden ser de mucha utilidad. Facilitan tareas que antes requerían de programación o flash, y dotan de mayor semántica a la página web.
- Barras de medida <meter>, que representan valores sobre un total (por ejemplo un 75%
o la representación gráfica de 2 sobre 10) - Barra de progreso <progress>, que informan al usuario de que debe esperar.
- O la posibilidad de etiquetar una fecha con <time>, para facilitar la búsqueda temporal.
- Elementos para enmarcar figuras como diagramas o imágenes ilustrativas que son prescindibles para el seguimiento de la información <figure>
- Etiqueta para enmarcar una conversación, por ejemplo, de chat <dialog>
- Detalles para saber más acerca de algo <details>
Ver ejemplo
- En cuanto al contenido interactivo, como vídeos o sonido, ya no será necesario un reproductor flash. Se han creado las etiquetas <video> y <sound> que incorporan los controles, por lo tanto lo único que deberás hacer para visualizar este tipo de material en tu web es incluir dichas etiquetas referenciando al archivo en cuestión y automáticamente se mostrarán botones para ajustar la reproducción o el volumen.
- Los <datagrid> son conjuntos de datos. Así como las tablas tradicionales se utilizarán más para datos estáticos, los datagrid están enfocados a su actualización y a la modificación por parte del usuario mediante scripts.
El uso de estas etiquetas facilitará el trabajo a los buscadores, que podrán dar un mejor servicio al identificar en cada momento el tipo de contenido de la página web.
Con HTML es más sencillo diseñar formularios. Lo que antes eran casi todo inputs de tipo texto (<input type=»text»>), ahora adquieren sentido con la incorporación de tipos específicos para que el usuario indique una URL, mail, número, fecha, color o rango.
Al utilizar estos tipos de input, el navegador es capaz de saber qué información se espera en cada momento y de ese modo puede adaptarse en cada situación. Por ejemplo, los móviles de última generación (smartphones) mostrarán un teclado u otro en función del tipo de campo. Si es un correo electrónico incluirán la @, si se espera un número, mostrarán el teclado numérico, etc.
Algunos ejemplos son:
Existen otras variantes para fecha y hora, etc. El control integra el calendario donde el usuario puede escoger fecha.
El usuario podrá escoger un color simple de una paleta de colores. El resultado será una cadena tipo #000000.
El control esperará una cadena de texto con la estructura típica nombre@dominio.com.
Un control de tipo deslizante permite especificar un valor dentro de un rango definido.
Al estar tan definidos es más fácil validarlos. Además, para el usuario es más sencillo e intuitivo utilizarlos. A la larga y con el uso generalizado de dichos tipos de campos, al usuario le resultarán familiares y le será más fácil interpretar los formularios.
De momento podrás observar que según el navegador que utilices los verás o no verás correctamente. Recuerda que hasta que HTML5 sea un estándar y los navegadores lo interpreten perfectamente pueden suceder este tipo de incompatibilidades.
