GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Nuevos elementos en HTML5

A continuación hay una lista de los nuevos elementos HTML5 y una descripción de su uso.

Nuevos elementos semánticos / estructurales

HTML5 ofrece nuevos elementos para una mejor estructura del documento:

Etiqueta Descripción

<article> Define un artículo en un documento.

<aside> Define un contenido aparte del contenido de la página.

<bdi> Aísla una parte del texto que debería estar formateado en una
dirección diferente a la del otro texto.

<details> Define detalles adicionales que el usuario puede escoger enseñar u

ocultar.

<dialog> Define una caja de dialogo o ventana.

<figcaption> Define títulos para un elemento <figure>.

<figure> Define contenido autónomo.

<footer> Define un píe para un documento o sección.

<header> Define un encabezado para un documento o sección.

<main> Define el contenido principal del documento.

<mark> Define texto marcado / resaltado.

<menuitem> Define un ítem de comando / menú que el usuario puede invocar

como menú emergente.

<meter> Define una escala de medida conocida con un rango conocido.

<nav> Define enlaces de navegación.

<progress> Representa el progreso de una tarea.

<rp> Define que mostrar en los navegadores que no soportan ruby.

<rt> Define una explicación / pronunciación de caracteres de Asiá del

este.

<ruby> Define notas en ruby.

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

<section> Define una sección en un documento.

<summary> Define una cabecera visible para elementos de <details>.

<time> Define fecha / hora.

<wbr> Define un posible salto de línea.

Nuevos elementos de forma

Etiqueta Descripción

<datalist> Especifica una lista de opciones pre definidas para controles de

INPUT.

<output> Define el resultado de un cálculo.

HTML5: nueva sintaxis de atributos

HTML5 permite cuatro sintaxis diferentes para los atributos.
Este ejemplo demuestra las diferentes sintaxis usadas en una etiqueta <input>:

Tipo Ejemplo

Vacio <input type="text" value="Juan" disabled>

Sin comillas <input type="text" value=Juan>

Comillas dobles <input type="text" value="Juan José">

Comillas sencillas <input type="text" value='John José'>

En HTML5, se pueden usar las cuatro sintaxis, dependiendo de lo que se necesite para el atributo.

Gráficos HTML5

Etiqueta Descripción

<canvas> Dibuja gráficos vía scripting (usualmente JavaScript)

<svg> Dibuja gráficos de vectores escalables.

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Nuevos elementos de medios

Etiqueta Descripción

<audio> Define un contenido de sonido.

<embed> Define un contenido para una aplicación externa (no HTML).

<source> Define fuentes para recursos multimedia (<video> y <audio>)

<track> Define pistas de texto para elementos multimedia (<video> y

<audio>)

<video> Define video o película.

HTML5 Semántica de Elementos

La semántica es el estudio de los significados de las palabras y frases en un idioma.
elemento semántico = elementos con un significado.

¿Cuáles son los elementos semánticos?

Un elemento semántico describe claramente su significado tanto para el navegador y el
desarrollador.
Los ejemplos de elementos no semánticos: <div> y <span> no indican nada acerca de su
contenido.
Los ejemplos de elementos semánticos : <form>, <table> y <article> definen claramente su
tipo de contenido.

Soporte de los navegadores

Los elementos semánticos HTML5 son compatibles con todos los navegadores modernos. Además,
se puede "enseñar" a los navegadores antiguos como manejar "elementos desconocidos".

Nuevos elementos semánticos en HTML5

Muchos sitios web contienen código HTML como: <div id = "nav"> <div class = "header">
<div id = "pie"> para indicar la dirección, encabezado y pie de página.
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

HTML5 ofrece nuevos elementos semánticos para diferentes partes de una página web:

 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <resume>
 <time>

Elemento <section> en HTML 5

El elemento <section> se utiliza para definir una sección en un documento. De Acuerdo Con La
Documentación HTML5 del W3C: "Una sección es una agrupación temática de contenido,
generalmente con un encabezado".
Una Página de inicio normalmente se puede dividir en secciones (Introducción, contenido y la
Información de contacto).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<section>
<h1>HTML5 secciones</h1>
<p> Una sección es una agrupación temática de contenido, generalmente con un encabezado.</p>
</section>
</body>
</html>

Código 147.html
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Elemento HTML5 <artículo>

El elemento <article> especifica el contenido independiente, autónomo. Un artículo debe tener
el sentido por sí mismo y debe ser posible leerse en forma independiente del resto del sitio web.
Ejemplos de cuando un elemento <article> puede ser utilizado:
 mensaje del foro.
 Entrada en el blog.
 Artículo de periódico.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<article>
<h1>HTML5 artículos</h1>
<p> El elemento “article” especifica el contenido independiente, autónomo. Un artículo debe tener
el sentido por sí mismo y debe ser posible leerse en forma independiente del resto del sitio
web.sección es una agrupación temática de contenido, generalmente con un encabezado.</p>
</article>
</body>
</html>

Código 148.html

Anidar <article> en <section> o viceversa?

El elemento <article> especifica el contenido independiente, autónomo. El elemento <section>
define la sección en el documento.
¿Podemos USAR Las definiciones para decidir CÓMO anidar esos Elementos?
¡No Podemos!
Por lo Tanto, en Internet, encontrará páginas HTML con elementos <section> que contienen
elementos <article> y elementos <article> que contienen elementos <section>, así como
también encontrarás páginas con elementos <section> que contienen elementos <section> y
elementos <article> que contienen elemntos <article>.

Elemento HTML 5 <header>

El elemento <header> ESPECIFICA en encabezado PARA UN documento o sección.
El elemento <header> debe usarse como un contenedor introductorio para el contenido en sí.
Puedes tener varios elementos <header> en un documento.
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<article>
<header>
<h1>Qué es un “header”?</h1>
<p>El header</p>
</header>
<p> El elemento “header” ESPECIFICA en encabezado PARA UN documento o sección.
</p>
</article>
</body>
</html>

Código 149.html

Elemento HTML 5 <footer>

El elemento <footer> ESPECIFICA un pie de página PARA UN documento o sección. Un
elemento <footer> debe contener información sobre su elemento contenedor.
Un pie de página contiene normalmente la información del autor del documento, los derechos de
autor, enlaces a términos de uso, información de contacto, etc.
Es posible que tenga varios elementos <footer> en un solo documento.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h1>Qué es un “footer”?</h1>
<p> El elemento “footer” ESPECIFICA en encabezado PARA UN documento o sección.</p>
<footer>
<p>Publicado por: Gerencia Virtual</p>
<p>Información de contacto: <a href="mailto:info@gerenciavirtual.net.ve">
info@gerenciavirtual.net.ve</a>.</p>
</footer>
</body>
</html>

Código 150.html
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Elemento HTML5 <nav>

El <nav>elemento define un conjunto de enlaces de navegación. Tenga en cuenta que no todos los
enlaces de un documento deben estar dentro de un elemento <nav>. El elemento <nav> está
destinado a los principales bloques de enlaces de navegación.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h1>El elemento “nav</h1>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
Código 151.html

Elemento HTML5 <aside>

El elemento <aside> define ALGÚN contenido aparte del contenido en el que está UBICADO
(Como una barra lateral).
El contenido <aside> debe estar relacionado con el contenido circundante.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h1>Contenido “aside”</h1>
<p> El elemento “aside” ESPECIFICA contenido aparte del contenido en el que está UBICADO.</p>
<aside>
<h4>HTML5 Novedades</h4>
<p>Novedades</p>
</aside>
</body>
</html>

Código 152.html
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Elementos HTML5 <figure> y <figcaption>

El uso de un pie de figura es una explicación visual de una imagen. En HTML5, una imagen y un
subtítulo se pueden agrupar en un elemento <figure> .

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h1>figure y figcaption</h1>
<figure>
<img src="imagenes/curso.jpg" alt="Curso" width="304" height="228">
<figcaption>Fig1. - Curso, Venezuela.</figcaption>
</figure>
</body>
</html>

Código 153.html

Elementos semánticos Por qué?

Con HTML 4, los usuarios que lo necesitan, identifican la clase de elementos de estilos: cabecera,
superior, inferior, pie de página, menú, navegación, principal, contenedor, contenido, artículo,
barra lateral, topnav, etc.
Esto hizo imposible que los motores de búsqueda identificaran correctamente el contenido de la
página web.
Con los nuevos elementos HTML5 ( <header> <footer> <nav> <section> <article> ), esto es
más fácil. Según el W3C, una Web Semántica: "Permite que los datos sean compartidos y
reutilizados en todas las aplicaciones, las empresas y las comunidades".