HTML5

Ing, Sistemas
TEINCO
 DEFINICIÓN DE HTML5

HTML 5 es la quinta revisión importante del lenguaje básico de la World

Wide Web, HTML. HTML5 específica dos variantes de sintaxis para
HTML: una «clásica», HTML, conocida como HTML5, y una variante
XHTML conocida como sintaxis XHTML 5 que deberá servirse con sintaxis
XML
HTML5 es un estándar que sirve como referencia del software que conecta
con la elaboración de páginas web en sus diferentes versiones, define una
estructura básica y un código (denominado HTML) para la definición de
contenido de una página web, como texto, imágenes, vídeos, juegos, entre
otros…
 NOVEDADES EN HTML5

• Incorpora nuevas etiquetas de carácter semántico y que nos ayudan a definir la

estructura. Por ejemplo <footer>, para el pie de página.
• Nuevos controles para formularios que antes sólo eran posibles con JavaScript o 
CSS.
• Soporta audio y vídeo de forma nativa.
• Ya no es necesario el uso de comillas dobles en los atributos, siendo posible algo
como: <div id=contenedor>Esto es un div</div>.
• No hay una sintaxis tan estricta y no es necesario cerrar las etiquetas vacías, por
lo que <br> sería válido.
• Etiqueta doctype simplificada.
• Podemos dibujar con etiquetas como <canvas>.
• Se han eliminado etiquetas y atributos no necesarios como los <frames>.
• Ahora las etiquetas html, head y body no son obligatorias.
• Las etiquetas de tablas thead, tbody y tfoot tampoco son obligatorias.
HISTORIA

La historia de HTML ha sido larga, ya que desde su nacimiento al principio de los

90, ha evolucionado muchísimo, pasando de ser tan solo un simple sistema para
compartir documentos, a ser la base completa de la WEB.
HTML fue desarrollado inicialmente por Tim Berners-Lee en 1980, que trabaja en
aquel entonces en la CERN (Organización Europea para la investigación Nuclear).
El propuso un sistema de Hipertexto que permitiera compartir documentos de una
manera más fácil y eficiente. Pero no fue hasta que se unió con Robert Cailiau
para presentar su propuesta como la World Wide Web (W3), en un concurso para
definir el sistema de hipertexto que se utilizaría para internet.
Cabe mencionar que para el año de 1991 HTML se publicó bajo el
nombre de HTML Tags. Fue hasta 1993 cuando la IETF (Internet
Enginnering Task Force) propuso a HTML para convertirse en un
Estándar. Sin embargo, no fue hasta 1995 cuando HTML ya estaba en la
versión 2.0 cuando logro establecer a HTML como el primer Estándar
oficial de HTML
En 1994 Tim Berners-Lee funda la W3C (World Wide Web Consortium) con
la finalidad de generar recomendaciones y estándares para la WEB y es
cuando decide en 1996 publicar bajo la W3C el estándar HTML. En 1997
se publica la versión 3.2 bajo la W3C.
En 1998 se publica la versión HTML 4.0, la cual incorpora importantes
mejoras como: Hojas de estilo (CSS), scripts, mejoras en los formularios,
etc. Finalmente, en 2004 se publica la última versión oficial de la W3C,
correspondiente a la 4.01 la cual no contenía mejoras importantes.
Cabe mencionar que durante los años 90 se producía la denominada
“Guerra de los Navegadores” en donde Internet Explorer y NetScape
lidiaban una batalla campal por ser el líder de los navegadores, lo que
provoco que cada navegador liberar versiones semanas tras semanas e
incluyera funcionalidad NO ESTANDAR, provocando la completa
incompatibilidad de entre los navegadores. Esto provocaba que los
desarrolladores tuvieran que desarrollar versiones completas para cada
navegador. Un que esta guerra trabajo mucho desorden al desarrollo web,
es importante mencionar que también ayude al rápido avance
tecnológico de la WEB. Un que al final Internet Explorer gano la guerra,
cabe mencionar que NetScape nos dejó dos legados, JavaScript y el
nacimiento de la fundación Mozilla.
ETIQUETAS NUEVAS EN HTML5

 <article>  <embed>
 <mark>  <ruby>
 <aside>  <figcaption>
 <meter>  <section>
 <audio>  <figure>
 <nav>  <source>
 <canvas>  <footer>
 <output>  <summary>
 <command>  <header>
 <progress>  <time>
 <datalist>  <hgroup>
 <rp>  <video>
 <details>  <keygen>
 <rt>  <wbr>
ETIQUETAS ELIMINADAS DE HTML4

 <acronym>
 <applet>
 <basefont>
 <big>
 <center>
 <dir>
 <font>
 <frame>
 <frameset>
 <noframes>
 <strike>
 <tt>
 <u>
 <xmp>
EL DOCTYPE

El DOCTYPE, también llamado DTD, sirve para indicar al navegador a qué

reglas de escritura obedece el código fuente de la página Html o Xhtml

En ausencia de un doctype el navegador no sabe según qué reglas debe procesar

la página. Se conforma con acogerse a reglas genéricas para renderizar a toda
costa la página Html.

Doctype Antes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">

Ahora:
<!DOCTYPE html>
ETIQUETA HTML

La etiqueta <html> indica al navegador que se trata de un documento Html.

La etiqueta <html> puede incluir el atributo lang="es“, especifica que el

documento está en lengua española.

Esta información es muy valiosa para los motores de búsqueda como Google y
para los programas de síntesis de voz usados por personas con dificultades
visuales.

Quedaría algo así:

<!DOCTYPE html>
<html lang="es">
...
</html>
EN EL ENCABEZADO

En la etiqueta Script cambia de la siguiente manera:

<script type="text/javascript">
….
</script>
<script
type="tex
t/javascrip
t"
src="archi
vo.js"></
script>

Por:

<script>
ETIQUETA STYLE

usada para los css, quedaría de al siguiente manera:

<style type="text/css">
...
</style>
<link
rel="style
sheet"
type="tex
t/css"
href="arc
hivo.css"
>

Por:
LA CODIFICACION DEL DOCUMENTO

El juego de caracteres determina la forma neque los caracteres de un alfabeto se

convierten en bytes en un archivo informático (y viceversa).

Con HTML 4.0:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Con HTML 5.0:

<meta charset="iso-8859-1">
  EJEMPLO 1-Una estructura simple
podemos tomar como ejemplo esta estructura, el
primer paso es modificarla para adaptarla al
HTML5
En el elemento <header> encontraremos los
elementos del encabezado de la página, como el
logotipo y el eslogan, por ejemplo.
En el elemento <nav>, situado a la izquierda,
encontraremos los vínculos que nos permitirán
navegar por ese sitio web.
Todos los artículos del blog estarán colocados, por
supuesto, dentro de los elementos <article>. 
Por último, el pie de página, <footer>, podrá
contener las menciones legales o los vínculos de
contacto, por ejemplo.
.
EJEMPLO 2-Una estructura más elaborada
Veamos ahora la estructura de un sitio web un poco
más elaborado. Encontramos de nuevo el
elemento <header>, que ya todos conocemos.
Debajo tenemos el primer elemento <nav>, para el
menú de navegación general del sitio web, que nos
permitirá navegar por las distintas páginas.
A la izquierda tenemos una segunda caja <nav>, para
la navegación secundaria, que contiene los vínculos
relacionados directamente con el contenido de la
página en cuestión.
A la derecha encontramos el elemento <aside>, que
muestra información relacionada con el contenido de
la página, como los vínculos promocionales o los
contenidos relacionados, por ejemplo.
El contenido de la página ...
 INCORPORAR VIDEO

Antes de la llegada de HTML5 dependíamos del uso de complementos instalables,

como Flash, QuickTime o Silverlight para poder mostrar contenidos de vídeo.

Con HTML5 se resuelve esta necesidad yaque especifica un elemento HTML

llamado
<video> que funciona de manera nativa en el navegador y se integra con Javascript.
 Algunos atributos de la etiqueta:

 Autoplay: sirve para que el video comience automáticamente.

 Controls: activa los controles de reproduccion delvideo.
 Poster: permite poner una imagen antes de reproducir el video. Una
vez comience, la imagen desaparece.
 Width, Height: permite definir un tamaño para el video

 Ejemplo:
 <video src='videos/BigBuck.mp4' controls
poster='poster320.png' width='320' height='180'>
OTRAS CARACTERISTICAS

 Existen otras características importantes, que pueden consultar en las referencias

que se encuentran al final, las cuales son mas complejas. Estas son:
 Drag&Drop
 Canvas
 Geolocalización
VALIDACIÓN DE HTML5

 Comprensión y verificación en profundidad de Html5 por parte de

programadores iniciados (y avanzados).

 Asegurar que la página se mostrará siempre de forma correcta en la mayoría

de los navegadores. Una página inválida puede llevar a los navegadores a
interpretarla de forma muy distinta.

 Demostración de su propia capacidad y profesionalidad a la hora de

realizar un código de calidad, conforme a los estándares de Html5.

 Los programas de síntesis vocal y otras ayudas técnicas dirigidas a personas

con problemas de accesibilidad se basan en un código válido a la hora de
procesar las páginas de la red.