Logotipo horizontal de Diego C Martín colores invertidos, blanco y naranja para findo negro

Novedades y estructura de páginas web HTML5

Categorías:  Autor: Diego C Martin 
Apuntes de HTML

Novedades en HTML5

  • Incorpora nuevas etiquetas de carácter semántico y que nos ayudan a definir la estructura. Por ejemplo <footer>, para el pie de página.
  • Nuevos controles para formularios que antes sólo eran posibles con JavaScript o CSS.
  • Soporta audio y vídeo de forma nativa.
  • Ya no es necesario el uso de comillas dobles en los atributos, siendo posible algo como:
    <div id=contenedor>Esto es un div</div>.
  • No hay una sintaxis tan estricta y no es necesario cerrar las etiquetas vacías, por lo que
    por lo que <br> sería válido.
  • Etiqueta doctype simplificada.
  • Podemos dibujar con etiquetas como <canvas>.
  • Se han eliminado etiquetas y atributos no necesarios como los <frames> .
  • Ahora las etiquetas html, head y body no son obligatorias.
  • Las etiquetas de tablas thead, tbody y tfoot tampoco son obligatorias.

Aquí podemos ver la documentación de W3C sobre la última versión publicada, actualmente la 5.2.

Declaración DOCTYPE

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.

Estructura de documentos HTML5

Veamos las nuevas etiquetas que nos permiten estructurar nuestro contenido en HTML5 más allá del clásico <div>:

  • <header> No confundir con head. Pensada para albergar la información de la parte superior de la página o cabecera. Logos, títulos, descripciones, formularios de búsqueda, etc. Se puede usar tantas veces como se quiera creando de este modo secciones.
<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> Para el pie de página. Esta sección va al final y suele incluir información como los datos de contacto, ayuda, textos legales, etc. También se puede usar varias veces para crear secciones.
<footer> 
© 2024 Diego C Martín 
</footer>
  • <nav> Para incluir el menú principal de la página, que nos de acceso al resto de páginas principales de un sitio web. Se puede usar también tantas veces como se quiera, pero es mejor usarla sólo una vez por página.
<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> Para incluir información que podría tener sentido de forma independiente, como un artículo de blog o noticia. Podemos incluir dentro de ella header footer.
<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> Para crear secciones y agrupar artículos por temática por ejemplo.
<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>
  • <aside> Para contenido de carácter secundario y que visualmente suele ir ubicado en un lateral de forma que guarde relación con toda la página o bien dentro de un artículo. Ponemos enlaces relacionados, banners publicitarios, etc. Un ejemplo sería igual al anterior pero intercambiando la etiqueta section por aside.

Veamos un ejemplo de estructura que podríamos crear:

HTML5-BlockElements
Imagen obtenida de Wikimedia Commons.

Atributo Role en HTML5

También podemos usar también la etiqueta main anteriormente mencionada, debería llevar el atributo role con el valor mainnav, 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:

ARIA in HTML

Elementos multimedia HTML5

Insertar Audio en HTML

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 type.

En la etiqueta audio podemos usar atributos como autoplaycontrolsloop 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>

Agregar vídeo en HTML5

Es casi igual que audio, salvo que en <video> podemos especificar los atributos width height.

<video controls> 
<source src="media/peli.mp4" type="video/mp4"> <source src="media/peli.ogv" type="video/ogv"> 
</video>
Formatos de audio y vídeo
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

Etiqueta picture, para mayor control de las imágenes

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.

Más elementos nuevos en HTML5

<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:

  • value: para el valor que queremos representar.
  • min: para el mínimo posible dentro la escala a representar.
  • low: mínimo alcanzado.
  • max: valor máximo posible.
  • hight: máximo alcanzado.
  • optimum: valor mínimo ideal.
<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> 
...

Echa un vistazo al Curso Online de HTML5

Aquí puedes ver algunas clases del Curso de HTML5 gratis.

4 comments on “Novedades y estructura de páginas web HTML5”

  1. 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.

Responder a Sesión 5 – Conceptos básicos de HTML y CSS – Intro al desarrollo web Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Artículos de la misma categoría

crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram