HTML5 Nuevos elementos
Nuevos elementos en HTML5
A continuación se muestra una lista de los nuevos elementos de HTML5 y una descripción de para qué se utilizan.
Nuevos elementos semánticos/estructurales
HTML5 introduce nuevos elementos para una mejor estructura del documento:
| Etiqueta | Descripción |
|---|---|
| <article> | Define un artículo dentro de un documento |
| <aside> | Define contenido al margen del contenido principal |
| <bdi> | Aísla una parte del texto que puede tener una dirección diferente al texto circundante |
| <details> | Define detalles adicionales que el usuario puede mostrar u ocultar |
| <dialog> | Define un cuadro de diálogo o ventana |
| <figcaption> | Define un pie o título para un elemento <figure> |
| <figure> | Define contenido independiente |
| <footer> | Define un pie de página para un documento o sección |
| <header> | Define un encabezado para un documento o sección |
| <main> | Define el contenido principal de un documento |
| <mark> | Define texto marcado o resaltado |
| <meter> | Define una medida escalar dentro de un rango conocido (un indicador) |
| <nav> | Define enlaces de navegación |
| <progress> | Representa el progreso de una tarea |
| <rp> | Define qué mostrar en navegadores que no admiten anotaciones ruby |
| <rt> | Define la explicación o pronunciación de caracteres (tipografía del Este Asiático) |
| <ruby> | Define una anotación ruby (tipografía del Este Asiático) |
| <section> | Define una sección dentro de un documento |
| <summary> | Define un encabezado visible para un elemento <details> |
| <time> | Define una fecha u hora |
| <wbr> | Define un posible salto de línea |
Aprende más sobre Semántica en HTML5.
Nuevos elementos de formulario
| Etiqueta | Descripción |
|---|---|
| <datalist> | Define una lista de opciones predefinidas para controles de entrada |
| <output> | Define el resultado de un cálculo |
Aprende más sobre los elementos de formulario antiguos y nuevos en Elementos de formulario HTML.
Nuevos tipos de entrada
| Nuevos tipos de entrada | Nuevos atributos de entrada |
|---|---|
|
|
Aprende todo sobre los tipos de entrada antiguos y nuevos en Tipos de entrada HTML.
Aprende todo sobre los atributos de entrada en Atributos de entrada HTML.
HTML5 – Sintaxis de los nuevos atributos
HTML5 permite cuatro sintaxis diferentes para los atributos.
Este ejemplo muestra las distintas sintaxis utilizadas en la etiqueta <input>:
| Tipo | Ejemplo |
|---|---|
| Vacío | <input type="text" value="John" disabled> |
| Sin comillas | <input type="text" value=John> |
| Comillas dobles | <input type="text" value="John Doe"> |
| Comillas simples | <input type="text" value='John Doe'> |
En HTML5, las cuatro sintaxis pueden utilizarse, dependiendo de lo que requiera el atributo.
Gráficos en HTML5
| Etiqueta | Descripción |
|---|---|
| <canvas> | Dibuja gráficos dinámicamente mediante scripts (normalmente JavaScript) |
| <svg> | Dibuja gráficos vectoriales escalables |
Aprende más sobre HTML5 Canvas.
Aprende más sobre HTML5 SVG.
Nuevos elementos multimedia
| Etiqueta | Descripción |
|---|---|
| <audio> | Define contenido de sonido |
| <embed> | Define un contenedor para aplicaciones externas (no HTML) |
| <source> | Define múltiples recursos multimedia para elementos (<video> y <audio>) |
| <track> | Define pistas de texto para elementos multimedia (<video> y <audio>) |
| <video> | Define un video o película |
Aprende más sobre HTML5 Video.
Aprende más sobre HTML5 Audio.
