Tabla de contenido

Elementos HTML ................................................................................................................................. 2

Lista de elementos HTML en orden alfabtico: .............................................................................. 2
Elementos HTML ordenados por funcin ....................................................................................... 7
Lista de elementos HTML ordenados en base a su funcin: ........................................................... 7
Tutorial HTML5. Introduccin ....................................................................................................... 14
HTML5 ....................................................................................................................................... 14
Ejemplo de estructura global con HTML5 ..................................................................................... 15
Estructura del cuerpo- HTML5 ...................................................................................................... 19
Estructura del cuerpo en HTML5. Etiqueta <header> ............................................................... 22
Estructura del cuerpo en HTML5. Etiqueta <nav> ........................................................................ 24
Estructura del cuerpo en HTML5. Etiqueta <section> .................................................................. 27
Estructura del cuerpo en HTML5. Etiqueta <aside>...................................................................... 30
Estructura del cuerpo en HTML5. Etiqueta <footer> .................................................................... 33
Contenido del cuerpo. Etiqueta article ......................................................................................... 36
Contenido del cuerpo. Etiqueta hgroup ........................................................................................ 41
Contenido del cuerpo. Elemento Figure ....................................................................................... 44
HTML5- Formularios. Nuevos tipos de Input; Input de tipo Email, Search, URL y Tel. ................. 47
El Elemento <input> .................................................................................................................. 48
HTML5. Formularios. Nuevos Tipos de Input. Input de tipo Number, Range y Date .................... 51
HTML5. Formularios. Nuevos Tipos Input: Tipo Week, Tipo Month, Tipo Time, Tipo Datetime,
Tipo Datetime-local y Tipo Color. .................................................................................................. 55
Nuevos Elementos en HTML5 ....................................................................................................... 61
Nuevos elementos Semnticos/Estructurales .......................................................................... 62
Nuevos elementos Form ........................................................................................................... 64
El nuevo elemento <canvas> ..................................................................................................... 65
Nuevos Elementos Media ......................................................................................................... 65
Elementos eliminados ............................................................................................................... 66
Ejemplos de mejoras e incorporaciones respecto a antiguas versiones ...................................... 66
Atributos Globales HTML5 ............................................................................................................ 69
Atributos Globales HTML5: ....................................................................................................... 69

Elementos HTML
El cdigo HTML est compuesto de caracteres englobados dentro de parntesis angulados
"< >" - que se llaman elementos.
Los elementos estn compuestos, generalmente, por una etiqueta de inicio y una de cierre.
La etiqueta de cierre tiene una barra diagonal extra; "/>" Cada elemento informa al
navegador sobre la informacin contenida dentro de esas etiquetas.



Lista de elementos HTML en orden alfabtico:
Etiqueta Descripcin
<!--...-->
Define un comentario. Cualquier informacin que se ponga dentro de las
etiquetas <!-- y --> dentro del cuerpo de la pgina, ser ignorados por el
navegador.
<!DOCTYPE> Define el tipo de documento
<a> Principalmente utilizado como hipervnculo.
<abbr> Define una abreviacin
<acronym>
Permite a los autores indicar claramente una sequencia de caracteres que
componen un acrnimo o abreviacin de una palabra. No soportado en
HTML5.
<address> Define informacin de contacto del propietario del documento
<applet>
Esta etiqueta define un applet embebido dentro del documento. No
soportado en HTML5. Declarado en desuso en HTML 4.01.
<area> Esta etiqueta define un rea dentro de un mapa de imagen
<article>*
Define una composicin independiente dentro de un documento, pgina,
aplicacin o web, que puede ser distribuida independientemente o
reutilizada.
<aside>* Define contenido secundario al contenido de la pgina.
<audio>*
Se utiliza para representar contenido de audio en los documentos. Aadido
en HTML5, puede contener diferentes fuentes de audio, representadas
utilizando el atributo "src" o el elemento <source>.
<b>
Este elemento indica que el texto englobado tiene que ser mostrado en
negrita.
<base>
Define cul es la URL absoluta para todos aquellos enlaces que sean
relativos en la pgina
<basefont>
Especifica un color, tamao y fuente por defecto, para todo el texto del
documento. No soportado en HTML5. Declarado en desuso en HTML
4.01
<bdi>*
Aisla una parte del texto que puede tener un formato diferente del texto
principal.
<bdo> Este elemento es utilizado para sobreescribir la direccin del texto.
<big> Este elemento define texto grande. No soportado en HTML5.
<blockquote>
Este elemento se utiliza para designar una cita de texto larga.
Normalmente, se puede reconocer porque est identado.
<body> Este elemento es utilizado para definir el cuerpo del documento.
<br> Define un salto de lnea.
<canvas>* Utilizada para dibujar grficos, mediante scripts. (normalmente JavaScript)
<caption> Defines el ttulo de una tabla
<center>
Este elemento hace que el texto englobado est centrado dentro de los
mrgenes. No soportado en HTML5. Declarado en desuso en HTML 4.01.
<cite> Especifica una cita o referecia a otro lugar
<code> Indica que el texto englobado es cdigo de programacin.
<col> Define una columna dentro de una tabla y se utiliza para agrupar y alinear.
<colgroup>
Especifica un grupo de una o ms columnas de una tabla para darles
formato.
<command>* Define un botn comando al que el usuario puede llamar.
<datalist>* Especifica una lista de opciones predefinidas para una caja de texto input
<dd> Define una descripcin de un item en una lista de definicin
<del> Define texto que ha sido eliminado de un documento.
<details>* Define detalles adicionales que el usuario puede ver o esconder.
<dfn> Define un trmino de una definicin.
<dialog>* Define una caja de dilogo o ventana.
<dir>
Define una lista directorio. No soportado en HTML5. Declarado en desuso
en HTML 4.01.
<div> Define una seccin en un documento.
<dl> Define una lista de definicin.
<dt> Define un trmino (un item) dentro de una lista de definicin.
<em> Define nfasis en un texto.
<embed>*
Se utiliza para declarar un contenedor para una aplicacin externa (no-
HTML)
<fieldset> Agrupa elementos relacionados en un formulario.
<figcaption>* Define un ttulo para un elemento <figure>
<figure>* Especifica contenido independiente.
<font> Define fuente, color y tamao para un texto. No soportado en HTML5.
<footer>* Define un footer para un documento o seccin.
<form> Define un formulario HTML para datos del usuario.
<frame> Define una ventana dentro de un frameset. No soportado en HTML5.
<frameset> Define un conjunto de "frames". No soportado en HTML5.
<h1> -<h6> Define encabezados en HTML
<head> Define informacin sobre el documento
<header>* Define un encabezado para un documento o seccin
<hgroup> Agrupa elementos del encabezado (<h1> -<h6>)
<hr> Define un cambio temtico en el contenido
<html> Define la raiz de un documento HTML
<i>
Este elemento se usa para representar un texto con un estilo de fuente en
itlica
<iframe> Define un documento HTML dentro de otro documento HTML
<img> Define una imagen
<input> Este elemento se utiliza para ingresar datos por parte del usuario
<ins> Define el texto que ha sido insertado dentro del documento
<kbd>
Este elemento se utiliza para avisar al usuario que tiene que introducir
datos por teclado
<keygen>* Define un campo generador de claves en formularios
<label> Define una etiqueta para un elemento <input>
<legend>
Este elemento define un ttulo para un elemento <fieldset>, <figure> o
<details>
<li> Define un item de una lista
<link>
Este elemento define la relacin entre el documento y un recurso externo
(normalmente utilizado con hojas de estilo)
<main>* Especifica el contenido principal del documento
<map> Define un mapa de imagen en el lado del cliente
<mark>* Define un texto resaltado en el documento
<menu> Define un menu
<meta> Define metadata de un documento HTML
<meter>* Define una medida escalar dentro de un rango determinado
<nav>* Define links de navegacin
<noframes>
Especifica el contenido alternativo para los navegadores que no soportan
frames. No soportado por HTML5.
<noscript>
Especifica un contenido alternativo para navegadores que no soportan
scripts.
<object> Define un objeto embebido
<ol> Este elemento especifica una lista ordenada
<optgroup> Especifica un grupo de opciones en una lista desplegable.
<option> Este elemento define una opcin en una lista desplegable.
<output>* Especifica el resultado de un clculo
<p> Especifica un prrafo
<param> Este elemento especifica un parmetro para un objeto
<pre> Define un texto con formato previo
<progress>* Representa el progreso de una tarea
<q> Define una cita de texto corta(en una lnea)
<rp>* Define que mostrar en los navegadores que no soportan anotaciones ruby
<rt>*
Este elemento define la pronunciacin de caracteres (para tipografa del
este asitico)
<ruby>* Define una anotacin ruby (para tipografa del este asitico)
<s> Esta etiqueta define texto con un estilo de fuente tachado
<samp> Muestra un mensaje de un programa o script
<script> Define un script dentro del documento
<section>* Define una seccin en un documento
<select>
Muestra varias opciones al usuario y permite que elija entre ellas una o
ms en una lista desplegable
<small> Se utiliza para presentar un texto con un estilo de fuente pequea
<source>* Define las fuentes para los elementos multimedia como video y audio.
<span>
Agrupa varios elementos en lnea seguidos dentro de un mismo bloque,
para despus darles formato con la hoja de estilo.
<strike>
Este elemento se utiliza para representar un texto con un estilo de fuente
tachado. No soportado en HTML5. Declarado en desuso en HTML 4.01.
<strong> Se utiliza para representar texto importante
<style> Este elemento define el estilo del documento
<sub> Representa un subndice
<summary>* Define un encabezado para el elemento <details>
<sup> Representa un superndice
<table> Define una tabla
<tbody> Agrupa el contenido del body de una tabla
<td> Define una clda de una tabla
<textarea> Este elemento especifica una rea para escribir texto
<tfoot> Agrupa el contenido del footer de una tabla
<th> Representa la celda del encabezado de una tabla
<thead> Agrupa el contenido del encabezado de una tabla
<time>* Define la fecha y hora
<title> Define el ttulo de un documento
<tr> Define una fila dentro de una tabla
<track>*
Define determinadas caractersticas para las pistas de texto de elementos
multimedia como; vdeos o audios.
<tt> Define texto con un estilo de fuente en teletipo. No soportado en HTML5.
<u> Define texto con un estilo de fuente subrayado.
<ul> Define una lista no ordenada
<var> Define una variable
<video>* Define un video o pelcula
<wbr>* Define donde un texto se puede romper para cambios de lnea

* Etiqueta aadida en HTML5.

Elementos HTML ordenados por funcin
A continuacin tenemos una lista de los elementos HTML ordenados en base a su
funcin. Esto nos ayudar a saber que elemento utilizar en cada caso para poder facilitar
el desarrollo de pginas web compatibles con distintos navegadores y plataformas.



Lista de elementos HTML ordenados en base a su funcin:
Bsico:
Etiqueta Descripcin
<!--...-->
Define un comentario. Cualquier informacin que se ponga dentro de las etiquetas
<!-- y --> dentro del cuerpo de la pgina, ser ignorados por el navegador.
<!DOCTYPE> Define el tipo de documento
<html> Define la raiz de un documento HTML
<title> Define el ttulo de un documento
<body> Este elemento es utilizado para definir el cuerpo del documento.
<h1> -<h6> Define encabezados en HTML
<p> Especifica un prrafo
<br> Define un salto de lnea.
<hr> Define un cambio temtico en el contenido

Secciones/Estilo
Etiqueta Descripcin
<style> Este elemento define el estilo del documento
<div> Define una seccin en un documento.
<span>
Agrupa varios elementos en lnea seguidos dentro de un mismo bloque, para
despus darles formato con la hoja de estilo.
<header>* Define un encabezado para un documento o seccin
<footer>* Define un footer para un documento o seccin.
<section>* Define una seccin en un documento
<article>*
Define una composicin independiente dentro de un documento, pgina,
aplicacin o web, que puede ser distribuida independientemente o reutilizada.
<aside>* Define contenido secundario al contenido de la pgina.
<details>* Define detalles adicionales que el usuario puede ver o esconder.
<dialog>* Define una caja de dilogo o ventana.
<summary>* Define un encabezado para el elemento <details>

InformacinMeta
Etiqueta Descripcin
<head> Define informacin sobre el documento
<meta> Define metadata de un documento HTML
<base>
Define cul es la URL absoluta para todos aquellos enlaces que sean relativos en la
pgina
<basefont>
Especifica un color, tamao y fuente por defecto, para todo el texto del
documento. No soportado en HTML5. Declarado en desuso en HTML 4.01

Formato
Etiqueta Descripcin
<acronym>
Permite a los autores indicar claramente una sequencia de caracteres que
componen un acrnimo o abreviacin de una palabra. No soportado en HTML5.
<abbr> Define una abreviacin
<address> Define informacin de contacto del propietario del documento
<b> Este elemento indica que el texto englobado tiene que ser mostrado en negrita.
<bdi>* Aisla una parte del texto que puede tener un formato diferente del texto principal.
<bdo> Este elemento es utilizado para sobreescribir la direccin del texto.
<big> Este elemento define texto grande. No soportado en HTML5.
<blockquote>
Este elemento se utiliza para designar una cita de texto larga. Normalmente, se
puede reconocer porque est identado.
<center>
Este elemento hace que el texto englobado est centrado dentro de los mrgenes.
No soportado en HTML5. Declarado en desuso en HTML 4.01.
<cite> Especifica una cita o referecia a otro lugar
<code> Indica que el texto englobado es cdigo de programacin.
<del> Define texto que ha sido eliminado de un documento.
<dfn> Define un trmino de una definicin.
<em> Define nfasis en un texto.
<font> Define fuente, color y tamao para un texto. No soportado en HTML5.
<i> Este elemento se usa para representar un texto con un estilo de fuente en itlica
<ins> Define el texto que ha sido insertado dentro del documento
<kbd>
Este elemento se utiliza para avisar al usuario que tiene que introducir datos por
teclado
<mark>* Define un texto resaltado en el documento
<meter>* Define una medida escalar dentro de un rango determinado
<pre> Define un texto con formato previo
<progress>* Representa el progreso de una tarea
<q> Define una cita de texto corta(en una lnea)
<rp>* Define que mostrar en los navegadores que no soportan anotaciones ruby
<rt>*
Este elemento define la pronunciacin de caracteres (para tipografa del este
asitico)
<ruby>* Define una anotacin ruby (para tipografa del este asitico)
<s> Esta etiqueta define texto con un estilo de fuente tachado
<samp> Muestra un mensaje de un programa o script
<small> Se utiliza para presentar un texto con un estilo de fuente pequea
<strike>
Este elemento se utiliza para representar un texto con un estilo de fuente
tachado. No soportado en HTML5. Declarado en desuso en HTML 4.01.
<strong> Se utiliza para representar texto importante
<sub> Representa un subndice
<time>* Define la fecha y hora
<tt> Define texto con un estilo de fuente en teletipo. No soportado en HTML5.
<u> Define texto con un estilo de fuente subrayado.
<ul> Define una lista no ordenada
<var> Define una variable
<wbr>* Define donde un texto se puede romper para cambios de lnea

Formularios
Etiqueta Descripcin
<form> Define un formulario HTML para datos del usuario.
<input> Este elemento se utiliza para ingresar datos por parte del usuario
<textarea> Este elemento especifica una rea para escribir texto
<button> Se utiliza para crear botones de un formulario
<select>
Muestra varias opciones al usuario y permite que elija entre ellas una o ms en
una lista desplegable
<optgroup> Especifica un grupo de opciones en una lista desplegable.
<option> Este elemento define una opcin en una lista desplegable.
<label> Define una etiqueta para un elemento <input>
<fieldset> Agrupa elementos relacionados en un formulario.
<legend> Este elemento define un ttulo para un elemento <fieldset>, <figure> o <details>
<datalist>* Especifica una lista de opciones predefinidas para una caja de texto input
<keygen>* Define un campo generador de claves en formularios
<output>* Especifica el resultado de un clculo

Tablas
Etiqueta Descripcin
<table> Define una tabla
<caption> Defines el ttulo de una tabla
<th> Representa la celda del encabezado de una tabla
<tr> Define una fila dentro de una tabla
<td> Define una celda de una tabla
<thead> Agrupa el contenido del encabezado de una tabla
<tbody> Agrupa el contenido del body de una tabla
<tfoot> Agrupa el contenido del footer de una tabla
<col> Define una columna dentro de una tabla y se utiliza para agrupar y alinear.
<colgroup> Especifica un grupo de una o ms columnas de una tabla para darles formato.

Listas
Etiqueta Descripcin
<u> Define texto con un estilo de fuente subrayado.
<ol> Este elemento especifica una lista ordenada
<li> Define un item de una lista
<dir>
Define una lista directorio. No soportado en HTML5. Declarado en desuso en
HTML 4.01.
<dl> Define una lista de definicin.
<dt> Define un trmino (un item) dentro de una lista de definicin.
<dd> Define una descripcin de un trmino en una lista descriptiva
<menu> Define un menu
<command>* Define un botn comando al que el usuario puede llamar.

Links
Etiqueta Descripcin
<a> Principalmente utilizado como hipervnculo.
<link>
Este elemento define la relacin entre el documento y un recurso externo
(normalmente utilizado con hojas de estilo)
<nav>* Define links de navegacin

Images
Etiqueta Descripcin
<img> Define una imagen
<map> Define un mapa de imagen en el lado del cliente
<area> Esta etiqueta define un rea dentro de un mapa de imagen
<canvas>* Utilizada para dibujar grficos, mediante scripts. (normalmente JavaScript)
<figcaption>* Define un ttulo para un elemento <figure>
<figure>* Especifica contenido independiente.

Audio/Video
Etiqueta Descripcin
<audio>*
Se utiliza para representar contenido de audio en los documentos. Aadido en
HTML5, puede contener diferentes fuentes de audio, representadas utilizando el
atributo "src" o el elemento <source>.
<source>* Define las fuentes para los elementos multimedia como video y audio.
<track>*
Define determinadas caractersticas para las pistas de texto de elementos
multimedia como; vdeos o audios.
<video>* Define un video o pelcula

Frames
Etiqueta Descripcin
<frame> Define una ventana dentro de un frameset. No soportado en HTML5.
<frameset> Define un conjunto de "frames". No soportado en HTML5.
<noframes>
Especifica el contenido alternativo para los navegadores que no soportan frames.
No soportado por HTML5.
<iframe> Define un documento HTML dentro de otro documento HTML

Programacin
Etiqueta Descripcin
<script> Define un script dentro del documento
<noscript> Especifica un contenido alternativo para navegadores que no soportan scripts.
<applet>
Esta etiqueta define un applet embebido dentro del documento. No soportado en
HTML5. Declarado en desuso en HTML 4.01.
<embed>* Se utiliza para declarar un contenedor para una aplicacin externa (no- HTML)
<object> Define un objeto embebido
<param> Este elemento especifica un parmetro para un objeto

* Etiqueta aadida en HTML5.
Tutorial HTML5. Introduccin
HTML5
Es la quinta revisin importante del lenguaje HTML. Su principal objetivo es mejorar el
lenguaje aadiendo soporte para las ultimas tecnologas multimedia, as como
manteneniendo el cdigo leble al humano y entendible para la mquina y dispositivos
(navegadores, etc.).


HTML5 ofrece nuevas caractersticas (elementos, atributos, manejadores de eventos, y
APIs) para desarrollos de pginas web ms simples y para formas ms complejas de
manejo. La especificacin HTML5 se basa en HTML 4.01 Strict, pero a diferencia de
especificaciones anteriores, HTML5 no utiliza una Definicin de Tipo de Documento
(DTD).
En su lugar, utiliza como base, el Modelo de Objetos del Documento (DOM, el "rbol"
creado por la estructura del documento), en vez de un conjunto determinado de reglas
sintcticas.
Se diferencia tambin de las especificaciones anteriores en que se incluyen instrucciones
detalladas de como los navegadores deben utilizar el HTML mal especificado.
EscribirHTML5
Se puede escribir pginas en HTML5 utilizando el mismo software que se utiliza para
escribir pginas HTML.
Podemos utilizar un editor de texto sencillo como el Notepad (en Windows) o como el
TextEdit (en Mac). Varias herramientas actuales de diseo (como el Adobe Dreamweaver y
el Microsoft Expression Web) tienen plantillas que te permiten crear rapidamente nuevos
documentos HTML5.
En realidad, la estructura bsica de una pgina HTML5 es tan sencilla que se puede utilizar
cualquier editor web, para crearla, incluso si el editor web no est diseado para HTML5.
CompatibilidadHTML5
Cuales son los navegadores que soportan HTML5? HTML5 es una coleccin de
estandares independientes.
Algunos ya son compatibles; y otros no lo sern hasta dentro de algunos aos (o quiz
nunca lo sean).
El resto est en tierras intermedias, lo que significa que HTML5 funciona en algunas
versiones de algunos navegadores.
A continuacin tenermos algunos de los navegadores que soportan una gran parte de
HTML sin necesitar muchos rodeos:

Internet Explorer 9 y versiones superiores
Firefox 3.5 y versiones superiores
Google Chrome 8 y versiones superiores
Safari 4 y versiones superiores
Opera 10.5 y versiones superiores

La compatibilidad aumenta con las versiones superiores. Firefox 5, por ejemplo, soporta
mejor HTML que Firefox 3.5.
Ejemplo de estructura global con HTML5
Los documentos HTML siguen una estricta organizacin.
Cada parte del documento est diferenciada, declarada y englobada con etiquetas
especficas. En este tutorial vamos a ver como construir la estructura global de un
documento HTML con los nuevos elementos incorporados en HTML5.


Doctype
En primer lugar, tenemos que indicar el tipo de documento que estamos creando. En
HTML5 esto es muy sencillo:
<!DOCTYPE html>
Esta lnea deber ser la primera lnea del documento, sin espacios ni lneas previas. Esto es
una manera de activar el modo estndar y forzar a los navegadores a interpretar el HTML5
siempre que sea posible, o a ignorarlo cuando no lo sea.
<html>
Despus de declarar el tipo de documento, se construye la estructura del rbol con HTML.
El elemento raiz del rbol es el elemento <html>. Este elemento engloba todo el cdigo
HTML.

<!DOCTYPE html>
<html lang="es">
</html>

El atributo lang en la etiqueta de inicio <html> es el nico atributo que debemos especificar
en HTML5. Este atributo define el lenguaje del contenido del documento que estamos
creando- en este caso, es para espaol.
HTML5 es muy flexible con respecto a la estructura y los elementos utilizados en su
desarrollo. El elemento <html> puede ser incluido sin atributos o no ser incluido.
Sin embargo, por compatiblidad y otras razones, se recomienda seguir unas reglas bsicas.
En este tutorial vamos a aprender como construir un documento HTML siguiendo un
manual de buenas prcticas.
<head>

Sigamos con la construccin de nuestra plantilla. El cdigo HTML incluido en las etiquetas
<html> tiene que estar dividido en dos secciones principales. Como ya ocurra en versiones
anteriores de HTML, la primera seccin es el "head" y la segunda el "body". El siguiente
paso, por tanto, es crear dos secciones en el cdigo, utilizando esos dos elementos; <head>
y <body>.
El elemento <head> va en primer lugar, y como el resto de los elementos estructurales,
tiene un tag de apertura y otro de cierre.

<!DOCTYPE html>
<html lang="es">
<head>
</head>
</html>
El "tag" no ha cambiado con respecto a otras versiones y su funcin es la misma. Dentro de
los "tags" <head>, definiremos el ttulo de nuestra pgina, declararemos la codificacin de
caracteres, incluiremos cualquier informacin general que queramos sobre el documento, e
incorporaremos archivos externos con los estilos, scripts o incluso imgenes necesarias para
mostrar la pgina.
A excepcin del ttulo y algunos iconos, el resto de la informacin incluida en el
documento dentro de las etiquetas <head> no ser visible.
<body>
La siguiente seccin que forma parte de la organizacin principal del documento HTML es
el "body". Este "cuerpo" es la parte visible del documento y viene especificado con la
etiqueta <body>.
Esta etiqueta no ha cambiado con respecto a las versiones anteriores de HTML:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>


<meta>

A continuacin vamos a desarrollar la cabecera del documento. Existen algunas
modificaciones e innovaciones dentro de esta seccin, y una de ellas es la etiqueta que
define la codificacin de los caracteres del documento. Es la etiqueta meta y especifica
como se debe presentar el texto dentro de la pantalla.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

La modificacin para este elemento de HTML5, es como en muchos casos, una
simplificacin. La etiqueta meta nueva para la codificacin de caracteres es ms corta y
ms simple. Igualmente, se puede cambiar utf-8 por la codificacin que se prefiera, y se
pueden aadir otras etiquetas meta como "description" o "keywords", tal y como se ve en el
ejemplo que tenemos a continuacin:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Esto es un ejemplo de HTML5">
<meta name="keywords" content="HTML5">
</head>
<body>
</body>
</html>

Nota: Como vemos, la etiqueta <meta> especifica el tipo y el atributo content declara su
valor, pero ninguno de estos valores sern mostrados en la pantalla.
En HTML5, no es necesario poner una barra de cierre, pero se recomienda por razones de
compatibilidad.

<title>

La etiqueta <title>, como siempre, especifica el ttulo del documento, y no hay nada nuevo
en HTML5.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Esto es un ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Ttulo del documento</title>
</head>
<body>
</body>
</html>

Nota: Normalmente, este texto es mostrado por los navegadores en la parte superior de la
ventana.

<link>

Otro elemento importante que se incluye dentro de la cabecera es <link>. Este elemento se
utiliza para incorporar estilos, scripts, imgenes o iconos de archivos externos. Uno de los
usos ms comunes de <link>, es el de insertar un archivo CSS externo:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Esto es un ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Ttulo del documento</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
</body>
</html>
En HTML5, ya no hay que especificar el tipo de hoja de estilo que estamos insertando, por
lo que el atributo type ha sido eliminado.
Solamente necesitamos dos atributos para incluir nuestro archivo de estilos: rel y href. El
atributo rel se refiere a la relacin entre el documento y el archivo que estamos incluyendo.
En este caso tiene el valor= "stylesheet", lo que le indica al navegador que el archivo
edu4javastyles.css es un archivo CSS con estilos necesarios para mostrar la pgina.

Nota: Una hoja de estilos es un conjunto de reglas de formato que nos va a ayudar a
cambiar la presentacin de nuestro documento- por ejemplo, el tamao o el color del texto.
Sin estas reglas, el texto y otros elemento se mostrarn en la pantalla utilizando los estilos
estndares suministrados por los navegadores (tamao y colores por defecto).
Nuestro cdigo se vera as;


Estructura del cuerpo- HTML5
La estructura del cuerpo (el cdigo entre los tags <body>) generar la parte visible de
nuestro documento. Ser el cdigo que genere nuestra pgina web.
HTML ofrece diferentes formas para construir y organizar la informacin en el cuerpo del
documento.



Uno de los primeros elementos que ofrece HTML para este propsito es <table>. Las
tablas, aunque no fueran ideadas para eso, permiten organizar data, texto, imgenes dentro
de filas y columnas.
Con el tiempo y gradualmente, otros elementos han reemplazado la funcin de las tablas,
aportando diferentes maneras de hacer lo mismo con menos cdigo y de una manera ms
rpida, facilitando la creacin, portabilidad y mantenimiento.
El elemento <div> empez a extenderse y a dominar el campo. Sin embargo, el elemento
<div>, como el <table>, no suministran mucha informacin sobre las partes del cuerpo que
estn representando. Cualquier cosa puede ir dentro de las etiquetas de apertura y cierre
<div>, desde imgenes, menus, textos, links, scripts, formularios, etc.
Para los usuarios, saber que hay dentro de las etiquetas no es importante, pero para los
navegadores es crucial saberlo para hacer la correcta interpretacin de los documentos.
Teniendo esto en cuenta, HTML5 ha incorporado nuevos elementos que ayudan a
identificar cada parte del documento y a organizar el cuerpo.
Como utilizar estos nuevos elementos, es cosa nuestra, pero las palabras clave
seleccionadas para cada uno, nos ayudar a saber cul es su funcin.
Normalmente una pgina web o aplicacin web est dividida en diferentes reas visuales
para poder mejorar la experiencia del usuario y su interactividad. Las palabras clave que
representan cada elemento nuevo de HTML5, estn relacionadas a estas reas visuales.
Organizacin
Cada diseador crea sus propios diseos, pero en general podremos identificar dentro de
cada pgina web las siguientes secciones:

Arriba del todo, tenemos la Cabecera, que es el lugar donde solemos tener el logo, nombre,
y pequeas descripciones de nuestra pgina web.
Debajo de la cabecera, podemos ver la Barra de Navegacin, en la que casi cualquier
desarrollador ofrece un menu o lista de links para poder navegar por el sitio web.
Los usuarios son llevados desde esta barra a diferentes pginas o documento, normalmente
en el mismo sitio web.
El contenido ms importante de la pgina se localiza normalmente en el medio de la
distribucin. Esta seccin muestra la informacin importante y links. Casi siempre est
dividida en varias filas y columnas.
La seccin de Informacin Principal, podra tener por ejemplo, una lista de artculos,
descripciones de productos, entradas de blog y cualquier otra informacin importante.
La Barra Lateral podra tener por ejemplo, una lista de links apuntando a cada uno de
estos items.
Abajo del todo, tenemos una barra llamada Barra Institucional. Se llama as porque es el
rea de la pgina donde tenemos informacin general del sitio web, el autor or la compaa,
adems de links con referencia a trminos y condiciones, mapas e informacin adicional
que el desarrollador cree importante compartir.
La barra institucional es el complemento a la Cabecera, y es considerada como una parte
esencial de la estructura de la pgina.
Estructura del cuerpo en HTML5. Etiqueta <header>
HTML5 tiene una estructura y un diseo bsicos y aporta nuevos elementos para
diferenciarlos y declararlos.
Con ello podemos informar al navegador, la funcin de cada seccin.
A continuacin tenemos una representacin visual de la organizacin de las secciones
utilizando las etiquetas HTML5. En este tutorial vamos a aprender sobre la primera de estas
etiquetas, <header>;




<header>
Uno de los nuevos elementos incorporados en HTML5 es el <header>. No debe ser
confundido con la etiqueta <head>, que hemos utilizado anteriormente en el tutorial
Ejemplo de estructura global con HTML5, para definir el ttulo de nuestra pgina.
De la misma manera que la etiqueta <head>, la etiqueta <header> aporta informacin
introductoria (como ttulos, subttulos, losgos....), pero en otro mbito.
Mientras que la etiqueta <head> tiene la funcin de suministrar informacin sobre todo el
documento, la etiqueta <header> aporta informacin del cuerpo del documento o de alguna
seccin dentro del cuerpo.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>edu4java Home</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
<header>
<h1>edu4java</h1>
</header>
</body>
</html>

En el cdigo, vemos que definimos el ttulo de la pgina web, utilizando la etiqueta
<header>. Recuerde que este ttulo no es el mismo que el ttulo general del documento
definido previamente en el <head>.
La insercin del elemento <header> representa el principio del cuerpo y de la parte visible
del documento.
A partir de ahora vamos a poder ver los resultados de nuestro cdigo en la ventana de
nuestro navegador:


Nota: El elemento <h1> es un elemento de HTML utilizado para definir un ttular. El
nmero indica la importancia del titular y su contenido. El elemento <h1> es el de mayor
importancia y <h6> es el de menor, por lo que el <h1> ser utilizado para mostrar el ttulo
principal y el resto para ttulos secundarios.
Estructura del cuerpo en HTML5. Etiqueta <nav>
HTML5 tiene una estructura y un diseo bsicos y aporta nuevos elementos para
diferenciarlos y declararlos.
Con ello podemos informar al navegador, la funcin de cada seccin.
A continuacin tenemos una representacin visual de la organizacin de las secciones
utilizando las etiquetas HTML5. En este tutorial vamos a aprender sobre la primera de estas
etiquetas, <nav>;



<nav>

La siguiente seccin que vamos a explicar es la Barra de Navegacin. Esta barra es
generada en HTML5 con la etiqueta <nav>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>edu4java Home</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
<header>
<h1>edu4java</h1>
</header>
<nav>
<ul>
<li>Tutoriales Web-Html</li>
<li>Tutoriales Juegos Android</li>
<li>Tutoriales Java para principiantes</li>
<li>Tutoriales Sql</li>
<li>Contacto</li>
</ul>
</nav>
</body>
</html>

Como vemos en el cdigo anterior, el elemento <nav> se encuentra dentro de las etiquetas
<body>, pero despus de las etiquetas de cierre de header (</header), no entre las etiquetas
<header>. Esto es porque el <nav> no forma parte del header, si no que es una nueva
seccin.
HTML5 es muy verstil y nos suministra los parmetros y elementos bsicos con los que
podemos trabajar. Como utilizar esos elementos para crear nuestra estructura y el orden que
escojamos es una decisin nuestra.
Un ejemplo de esta versatilidad es la etiqueta <nav>, que podemos insertar o bien dentro
del elemento <header> o bien dentro de cualquier otra seccin del cuerpo. Igualmente, hay
que tener en cuenta, que estas etiquetas nuevas se han creado para proveer a los
navegadores de ms informacin y as ayudar a cualquier programa nuevo o dispositivo del
mercado a identificar las partes ms relevantes del documento.
Para mantener nuestro cdigo portable y legible, recomendamos seguir los estndares y
mantenerlo lo ms ordenado posible. El elemento <nav> est hecho para incluir ayudas a la
navegacin como el menu principal o los bloques principales de navegacin y se debera
utilizar para este propsito.
Nota: En este ejemplo, vamos a hacer una lista con las opciones de menu de nuestra pgina
web. Entre las etiquetas <nav>, existen dos elementos que se utilizan para crear una lista.
Utilizamos el elemento <ul> para definir la lista. Dentro de estas etiquetas <ul> vemos
varias etiquetas <li> con diferente texto, que representan las opciones de menu.
Estas etiquetas <li>, se utilizan para definir cada item de la lista.
Este es el resultado de nuestro cdigo;

Estructura del cuerpo en HTML5. Etiqueta <section>
HTML5 tiene una estructura y un diseo bsicos y aporta nuevos elementos para
diferenciarlos y declararlos.
Con ello podemos informar al navegador, la funcin de cada seccin.
A continuacin tenemos una representacin visual de la organizacin de las secciones
utilizando las etiquetas HTML5.
En este tutorial vamos a aprender sobre la etiqueta <section>;



<section>

Siguiendo nuestro diseo estandar tenemos la Barra de Contenido Principal que contiene
la informacin ms relevante del documento que puede disponerse, por ejemplo, en varios
bloques o columnas.
Dado que el propsito de estas columnas o bloques es ms general, el elemento HTML5
que lo especifica se llama simplemente <section>.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>edu4java Home</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
<header>
<h1>edu4java</h1>
</header>
<nav>
<ul>
<li>Tutoriales Web-Html</li>
<li>Tutoriales Juegos Android</li>
<li>Tutoriales Java para principiantes</li>
<li>Tutoriales Sql</li>
<li>Contacto</li>
</ul>
</nav>
<section>
TUTORIALES JAVA, HTML, JUEGOS ANDROID, SQL...
</section>
</body>
</html>

Igual que la Barra de Navegacin, la Barra de Contenido Principal es una seccin separada
del resto. Por lo tanto esta seccin se localiza debajo de la etiqueta de cierre </nav>.

IMPORTANTE: Las etiquetas que representan cada seccin del documento aparecen
listadas dentro del cdigo, una encima de la otra, pero en las pginas web algunas de estas
secciones aparecern una al lado de la otra. (Por ejemplo las columnas de Contenido
Principal y la Barra Lateral).
En HTML5, la presentacin en pantalla se delega a CSS. El diseo se llevar a cabo
asignando un estilo CSS a cada elemento.
Este es el resultado hasta ahora;

Estructura del cuerpo en HTML5. Etiqueta <aside>
HTML5 tiene una estructura y un diseo bsicos y aporta nuevos elementos para
diferenciarlos y declararlos.
Con ello podemos informar al navegador, la funcin de cada seccin.
A continuacin tenemos una representacin visual de la organizacin de las secciones
utilizando las etiquetas HTML5.
En este tutorial vamos a aprender sobre la etiqueta <aside>;



<aside>

En una distribucin estndar de una pgina web, la barra lateral est situada al lado de la
barra de contenido principal.
Es una columna o seccin que normalmente contiene datos relacionados al contenido
principal pero con una relevancia o importancia menor.
En el diseo estndar de un blog, la barra lateral contiene una lista de links. La informacin
dentro de esta barra est relacionada con el contenido principal de la pgina pero no es
relevante por si sola.
Siguiendo con el ejemplo del blog, podemos decir que las entradas del blog son
importantes, pero los links y resmenes de esas entradas son slo una ayuda navegacional y
no en lo que el lector o usuario est ms interesado.
En HTML5, podemos diferenciar este tipo de informacin secundaria con el elemento
<aside>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>edu4java Home</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
<header>
<h1>edu4java</h1>
</header>
<nav>
<ul>
<li>Tutoriales Web-Html</li>
<li>Tutoriales Juegos Android</li>
<li>Tutoriales Java para principiantes</li>
<li>Tutoriales Sql</li>
<li>Contacto</li>
</ul>
</nav>
<section>
TUTORIALES JAVA, HTML, JUEGOS ANDROID, SQL...
</section>
<aside >
English Version
</aside>
</body>
</html>

El elemento <aside> puede estar localizado en cualquier parte del diseo; la etiqueta no
define la posicin, como vemos en el ejemplo. El elemento <aside> slo describe la
informacin que engloba, no un lugar en la estructura y se puede utilizar siempre que el
contenido no quiera ser considerado como el contenido principal del documento.
Podemos utilizar el elemento <aside>, por ejemplo, dentro de un elemento <section>, o
incluso dentro de una seccin con informacin relevante- en un cita dentro de un texto.
Hay que recordar que en HTML5, la presentacin en pantalla de estos elementos ha sido
delegado a CSS. El diseo se consigue asignando estilos CSS a cada elemento.
Este ese el resultado de nuestro cdigo sin CSS:

Estructura del cuerpo en HTML5. Etiqueta <footer>
HTML5 tiene una estructura y un diseo bsicos y aporta nuevos elementos para
diferenciarlos y declararlos.
Con ello podemos informar al navegador, la funcin de cada seccin.
A continuacin tenemos una representacin visual de la organizacin de las secciones
utilizando las etiquetas HTML5. En este tutorial vamos a aprender sobre la etiqueta
<footer>;



<footer>

Para dar por concluido nuestra plantilla o estructura bsica de nuestro documento HTML5,
slo necesitamos un elemento ms. Ya tenemos el header del cuerpo, secciones con
ayudas navegacionales, el contenido principal y la barra lateral con informacin
adicional.
Lo nico que necesitamos para cerrar el diseo es darle una terminacin al cuerpo del
documento. HTML5 tiene un elemento especfico para este fin llamado <footer>:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>edu4java Home</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
<header>
<h1>edu4java</h1>
</header>
<nav>
<ul>
<li>Tutoriales Web-Html</li>
<li>Tutoriales Juegos Android</li>
<li>Tutoriales Java para principiantes</li>
<li>Tutoriales Sql</li>
<li>Contacto</li>
</ul>
</nav>
<section>
TUTORIALES JAVA, HTML, JUEGOS ANDROID, SQL...
</section>
<aside >
English Version
</aside>
<footer>
Copyright &copy; 2012-2013
</footer>
</body>
</html>
En el diseo estndar de una pgina web (ver Estructura del cuerpo- HTML5), la seccin
llamada Barra Institucional ser definida con etiquetas <footer>. Se llama as porque la
barra representa el fin (o pie) de nuestro documento y esta parte de la pgina web es
utilizada normalmente para compartir informacin general sobre el autor o la compaa que
ha creado el proyecto; como copyright, trminos y condiciones, etc.
Normalmente, el elemento <footer> representa el fin del cuerpo de nuestro documento y
tiene el propsito antes descrito. Sin embargo, la etiqueta <footer> puede ser usada varias
veces dentro del cuerpo para representar el fin de las diferentes secciones. (La etiqueta
<header> tambin puede ser utilizada varias veces dentro del cuerpo).
Este es el resultado de nuestro cdigo sin CSS:

Contenido del cuerpo. Etiqueta article
El cuerpo de nuestro documento ya est completo. La estructura bsica de la pgina web
est terminada y ahora tenemos que trabajar en el contenido. Los elementos HTML5 que
hemos visto en los tutoriales anteriores nos ayudan a identificar cada seccin del diseo y a
asignar una funcin intrnseca para cada uno de ellos, pero lo que es realmente importante
es lo que hay dentro de cada una de esas secciones.
La mayora de los elementos ya estudiados fueron creados para dar una estructura a la
pgina web que los navegadores y nuevos dispositivos puedan identificar.
Las etiquetas <body> son para declarar el cuerpo o las partes visibles del documento, las
etiquetas <header> son para englobar informacin importante para el cuerpo, las etiquetas
<nav> para aportar ayuda a la navegacin, las etiquetas <section> contienen el contenido
ms importante y las etiquetas <aside> y <footer> suministran informacin adicional.
Pero ninguno de estos elementos declaran nada sobre el contenido en si mismo. Todos
tienen una funcin estructural muy especfica.


Cuanto ms profundizamos en el documento, ms nos acercamos a la definicin del
contenido. Esta informacin estar compuesta de elementos visuales diferentes como
ttulos, textos, imgenes, videos y aplicaciones interactivas entre otras. Necesitamos poder
diferenciar estos elementos y establecer relaciones entre ellos.
<article>

De las misma manera en que los blogs estn divididos en entradas, las pginas webs estn
divididas en partes que tienen caractersticas similares. El elemento <article> nos permite
identificar cada una de estas partes.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>edu4java Home</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
<header>
<h1>edu4java</h1>
</header>
<nav>
<ul>
<li>Tutoriales Web-Html</li>
<li>Tutoriales Juegos Android</li>
<li>Tutoriales Java para principiantes</li>
<li>Tutoriales Sql</li>
<li>Contacto</li>
</ul>
</nav>
<section>
<article>
VIDEO TUTORIALES JAVA
Tutoriales de java para principiantes o iniciacin. Aqu aprenderemos desde cero a
programar en java. Algunos de los conceptos que veremos son genricos de
programacin pero los veremos siempre en el entorno de java.
</article>
<article>
VIDEO TUTORIALES SQL
Tutoriales de sql para principiantes. Aqu aprenderemos como utilizar el lenguaje de
consulta SQL.
</article>
</section>
<aside >
English Version
</aside>
<footer>
Copyright &copy; 2012-2013
</footer>
</body>
</html>

Como podemos ver en el cdigo, las etiquetas <article> estn dentro de las etiquetas
<section>. Las etiquetas <article> pertenecen a esa seccin. Son sus hijos, de la misma
manera que las etiquetas que estn dentro de las etiquetas <body> son hijos del cuerpo.
Pero como con todo hijo del nodo cuerpo, las etiquetas <article> son colocadas una despus
de la otra, ya que cada una de ellas es una parte independiente de <section>.
Este es el resultado;

Como hemos dicho antes, la estructura HTML puede ser descrita como un rbol, con el
elemento <html> de raiz. Otra forma de describir las relaciones entre los elementos es
denominarlos, padres , hijos o hermanos segn la posicin en la estructura del rbol. Por
ejemplo, en un documento HTML tpico, el elemento <body> es el hijo del elemento
<html> y hermano del elemento <head>. Tanto, <body> como <head>, tiene el elemento
<html> como padre.
El elemento <article> no est limitado por su nombre- no slo habla de artculos.
El elemento <article> est creado para contener una unidad independiente de contenido, por
lo que puede llevar un post de un foro, un artculo de una revista, una entrada de un blog,
un comentario de un usuario, etc. Este elemento agrupar unidades de informacin
relacionadas entre s, sin tener en cuenta la naturaleza de la informacin.

Como parte independiente del documento, el contenido de cada elemento <article> tendr
su estructura independiente. Para definir esta estructura podemos sacar ventaja a la
versatilidad de las etiquetas <header> y <footer> ya estudiadas anteriormente. Estas
etiquetas son portables y pueden ser utilizadas fuera del cuerpo, en todas las secciones del
documento.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>edu4java Home</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
<header>
<h1>edu4java</h1>
</header>
<nav>
<ul>
<li>Tutoriales Web-Html</li>
<li>Tutoriales Juegos Android</li>
<li>Tutoriales Java para principiantes</li>
<li>Tutoriales Sql</li>
<li>Contacto</li>
</ul>
</nav>
<section>
<article>
<header>
<h1>VIDEO TUTORIALES JAVA </h1>
</header>
Tutoriales de java para principiantes o iniciacin. Aqu aprenderemos desde cero a
programar en java. Algunos de los conceptos que veremos son genricos de
programacin pero los veremos siempre en el entorno de java.
<footer>
<p>comments (0)</p>
</footer>
</article>
<article>
<header>
<h1>VIDEO TUTORIALES SQL </h1>
</header>
Tutoriales de sql para principiantes. Aqu aprenderemos como utilizar el lenguaje de
consulta SQL.
<footer>
<p>comments (0)</p>
</footer>
</article>
</section>
<aside >
English Version
</aside>
<footer>
Copyright &copy; 2012-2013
</footer>
</body>
</html>
Aqu tenemos un ejemplo de una unidad de informacin creada con el elemento <article>
con una estructura propia. Primero con la etiqueta <header> que contiene el ttulo definido
con el elemento <h1>. A continuacin tenemos el contenido propiamente dicho, un texto
describiendo el tutorial. Y finalmente, despus del texto, tenemos la etiqueta <footer>
especificando el nmero de comentarios.
Este es el resultado del cdigo:

Contenido del cuerpo. Etiqueta hgroup
En los anteriores tutoriales ya hemos incorporado etiquetas <h1> para especificar el ttulo,
dentro de un elemento <header>, al principio del cuerpo o al principio de cada <article>.
Las etiquetas <h1> son necesarias para crear el encabezado de cada parte del documento. A
veces necesitamos tambin aadir subttulos o ms informacin para describir el contenido
de la pgina web o de alguna seccin. De hecho, el elemento <header> est hecho para
incluir otros elementos- como por ejemplo, una tabla de contenidos, formularios de
bsqueda, logos o textos cortos.
Para construir el header, podemos utilizar las ventajas que nos dan el resto de las etiquetas
H: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. Pero para propsitos de procesamiento
interno, y para evitar generar mltiples secciones o subsecciones durante la interpretacin
del documento, estas etiquetas se deben agrupar. Para esto el HTML5, nos proporciona el
elemento <hgroup>.


<hgroup>

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>edu4java Home</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
<header>
<h1>edu4java</h1>
</header>
<nav>
<ul>
<li>Tutoriales Web-Html</li>
<li>Tutoriales Juegos Android</li>
<li>Tutoriales Java para principiantes</li>
<li>Tutoriales Sql</li>
<li>Contacto</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>VIDEO TUTORIALES JAVA </h1>
<h2>Primer programa, con Eclipse en Espaol. Como programar en java </h2>
</hgroup>
</header>
Este tutorial es el primero de una serie de tutoriales en los que vamos a aprender los
conceptos bsicos del lenguaje orientado a objetos JAVA.
<footer>
<p>comments (0)</p>
</footer>
</article>
</section>
<aside >
English Version
</aside>
<footer>
Copyright &copy; 2012-2013
</footer>
</body>
</html>

Las etiquetas H deben guardar su jerarqua, lo que significa que primero se declara el ttulo
con la etiqueta <h1>, y despus se utliza el <h2> para el subttulo, etc. Sin embargo, al
contrario de versiones ms antiguas de HTML, HTML5 nos permite reutilizar las etiquetas
H y construir esta jerarqua las veces que se quiera en cada seccin del documento.
El elemento <hgroup> es necesario cuando tenemos un ttulo y subttulo o ms de una
etiqueta H junta en el mismo <header>. Este elemento slo puede contener etiquetas H. Si
solamente tenemos una etiqueta <h1>, no hace falta agruparlo. Por ejemplo en el <header>
del cuerpo no hemos utilizado este elemento ya que slo tenemos un elemento H en el
interior. Hay que recordar que el elemento <hgroup> est hecho para agrupar etiquetas H,
tal y como indica su nombre.
Este es el resultado;

Los navegadores y programas que ejecutan y renderizan pginas web, leen el cdigo
HTML y crean su propia estructura interna para interpretar y procesar cada elemento. Esta
estructura interna se divide en secciones que no tienen relacin con las divisiones en el
diseo o en el elemento <section>. Estas son secciones conceptuales generadas durante la
interpretacin del cdigo.
El elemento <header> no crea solamente una de estas secciones conceptuales; esto significa
que los elementos dentro del <header> representarn diferentes niveles y pueden generar
internamente diferentes secciones. El elemento <hgroup> se cre con el propsito de
agrupar las etiquetas H y as evitar que el navegador hiciera malas interpretaciones.
Contenido del cuerpo. Elemento Figure

La etiqueta <figure> ha sido creada para ayudarnos a ser ms especficos en la
declaracin del contenido del documento. Antes de que se introdujera este elemento, no
podamos identificar el contenido que era parte de la informacin pero independiente a la
vez como por ejemplo las imgenes, ilustraciones, videos, etc.
Normalmente estos elementos son parte del contenido principal pero se pueden mover sin
perjudicar al flujo del documento. Cuando existe este tipo de informacin, hay que
utilizar las etiquetas <figure> para identificarlas.



<figure>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>edu4java Home</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
<header>
<h1>edu4java</h1>
</header>
<nav>
<ul>
<li>Tutoriales Web-Html</li>
<li>Tutoriales Juegos Android</li>
<li>Tutoriales Java para principiantes</li>
<li>Tutoriales Sql</li>
<li>Contacto</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>VIDEO TUTORIALES JAVA </h1>
<h3>Primer programa, con Eclipse en Espaol. Como programar en java </h3>
</hgroup>
</header>
<figure>
<iframe src="http://www.youtube.com/embed/Y5QI2IAoIjw"></iframe>
<figcaption>
Este es el video del primer tutorial de Java para principiantes.
</figcaption>
</figure>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
<aside >
English Version
</aside>
<footer>
Copyright &copy; 2012-2013
</footer>
</body>
</html>
En el ejemplo, hemos insertado un video (<iframe
src="http://www.youtube.com/embed/Y5QI2IAoIjw"></iframe>), despus del texto. Esto
se hace frecuentemente; comnmente el texto se enriquece con imgenes o videos.
Las etiquetas <figure> nos permite encapsular estos complementos visuales y diferenciarlos
as del resto del contenido.
En el cdigo que vemos en el ejemplo, podemos ver un elemento extra dentro de <figure>.
Comnmente las unidades de informacin como imgenes o videos se describen con un
texto corto debajo. HTML5 nos provee con un elemento para colocar e identificar esta
leyenda.
Las etiquetas <figcaption> encapsulan la leyenda relacionada a la <figure> y establece una
relacin entre los dos elementos y el contenido.
Este es el resultado;


HTML5- Formularios. Nuevos tipos de Input; Input de tipo Email, Search, URL y Tel.
La web 2.0 se centra en el usuario. Y por ello hay que hacer las interfaces ms intuitivas,
ms naturales, ms prcticas y ms estticas.
Los formularios son las interfaces ms importantes; permiten al usuario insertar datos,
tomar decisiones, comunicar informacin y cambiar el comportamiento de una aplicacin.
Durante los ltimos aos se han creado cdigos adaptados y librerias para procesar los
formularios desde los ordenadores de los usuarios. HTML5 hace que estas propiedades
sean estndar, aportando nuevos atributos, elementos y un API completo.
Actualmente la capacidad para procesar la informacin en los formularios en tiempo real
se ha incorporado a los navegadores y est completamente estandarizado.

El Elemento <input>
El elemento ms importante de un formulario es <input>. Este elemento puede cambiar sus
propiedades gracias al atributo type. Este atributo determina que tipo de dato tiene que
insertar el usuario.
Anteriormente los tipos disponibles eran texto multipropsito y algunos ms especficos,
como contrasea (password) y enviar (submit). HTML5 ha aumentado el nmero de
opciones disponibles, incrementando de esta manera las posibilidades para este elemento.
En HTML5, estos nuevos tipos, no slo estn especificando que tipo de dato se espera, si
no que adems le est diciendo al navegador que hacer con la informacin recibida. El
navegador procesar los datos del input teniendo en cuenta el valor del atributo y validar o
no la entrada de la informacin.
TipoEmail(correoelectrnico)
Casi todos los formularios del planeta tienen un campo input para insertar una direccin de
correo electrnico. Hasta ahora, el nico tipo disponible para este tipo de datos era el texto
(text). El type text (tipo texto), representa un texto general, no un dato especfico, por lo que
haba que controlar con Javascript si el texto insertado era una direccin de correo
electrnica vlida. Ahora es el navegador el que se encarga de validar la informacin
insertada:
Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Formularios</title>
</head>
<body>
<section id="form">
<form name="miform" id="miform" method="get">
<input type="email" name="micorreo" id="micorreo">
<input type="submit" value="Enviar">
</form>
</section>
</body>
</html>
Este es el resultado utilizando el navegador Firefox;

El texto insertado en el campo es examinado por el navegador y validado o no como correo
electrnico. En este caso, reconoce que no es una direccin correcta y salta un mensaje de
error.
Las respuestas de cada navegador no vienen determinadas por las especificaciones HTML5.
TipoSearch(Bsqueda)

El tipo search no controla la entrada de la informacin; simplemente es una indicacin para
los navegadores. Algunos navegadores cambian el diseo de este elemento, para sealar al
usuario la funcin del campo.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formularios</title>
</head>
<body>
<section id="form">
<form name="miform" id="miform" method="get">
Buscar en edu4Java:<input type="search" name="mibusqueda" id="mibusqueda">
<input type="submit" value="Enviar">
</form>
</section>
</body>
</html>
Lo que obtenemos es un campo que se comporta como un campo de texto normal;


TipoURL

Este tipo funciona exactamente igual que el email, pero para una direccin de una pgina
web. Esta creado para recibir nicamente URLs absolutos y retornar un mensaje de error
si el valor es invlido.
TipoTel(Telfono)
Este tipo es para insertar nmeros de telfono. A diferencia de los tipos email y url, el tipo
tel, no necesita una sintaxis especfica. Es una indicacin para el navegador, por si la
aplicacin necesita hacer ajustes teniendo en cuenta el dispositivo en el que se est
ejecutando. Por ejemplo, un smartphone como el iPhone convierte su teclado a nmeros de
telfono.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formularios</title>
</head>
<body>
<section id="form">
<form name="miform" id="miform" method="get">
Telefono: <input type="tel" name="mitelefono" id="mitelefono">
<input type="submit" value="Enviar">
</form>
</section>
</body>
</html>
Este sera el resultado:

HTML5. Formularios. Nuevos Tipos de Input. Input de tipo Number, Range y Date
TipoNumber
Como indica su nombre, el tipo number slo es vlido cuando recibe un dato numrico.
A continuacin tenemos nuevos atributos que pueden ser tiles para este campo:
minEl valor de este atributo determina el valor mnimo aceptado para este campo.
maxEl valor de este atributo determina el valor mximo aceptado para este campo.
stepEl valor de este atributo determina los intervalos en los que los valores del campo
son incrementados y disminuidos. Por ejemplo, si se define un step de 5, con un mnimo
de 0 y un mximo de 10, el navegador no permite especificar un valor entre 0 y 5 o entre
5 y 10.

Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formularios</title>
</head>
<body>
<section id="form">
<form name="miform" id="miform" method="get">
Insertar un numero (entre 0 y 10):
<input type="number" name="minumber" id="minumber" min="0" max="10"
step="3">
<input type="submit" value="Enviar">
</form>
</section>
</body>
</html>
Este es el resultado en el Navegador Chrome. Donde vemos que si introducimos una letra y
no un nmero, nos salta un mensaje de error:

Tambin nos salta un mensaje de error cuando insertamos un nmero que est fuera del
intervalo de 3 que hemos definido con el atributo step=3:

TipoRange
Este tipo hace que el navegador construya un nuevo control. Este control deja escoger al
usuario el valor de entre un rango de nmeros. Normalmente se muestra con un deslizador
para mover los valores de arriba a abajo o con unas flechas, pero no exite un diseo
estandar an.
Este tipo utiliza los atributos min y max para definir los lmites del rango. Tambin puede
tener el atributo step para definir los valores del intervalo en los que se incrementar o
disminuir el rango.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formularios</title>
</head>
<body>
<section id="form">
<form name="miform" id="miform" method="get">
Puntos: 0 <input type="range" name="misnumeros" id="misnumeros" min="0"
max="10" step="5"> 10
<input type="submit" value="Enviar">
</form>
</section>
</body>
</html>
Este es el resultado:

TipoDate
Este tipo tambin generar un control nuevo. En este caso, se incluy para mejorar la
insercin de fechas.
Un ejemplo es cuando el usuario est eligiendo la fecha de un vuelo, en este caso, el tipo
date har que el navegador nos muestre un calendario y que nosotros slo tengamos que
insertar el elemento <input> en el documento para que le aparezca al usuario.
La interface no se declara en la especificacin. Cada navegador suministra su propia
interface y lo har de acuerdo al dispositivo en el que ejecute la aplicacin.
Normalmente, el valor esperado y generado tiene la sintaxis ao/mes/da.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formularios</title>
</head>
<body>
<section id="form">
<form name="miform" id="miform" method="get">
<input type="date" name="mifecha" id="mifecha">
<input type="submit" value="Enviar">
</form>
</section>
</body>
</html>
Este es el resultado en Chrome;

HTML5. Formularios. Nuevos Tipos Input: Tipo Week, Tipo Month, Tipo Time, Tipo
Datetime, Tipo Datetime-local y Tipo Color.
TipoWeek

Este tipo suministra una interface similar a la de date, pero slo para escoger semanas
completas. Normalmente el valor esperado tiene la sintaxis 2014-W10, donde 2014 es el
ao y el 10 es el nmero de la semana.
Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Formularios</title>
</head>
<body>
<section id="form">
<form name="miform" id="miform" method="get">
Seleccione una semana:
<input type="week" name="misemana" id="misemana">
<input type="submit" value="Enviar">
</form>
</section>
</body>
</html>


Este es el resultado en Chrome:

TipoMonth

Es similar al tipo anterior, aunque para un mes completo. El valor esperado tiene la sintaxis
ao-mes.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formularios</title>
</head>
<body>
<section id="form">
<form name="miform" id="miform" method="get">
Seleccione un mes: <input type="month" name="mimes" id="mimes">
<input type="submit" value="Enviar">
</form>
</section>
</body>
</html>
Este es el resultado en Chrome:

TipoTime

El tipo time es similar a date, pero para fijar la hora. Normalmente tiene la sintaxis
hora:minutos:segundos, pero tambin puede ser hora:minutos. Depender del navegador.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formularios</title>
</head>
<body>
<section id="form">
<form name="miform" id="miform" method="get">
Seleccione una hora: <input type="time" name="mihora" id="mihora">
<input type="submit" value="Enviar">
</form>
</section>
</body>
</html>
Este es el resultado en Chrome:

TipoDatetime-local

El tipo datetime-local es un tipo de datetime (fecha y hora) sin zona horaria.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formularios</title>
</head>
<body>
<section id="form">
<form name="miform" id="miform" method="get">
Inserte la fecha y la hora de su cumpleanos:
<input type="datetime-local" name="mihorafechalocal" id="mihorafechalocal">
<input type="submit" value="Enviar">
</form>
</section>
</body>
</html>
Este es el resultado en el Navegador Chrome:

TipoDatetime
El tipo datetime es para fecha y hora, incluyendo zona horaria.
<inputtype="datetime"name="mifechahora"id="mifechahora">

TipoColor

Adems de los tipos para las fechas y horas, tambin hay un tipo que nos suministra una
interface predefinida para que el usuario pueda elegir un color. Normalmente, el valor
esperado para este campo es un nmero hexadecimal, como #00FF00.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formularios</title>
</head>
<body>
<section id="form">
<form name="miform" id="miform" method="get">
Seleccione un color:
<input type="color" name="micolor" id="micolor">
<input type="submit" value="Enviar">
</form>
</section>
</body>
</html>

No existe una interface estndar para el color determinada por HTML5, pero los
navegadores suelen mostrar una tabla de colores.
Este es el resultado en Chrome:


Nuevos Elementos en HTML5
Para poder manejar mejor las necesidades actuales de internet, HTML5 ha incluido
nuevos elementos para dibujar grficos, mostrar imagen y sonido, para mejorar la
estructura de las pginas y gestionar mejor los formularios, as como nuevos APIs para
arrastrar y soltar, para encontrar tu posicin geogrfica, para guardar datos locales, etc.
A continuacin tenemos una lista de los nuevos elementos HTML, introducidos por
HTML5 y una descripcin de para que se usan.



Nuevos elementos Semnticos/Estructurales
HTML5 ofrece nuevos elementos para una mejor estructura:
Etiqueta Descripcin
<header> Define el header para un documento o una seccin.
<hgroup> Agrupa los elementos para el encabezado.
<nav> Define los enlaces de navegacin en un documento.
<section> Define una seccin en el documento.
<main> Define el contenido principal del documento.
<article> Define un artculo del documento.
<aside> Define contenido secundario de la pgina.
<footer> Define el pie del documento o seccin.
<details> Define detalles adicionales que el usuario puede ver o esconder.
<summary> Define un encabezado visible para un elemento <details>.
<figure> Define un contenido independiente, como una ilustracin, diagrama, foto, etc.
<figcaption> Define una ttulo para un elemento <figure>.
<mark> Define texto resaltado o marcado.
<time> Define una fecha/hora.
<bdi>
Define una parte del texto que puede ser formateada de una manera diferente a la del texto
principal.
<wbr> Define un posible retorno de carro.
<dialog> Define una caja de dilogo o ventana
<command> Define un botn de comando al que el usuario puede llamar
<meter> Define una medida escalar dentro de un rango establecido.
<progress> Define el progreso de una tarea.
<ruby> Define una anotacin ruby (para tipografa del este asitico) .
<rt> Define una pronunciacin de caracteres (para tipografa del este asitico)
<rp> Define lo que se puede mostrar en los navegadores que no soporta las anotaciones ruby.

Nuevos elementos Form
Etiqueta Descripcin
<datalist> Define opciones predefinidas para una caja de texto input.
<keygen>
Define un campo generador de palabras clave(para envo de claves a
traves de formularios)
<output> Define el resultado de un clculo

El nuevo elemento <canvas>
Etiqueta Descripcin
<canvas> Define dibujos grficos utilizando JavaScript

Nuevos Elementos Media
Etiqueta Descripcin
<audio> Define contenido de sonido o msica
<video> Define contenido de video o smovie
<source> Define fuentes para <video> y <audio>
<track> Defines rutas para <video> y <audio>
<embed> Define containers para aplicaciones externas (como plug-ins)


Elementos eliminados
Los siguientes elementos de HTML 4.01 han sido eliminados de HTML5:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

Ejemplos de mejoras e incorporaciones respecto a antiguas versiones

HTML5 se desarroll para simplificar, especificar y organizar el cdigo. Para lograr estos
propsitos, se aadieron algunos atributos y etiquetas y se integr HTML con CSS
Javascript. Estas incorporaciones y mejoras de versiones anteriores afectan no slo a
nuevos elementos, si no tambin a como usamos los viejos.


<mark>
La etiqueta <mark> fue aadida para resaltar parte de un texto que no era importante
originalmente pero que se vuelve importante dada la actividad actual del usuario. El mejor
ejemplo es el resultado de una bsqueda. El elemento <mark> resaltar la parte del texto
que coincide con la palabra buscada.
Un ejemplo es la bsqueda de la palabra "coche"; el resultado puede ser mostrado con este
cdigo:
<span>Mi <mark>coche</mark> es rojo</span>
El texto representa los resultados de la bsqueda, y las etiquetas <mark> rodean el texto
buscado- la palabra "coche". En algunos buscadores, la palabra ser resaltada con un fondo
amarillo por defecto, pero se puede sobreescribir esos estilos con los propios utilizando
CSS.
En el pasado, se consegua el mismo resultado utilizando el elemento <b>. Sin embargo, la
incorporacin del <mark> ha ayudado a cambiar el significado y ha creado nuevas
funciones para varios elementos entre ellos los siguientes:

<em> debera ser utilizado para indicar nfasis (reemplazando la etiqueta <i> que
utilizabamos antes)
<strong> para mostrar importancia
<mark> para resaltar texto importante de acuerdo con las circunstancias
<b> debera ser utilizado solamente cuando ningn otro elemento sea apropiado
<small>

La nueva especificidad de HTML es evidente en algunos elementos como <small>. Este
elemento, anteriormente, presentaba cualquier texto con una letra pequea. La etiqueta se
refera al tamao del texto, independientemente de su significado.
En HTML5 la nueva funcin del elemento <small> es representar la "letra pequea", como
derechos de copyright, de propiedad, etc.

<small>Copyright &copy; 2013 edu4Java</small>

<cite>

Otro elemento que ha cambiado su naturaleza para ser ms especfico es <cite>. Ahora las
etiquetas <cite> engloban el ttulo de un trabajo, como un libro, pelcula, cancin, etc.

<span>Me gusta la pelcula <cite>Casablanca</cite></span>

<address>

El elemento <address> es un elemento viejo que se ha convertido en un elemento
estructural. Se usa para plasmar la informacin de contacto de, por ejemplo, el contenido de
un elemento <article> o del cuerpo entero. Este elemento debera ser incluido dentro de un
<footer>, como en el ejemplo:

<article>
<header>
<h1>Ttulo del tutorial uno</h1>
</header>
Este es el texto del tutorial
<footer>
<address>
<a href="http://www.edu4java.com/index.html">edu4Java</a>
</address>
</footer>
</article>

<time>

Para mostrar la fecha se puede utilizar simplemente el elemento <p> dentro del <header>
de los artculos en los que queremos ensear la fecha, pero en HTML5 existe un elemento
especial para este propsito. El elemento <time> nos permite declarar un sello de tiempo
que lee la mquina, as como un texto leible por el ojo humano que representa la fecha y la
hora.

<article>
<header>
<h1>Ttulo del tutorial uno</h1>
<time datetime="2013-10-12" pubdate>posted 12-10-2013</time>
</header>
Texto del tutorial uno
</article>
El atributo datetime representa el sello del tiempo que leer la mquina. El formato del
sello del tiempo puede seguir un formato concreto como en este ejemplo: 2013-10-
12T12:10:45. Tambin podemos incluir el atributo pubdate, que es aadido para indicar
que el valor del atributo datetime representa la fecha de publicacin.
Atributos Globales HTML5

Los atributos HTML dan a los elementos signficado y contexto.
A continuacin tenemos un listado de los atributos que puedes utilizar en todos los
elementos HTML5 y que se denominan atributos globales:


Atributos Globales HTML5:
Atributo Descripcin
accesskey="caracter"
Especifica una tecla de acceso (comando de acceso directo) que activa o
hace foco en el elemento. Es un slo caracter. Los usuarios pueden acceder
al elemento mediante Alt-<tecla> (PC) o Ctrl-<tecla> (Mac).
class="texto"
Especifica uno o ms nombres de clases para un elemento (haciendo
referencia a una clase en una hoja de estilo)
contenteditable="true|false"
Indica al usuario que puede editar el elemento. Este atributo es soportado
completamente en las versiones actuales de los navegadores. No en HTML
4.01.
contextmenu="id del elemento <menu>
para abrir"
Especifica un menu contextual para un elemento. El men
contextual aparece cuando un usuario hace clic en el elemento. No en
HTML 4.01.
dir="ltr|rtl|auto"
Especifica la direccin del texto para el contenido de un elemento. ltr
indica de izquierda a derecha; rtl indica de derecha a izquierda; y auto
indica que la direccin tiene que ser determinada programticamente.
draggable="true|false"
Indica si el elemento es arrastrable; se puede mover haciendo click sin
soltar, movindolo a una nueva posicin en la ventana. No en HTML 4.01.
dropzone="copy|move|link|string:text
string type| file:file type"
Especifica si cuando los datos arrastrados son soltados, son copiados,
movidos, o linkeados.
copy es cuando los datos son copiados; move mueve los datos a una nueva
posicin; y link crea un link a los datos originales. Si se incluye
string:text/plain esto permite utilizar cualquier texto. El atributo file: indica
que se puede utilizar un archivo (ej: file:image/png). Se pueden utilizar los
dos, por ejemplo; dropzone="copy string:text/plain". No en HTML 4.01.
hidden (hidden="hidden" en XHTML)
Evita que el elemento y sus descendientes se muestren en el navegador.
Cualquier control de formulario o de script dentro de la seccin hidden ser
ejecutado, aunque no se muestra al usuario. No en HTML 4.01.
id="text string" Especifica un id nico por cada elemento.
inert (inert="inert" en XHTML)
Indica que el elemento debe ser inerte, lo que significa que no puede ser
seleccionado o buscado por el usuario. Slo WHATWG* y HTML5.1.
itemid="text"
Parte del sistema de microdatos que incluye datos lebles para la mquina;
el atributo itemid indica un identificador reconocido globalmente (como el
ISBN de un libro). Es utilizado junto al itemtype y en el mismo atributo
itemscope que ha especificado el item. Slo WHATWG* y HTML5.1.
itemprop="text"
Parte del sistema de microdatos que incluye datos lebles para la mquina;
el atributo itemprop especifica el nombre de la propiedad. El contenido del
elemento especifica su valor. El valor puede ser, un URL especificado por el
atributo href o una imagen especificada por el atributo src. Slo
WHATWG* y HTML5.1.
itemref="lista de IDs"
Parte del sistema de microdatos que incluye datos lebles para la mquina;
el atributo itemref especifica una lista de elementos (mediante valores ID)
de esa misma pgina a ser incluidos en un item. El atributo itemref debe
ser usado en el mismo elemento que el atributo itemscope que ha
especificado el item. Slo WHATWG* y HTML5.1.
itemscope
Parte del sistema de microdatos que incluye datos lebles para la mquina;
itemscope crea un nuevo elemento, un grupo de propiedades
(nombre/pares de valores). Slo WHATWG* y HTML5.1.

itemtype="URL o etiqueta DNS inversa"
Parte del sistema de microdatos que incluye datos lebles para la mquina;
el atributo itemtype indica el tipo de item estandarizado especificado por
el URL o por una etiqueta DNS inversa. El atributo itemtype se utiliza en el
mismo elemento que el atributo itemscope. Slo WHATWG* y HTML5.1.
lang Especifica el idioma del contenido del elemento.
xml:lang
Especifica el idioma para elementos en documentos XHTML. Slo en
XHTML.
spellcheck="true|false"
Especifica si se debe corregir o no la gramtica y la ortografa del elemento.
No en HTML 4.01.
style="estilo CSS" Especifica un estilo CSS conforme al elemento.
tabindex="nmero"
Especifica la posicin del elemento en el orden de tabulacin del
documento. El valor debe ser siempre entre 0 y 32,767. Se usa para tabular
a travs de los links de la pgina (o campos de un formulario).
title="texto" Especifica informacin extra sobre un elemento.
translate="yes|no"
Indica si el texto del contenido del elemento y los valores del atributo
deben ser traducidos o no al encontrar el documento. yes es por defecto;
no deja el contenido del elemento sin cambiar. No en HTML 4.01.

*WHATWG: Web Hypertext Application Technology Working Group.