Básicos de HTML5 - Nuevas etiquetas y API

4min

Como adelantamos en el artículo anterior sobre los básicos de HTML5, en este lenguaje encontraremos muchas novedades respecto a otras versiones. Principalmente, funcionalidades para cubrir las necesidades de la web actual (dispositivos móviles, elementos interactivos y multimedia o web semántica), que pasamos a repasar en este artículo.

Índice

¿Como se clasifican las nuevas etiquetas básicas de HTML5?

Las nuevas etiquetas que nos hacen la vida más fácil las podríamos clasificar en dos partes:

  • Las que nos traen soporte a nuevas funcionalidades y extienden el HTML dando soporte a elementos como el vídeo o el sonido, lienzos donde diseñar dibujos, etc.
  • Etiquetas que componen la web semántica, o lo que es lo mismo, las que sirven para constituir sitios apuntando qué son los bloques de código de una web, en lugar de cómo deben ser representados.

En cada grupo, encontramos muchas nuevas etiquetas, alguna de las cuales comentamos a continuación.

Elementos que dan soporte a nuevas funcionalidades

Multitud de novedades se encuentran dentro del HTML5 y que se han representado por etiquetas o elementos de distinta naturaleza. Algunas son nuevas, otras ya estaban y su comportamiento se han mejorado.

Hay etiquetas que van a servir para integrar contenido multimedia, algo lógico pues cada vez es más habitual en cualquier página web y más demandado por los usuarios.

  • AUDIO: Inserta sonido dentro de una página.
  • VIDEO: Para insertar clips de vídeo.
  • EMBED: Para embeber contenido externo de otro tipo, ya sean plugins, o partes de otro sitio.
  • SOURCE: Podremos determinar las fuentes cuando se introducen elementos en AUDIO y VIDEO.
  • TRACK: Permite especificar varias pistas de sonido o vídeo para los elementos AUDIO y VIDEO.

Nuevos elementos de formulario

Cabe destacar que no sólo se han añadido nuevas etiquetas en los formularios, sino que también se ha añadido soporte para las que ya estaban.

  • METER: Nos sirve para trabajar con medidas y escalas.
  • PROGRESS: Incluye barras de progreso.
  • DATALIST: Una extensión que nos permitirá crear campos con funcionalidad de autocompletar.
  • KEYGEN: Genera claves pública y privada para encriptación.
  • OUTPUT: Realizar y mostrar cálculos matemáticos.

Pero también trae novedades dentro del uso de INPUT, donde podemos especificar qué tipo de información concreta queremos introducir, muy útil en los dispositivos móviles y la forma con la que tratan dichos campos.

Dibujos completos en HTML5 con el lienzo de CANVAS

Destacamos esta nueva funcionalidad por su utilidad, ya que nos permite dibujar prácticamente cualquier cosa e incluso realizar una animación compleja.

  • CANVAS: La etiqueta con la que generaremos un lienzo en la página e implementar cualquier tipo de diseño,  soportando todo tipo de de formas, degradados, imágenes, etc. Hace unos meses publicamos algunos artículos sobre esta etiqueta, como: ¿Qué es Canvas? o la comparativa ¿Canvas o SVG?.

Elementos para la web semántica

Para la parte relacionada con la web semántica, analizamos a continuación una lista de elementos que han sido agregados al HTML para especificar qué son y no cómo se deben mostrar en la página.

Secciones dentro de una página

Algunas de las nuevas etiquetas nos sirven para decir qué secciones contiene una página.

  • ARTICLE: Especifica un artículo, suele usarse para fragmentos independientes de contenido.
  • SECTION: Se utilizan para encerrar el código correspondiente a una sección genérica dentro de un documento o aplicación.
  • HEADER: La cabecera de una página.
  • FOOTER: La información que tendrá el pie de página o de una sección.
  • ASIDE: Es una etiqueta para bloques y que muestra contenido accesorio, generalmente colocado en un panel lateral.
  • NAV: Con esta etiqueta colocaremos el navegador principal de nuestra Web.

Otros tipos de informaciones

Existen otras que nos servirán para indicar qué contenido se escribe en su interior.

  • BDI: Para definir una parte del texto que debe ser entendido aparte de la línea de contenido que se esté escribiendo.
  • MENU: La lista de opciones que forman parte de un menú.
  • COMMAND: Uno de los elementos o botones de un menú de opciones.
  • DETAILS: Detalles adicionales que podrán verse u ocultarse por el usuario.
  • SUMMARY: Encabezamiento para detalles especificados en DETAILS.
  • FIGURE: Con esta etiqueta podremos ilustrar el artículo, como fotos, diagramas, ilustraciones, etc.
  • FIGCAPTION: El pie o explicación de un FIGURE.
  • HGROUP: Un grupo de encabezamientos, útil cuando disponemos de bloques de encabezamientos del mismo nivel como H1 o H2.
  • MARK: Define un texto o información que se resalta.
  • TIME: Introduce fecha, hora o ambas.
  • WBR: Podremos definir un posible salto de línea.

Esto es sólo un avance de las nuevas etiquetas que podemos encontrar en HTML 5. En próximos artículos profundizaremos en las más interesantes y en cómo utilizarlas correctamente.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: