HTML5 fue desarrollado con la intención de simplificar, especificar y organizar el código. Para lograr este propósito, nuevas etiquetas y atributos fueron agregados y HTML fue completamente integrado a CSS y Javascript. Estas incorporaciones y mejoras de versiones previas están relacionadas no solo con nuevos elementos sino también con cómo usamos los ya existentes.
<mark>
La etiqueta <mark> fue agregada para resaltar parte de un texto que originalmente no era considerado importante pero ahora es relevante acorde con las acciones del usuario. El ejemplo que más se ajusta a este caso es un resultado de búsqueda. El elemento <mark> resaltará la parte del texto que concuerda con el texto buscado:
<span>Mi <mark> coche</mark> es rojo</span>
Listado 1-19. Uso del elemento <mark> para resaltar la palabra “coche”.
Si un usuario realiza una búsqueda de la palabra “coche”, por ejemplo, los resultados podrían ser mostrados con el código del Listado 1-19. La frase del ejemplo representa los resultados de la búsqueda y las etiquetas <mark> en el medio encierran lo que era el texto buscado (la palabra “coche”). En algunos navegadores, esta palabra será resaltada con un fondo amarillo por defecto, pero siempre podemos sobrescribir estos estilos con los nuestros utilizando CSS, como veremos en próximos capítulos. En el pasado, normalmente obteníamos similares resultados usando el elemento <b>. El agregado de <mark> tiene el objetivo de cambiar el significado y otorgar un nuevo propósito para éstos y otros elementos relacionados:
<em> es para indicar énfasis (reemplazando la etiqueta <i> que utilizábamos anteriormente).
<strong> es para indicar importancia.
<mark> es para resaltar texto que es relevante de acuerdo con las circunstancias.
<b> debería ser usado solo cuando no hay otro elemento más apropiado para la situación.
<small>
La nueva especificidad de HTML es también evidente en elementos como <small>.
Previamente este elemento era utilizado con la intención de presentar cualquier texto con letra pequeña. La palabra clave referenciaba el tamaño del texto, independientemente de su significado. En HTML5, el nuevo propósito de <small> es presentar la llamada letra pequeña, como impresiones legales, descargos, etc…
<small>Derechos Reservados © 2011 MinkBooks</small>
Listado 1-20. Inclusión de información legal con el elemento <small>.
<cite>
Otro elemento que ha cambiado su naturaleza para volverse más específico es <cite>. Ahora las etiquetas <cite> encierran el título de un trabajo, como un libro, una película, una canción, etc…
<span>Amo la película <cite> Tentaciones</cite> </span>
Listado 1-21. Citando una película con el elemento <cite>.
<address>
El elemento <address> es un viejo elemento convertido en un elemento estructural. No necesitamos usarlo previamente para construir nuestra plantilla, sin embargo podría ubicarse perfectamente en algunas situaciones en las que debemos presentar información de contacto relacionada con el contenido del elemento <article> o el cuerpo completo. Este elemento debería ser incluido dentro de <footer>, como en el siguiente ejemplo:
<article>
<header>
<h1>Título del mensaje </h1>
</header>
Este es el texto del mensaje
<footer>
<address>
<a href=”http://www.jdgauchat.com”>JD Gauchat</a>
</address>
</footer>
</article>
Listado 1-22. Agregando información de contacto a un <article>.
<time>
En cada <article> de nuestra última plantilla (Listado 1-18), incluimos la fecha indicando cuándo el mensaje fue publicado. Para esto usamos un simple elemento <p> dentro de la cabecera (<header>) del mensaje, pero existe un elemento en HTML5 específico para este propósito. El elemento <time> nos permite declarar un texto comprensible para humanos y navegadores que representa fecha y hora:
<article>
<header>
<h1>Título del mensaje dos</h1>
<time datetime=»2011-10-12″ pubdate>publicado 12-10-2011</time>
</header>
Este es el texto del mensaje
</article>
Listado 1-23. Fecha y hora usando el elemento <time>.
En el Listado 1-23, el elemento <p> usado en ejemplos previos fue reemplazado por el nuevo elemento <time> para mostrar la fecha en la que el mensaje fue publicado. El atributo datetime tiene el valor que representa la fecha comprensible para el navegador (timestamp). El formato de este valor deberá seguir un patrón similar al del siguiente ejemplo: 2011-10-12T12:10:45. También incluimos el atributo pubdate, el cual solo es agregado para indicar que el valor del atributo datetime representa la fecha de publicación.
Elementos Viejos de HTML
1. Elementos en Desuso o Obsoletos
Estos elementos han sido reemplazados por otros más semánticos o mejores prácticas y no se recomienda su uso en nuevas implementaciones.
<center>: Usado para centrar texto o contenido. Reemplazado por CSS (text-align: center).<font>: Utilizado para definir el tipo, tamaño, y color de la fuente. Reemplazado por CSS (font-family,font-size,color).<b>y<i>: Inicialmente usados para negrita y cursiva. Reemplazados por<strong>y<em>para una mejor semántica.<u>: Usado para subrayado. Reemplazado por CSS (text-decoration: underline).<frame>y<frameset>: Utilizados para dividir la ventana en marcos. Reemplazados por<iframe>y CSS para layouts.<marquee>: Usado para texto en movimiento. No recomendado, reemplazado por CSS y JavaScript.<big>y<small>: Utilizados para agrandar o reducir el tamaño del texto. Reemplazado por CSS (font-size).<applet>: Utilizado para incrustar applets de Java. Reemplazado por<object>o<embed>y mejores prácticas modernas.
2. Elementos de Presentación
Originalmente, HTML incluía elementos para control visual, pero hoy en día se recomienda usar CSS para la presentación:
<br>: Para saltos de línea. Aunque todavía se usa, es preferible minimizar su uso en favor de CSS.<hr>: Para líneas horizontales. Aún en uso, pero con estilo aplicado por CSS.
Nuevos Elementos en HTML5
1. Elementos Semánticos
Introducidos en HTML5, estos elementos ayudan a mejorar la estructura del contenido y la accesibilidad.
<header>: Define la cabecera de un documento o sección.<nav>: Define un bloque de enlaces de navegación.<article>: Representa un contenido independiente y autosuficiente.<section>: Agrupa contenido temáticamente relacionado.<aside>: Contenido relacionado de manera indirecta con el contenido principal, como barras laterales.<footer>: Define el pie de una sección o página.<main>: Representa el contenido principal de un documento.<figure>y<figcaption>: Para contenido ilustrativo, como imágenes o gráficos, y su respectiva leyenda.
2. Elementos Interactivos y Multimedios
HTML5 ha introducido elementos que facilitan la incorporación de contenido multimedia e interactivo sin necesidad de plugins externos.
<audio>: Para incrustar contenido de audio.<video>: Para incrustar contenido de video.<canvas>: Para gráficos dinámicos generados por JavaScript.<svg>: Para gráficos vectoriales escalables.<details>y<summary>: Para contenido colapsable o desplegable.<dialog>: Para cuadros de diálogo o modales.<progress>: Para mostrar el progreso de una tarea (como una barra de carga).<meter>: Para representar un valor medido dentro de un rango conocido (como una barra de nivel).
3. Elementos de Formulario Mejorados
HTML5 ha mejorado significativamente los formularios con nuevos tipos de entradas y atributos.
- Nuevos Tipos de Entrada:
<input type="email">,<input type="url">,<input type="tel">: Validación de formato para correos electrónicos, URLs, y números de teléfono.<input type="date">,<input type="time">,<input type="datetime-local">: Para seleccionar fechas y horas.<input type="range">: Para una barra deslizante de selección de valores.<input type="color">: Para seleccionar colores.
- Nuevos Atributos:
placeholder: Texto de sugerencia dentro del campo de entrada.required: Marca un campo como obligatorio.pattern: Define una expresión regular para validar el formato del input.autofocus: Enfoca automáticamente un campo de entrada cuando se carga la página.formnovalidate: Evita la validación de un formulario cuando se envía.
4. Elementos para Mejorar la Accesibilidad y SEO
<mark>: Para resaltar texto.<time>: Representa fechas y horas en un formato legible por máquinas y humanos.<output>: Para mostrar el resultado de un cálculo.