Índice de contenidos del artículo
Aquí podemos ver la documentación de W3C sobre la última versión publicada, actualmente la 5.2.
Hasta ahora no hemos hablado de un concepto de vital importancia que es la utilización de elementos HTML estándares.
Con las diferentes versiones de HTML, algunas etiquetas dejan de tener uso o aparecen otras nuevas.
La organización que define los estándares para la web es W3C.
Utilizar en lo posible las directivas de este comité de estándares nos traerá como ventanja que nuestras páginas en un futuro sigan viendose correctamente en las nuevas versiones de navegadores.
La versión más actual de HTML es la 5.
En algunos de los documentos hemos introducido la declaración del tipo de documento (DTD Document Type Declaration), esta sección se ubica en la primera línea del archivo HTML, es decir antes de la marca html.
En HTML5 se ha simplificado mucho, quedando de la forma:
<!DOCTYPE html>
En la página w3schools podemos ver cómo eran las versiones anteriores.
Veamos las nuevas etiquetas que nos permiten estructurar nuestro contenido en HTML5 más allá del clásico <div>:
<header>
<h1>Mi restaurante</h1>
<nav>
<ul>
<li><a href="" class="current">Inicio</a></li>
<li><a href="">clases</a></li>
<li><a href="">catering</a></li>
<li><a href="">Sobre mi</a></li>
<li><a href="">Contacto</a></li>
</ul>
</nav>
</header><footer>
© 2024 Diego C Martín
</footer><nav>
<ul>
<li><a href="" class="current">Inicio</a></li>
<li><a href="">clases</a></li>
<li><a href="">catering</a></li>
<li><a href="">Sobre mi</a></li>
<li><a href="">Contacto</a></li>
</ul>
</nav><article>
<h2>Título del artículo 1</h2>
<h3>subtítulo del artículo 1</h3>
<p>Contenido del artículo 1. Esto pueden ser muchos párrafos.</p>
</article>
<article>
<h2>Título del artículo 2</h2>
<h3>subtítulo del artículo 2</h3>
<p>Contenido del artículo 2. Esto pueden ser muchos párrafos.</p>
</article><section class="recetasjaponesas">
<h2>Recetas japonesas</h2>
<a href="">Pollo Yakitori</a>
<a href="">Pollo Tsukune</a>
<a href="">Okonomiyaki</a>
<a href="">Mizutaki</a>
</section>
<section class="contacto">
<h2>Contacto</h2>
<p>Mi restaurante<br />
21 Redchurch Street<br />
Shoreditch<br />
London E2 7DP</p>
</section>Veamos un ejemplo de estructura que podríamos crear:
También podemos usar también la etiqueta main anteriormente mencionada, debería llevar el atributo role con el valor main, nav, con navigation, etc. Ejemplo:
<div id="buscar" role="search">
...
</div>Esto es un módulo bastante novedoso de W3C llamado WAI-ARIA, así que estará sujeto a cambios y evolución.
Más info:
Usaremos la etiqueta <audio>, en la cual debemos incluir <source> para especificar la ubicación y característica de los ficheros mediante los atributos src y type.
En la etiqueta audio podemos usar atributos como autoplay, controls, loop o muted.
Estos atributos son booleanos, por tanto, no es necesario que especifiquemos valor:
<audio controls autoplay>
<source src="media/cancion.mp3" type="audio/mpeg">
</audio>Es casi igual que audio, salvo que en <video> podemos especificar los atributos width y height.
<video controls>
<source src="media/peli.mp4" type="video/mp4"> <source src="media/peli.ogv" type="video/ogv">
</video>| Nombre | Formato | Tipo MIME | IE 9+ | Chrome | Firefox 4+ | Safari 5+ | Opera 10+ |
|---|---|---|---|---|---|---|---|
| Audio mp3 | mp3 | audio/mpeg | x | x | x | ||
| Audio Ogg | ogg | audio/ogg | x | x | x | x | |
| Audio Wav | wav | audio/wav | x | x | x | ||
| Vídeo mp4 | mp4 | video/mp4 | x | x | x | ||
| Vídeo WebM | webm | video/webm | x | x | x | ||
| Vídeo Ogg | ogv | video/ogv | x | x | x |
Entra aquí para recordar todo sobre imágenes: Cómo poner una imagen en HTML
La etiqueta picture ofrece mayor control, principalmente pensado para diseño adaptable, ya que permite agregar alternativas según el tamaño del viewport mediante la etiqueta source.
<picture>
<source media="(min-width:650px)" srcset="img_rosas3.jpg">
<source media="(min-width:465px)" srcset="img_rosas2.jpg">
<img src="img_rosas.jpg" alt="Rosas" style="width:auto;">
</picture>Recursos para material multimedia
Biblioteca y alojamiento de material multimedia en archive.org.
Software libre y multiplataforma de edición de audio: Audacity.
Software libre y multiplataforma de edición de vídeo: Kdenlive.
<time>
sirve para especificar fechas. sólo aporta valor semántico, es decir, que no mostrará la fecha automáticamente, sino que debemos introducirla:
<p>La fecha de hoy es <time>15 de mayo de 2018</time></p>También podemos agregar el atributo datetime para especificar la fecha en formato ISO:
<p>La fecha de hoy es <time datetime="2018-05-15">15 de mayo de 2018</time></p>
Con el atributo pubdate podemos indicar que se trata de la fecha de publicación del <article> en el que nos encontramos.
<article>
<time datetime="2018-05-15" pubdate="pubdate"></time>
Hola,esto es un artículo...
</article><mark>Para resaltar texto.
<p>La fecha de hoy es <mark>15 de mayo de 2018</mark></p><meter>Para agregar un indicador gráfico de alguna medida. Consta de hasta 6 atributos:
<meter value="2" min="0" max="10">2 de 10</meter>
<br>
<meter value="0.4">40%</meter>
<p>Tienes un notable. 7 sobre 10: <meter value="7"
min="0" max="10" low="4" hight="7" optimum="9"></p><details>
Sirve para representar información adicional que el usuario puede mostrar u ocultar.
Podemos indicar si está abierto o cerrado con el atributo open (="open" para abierto).
También podemos incluir la etiqueta summary en su interior para indicar un resumen de la información en la parte superior:
<details>
<summary>Ver más detalles</summary>
<p>Recuerde que puede hacer una devolución durante 30 días.</p>
</details><progress>
Para incluir una barra de progreso. Se usa similar a meter, salvo que aquí disponemos de los atributos value y max.
<progress value="33" max="100"></progress>
En CSS tricks podemos ver varios ejemplos de estilado de barras de progreso. Si no has visto aún CSS, recuerda volver aquí más adelante.
<figure>
Sirve para agrupar los elementos propios de una imagen o vídeo con su título, que se puede agregar mediante <figcaption>
<figure>
<img src="img.jpg" alt=""><figcaption>Título de imagen</figcaption>
</figure>Otro elemento, que aunque no es nuevo, ha cambiado la forma de usarlo es la etiqueta i. Anteriormente usada para especificar estilos como letra cursiva en el texto.
Actualmente se emplea para agregar iconos entre el texto. Un ejemplo muy habitual es hacer uso de la librería de iconos Font Awesome. En ella encontrarás una gran cantidad de iconos, muchos de ellos gratuitos.
Para hacer uso de ellos debemos enlazar a su librería mediante la etiqueta link en la cabecera de nuestro HTML y posteriormente incluir el icono con el código que nos suministran ellos:
<head>
...
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"> ...
</head>
<body>
...
<i class="fas fa-home"></i>
...
[…] detalles en link1 y […]
muy valiosa la información, graciass por compartirla!
Les agradezco la difusión de estas novedades, claro, preciso y muy didáctico.
Me hubiera gustado que se haya insertado un pequeño ejemplo de forma que, con un copy/paste, podamos comprobar la efectividad de lo nuevo y "degustarlo" para motivar su uso.
Gracias Ilmer, ¿de qué echas en falta algún ejemplo? Precisamente este artículo está lleno de ejemplos que puedes copiar y pegar