nuevos elementos en HTML5

nuevos elementos en HTML5

a continuación se listan los nuevos elementos de HTML5 y sus descripciones.

nuevos elementos semánticos/estructurales

Los nuevos elementos de HTML5 pueden construir una estructura de documento mejor:

Etiqueta Descripción
<article> definir artículos dentro del documento.
<aside> definir contenido fuera del contenido de la página.
<bdi> definir la dirección del texto diferente al texto normal.
<details> definir detalles adicionales que el usuario puede ver u ocultar.
<dialog> definir el cuadro de diálogo o ventana.
<figcaption> definir el título del elemento <figure>.
<figure> definir contenido autocontenido, como ilustraciones, gráficos, fotografías, listas de código, etc.
<footer> definir el pie de página del documento o sección.
<header> definir la cabecera del documento o sección.
<main> definir el contenido principal del documento.
<mark> definir contenido importante o enfatizado.
<menuitem> definir comandos/menús que el usuario puede llamar desde un menú emergente.
<meter> definir mediciones escalares dentro de un rango conocido (escala).
<nav> definir vínculos de navegación dentro del documento.
<progress> definir el progreso de la tarea.
<rp> definir lo que se muestra en los navegadores que no admiten comentarios ruby.
<rt> definir la explicación/la pronunciación del carácter (para fuentes asiáticas).
<ruby> definir el comentario ruby (para fuentes asiáticas).
<section> definir la sección del documento.
<summary> definir el título visible del elemento <details>.
<time> definir fecha/hora.
<wbr> definir posibles salidas de línea (line-break).

Leer más sobre semántica HTML5del contenido.

nuevo elemento de formulario

Etiqueta Descripción
<datalist> definir opciones predefinidas para el controlador de entrada.
<keygen> definir el campo generador de claves (para formularios).
<output> definir el resultado de la calculadora.

Leer más sobre Elementos de formulario HTMLnuevos elementos antiguos y nuevos.

nuevo tipo de entrada

nuevo tipo de entrada nuevo atributo de entrada
  • color
  • fecha
  • datetime
  • datetime-local
  • correo electrónico
  • mes
  • número
  • rango
  • search
  • tel
  • tiempo
  • url
  • semana
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • altura y anchura
  • lista
  • min y max
  • múltiple
  • patrón (regexp)
  • placeholder
  • obligatorio
  • paso

Aprender Tipos de entrada de HTMLde todos los tipos nuevos y antiguos de entrada.

Aprender Atributos de entrada HTMLde todos los atributos de entrada.

HTML5 - Nueva sintaxis de atributos

HTML5 permite cuatro sintaxis de atributos diferentes.

Este ejemplo muestra diferentes sintaxis utilizadas en la etiqueta <input>.

Etiqueta Descripción
Vacío <input type="text" value="Bill Gates" deshabilitado>
Sin cita <input type="text" value=Bill>
Cita doble <input type="text" value="Bill Gates">
Cita simple <input type="text" value='Bill Gates'>

En HTML5, según la necesidad de las propiedades, se puede usar toda esta sintaxis.

Imágenes HTML5

Etiqueta Descripción
<canvas> Definir el dibujo de imágenes utilizando JavaScript.
<svg> Definir el dibujo de imágenes utilizando SVG.

Leer más sobre Canvas HTML5 del contenido.

Leer más sobre HTML5 SVG del contenido.

Nuevo elemento de medio

Etiqueta Descripción
<audio> Definir el contenido de sonido o música.
<embed> Definir el contenedor de aplicaciones externas (por ejemplo, complementos).
<source> Definir la fuente de <video> y <audio>.
<track> Definir la pista de <video> y <audio>.
<video> Definir el contenido del video o película.

Leer más sobre Video HTML5del contenido.

Leer más sobre Audio HTML5del contenido.