Sei sulla pagina 1di 9

QU ES HTML5? HTML5 es la quinta revisin de HTML (Hyper Text Markup Language).

HTML5 est en desarrollo ya por algn tiempo y pareca lejano el da de cuando comencemos a utilizarlo, ahora ya estamos llegando al momento de cuando esto se convierta una prctica comn entre los desarrolladores aunque muchos predicen que recin el 2022 se har un uso masivo de ello, pero a pesar de ello ya existen navegadores con soporte completo del HTML5. Los webmasters ven esto como un gran paso hacia el desarrollo de aplicaciones ricas en multimedia y con mejores prestaciones. HTML5 cambiar la manera que trabajamos con el HTML ya que se convertir en un estndar de codificacin y no nicamente un markup para HTML4 sino un nuevo lenguaje HTML5 que har ms sencillo su uso para todos incluyendo navegadores y desarrolladores; ya existen muchos ejemplos hechas en Javascript y algunas APIs que ya utilizan el estndar a venir HTML5.

HTML5 especifica dos variantes de sintaxis para HTML: un clsico HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deber ser servida como XML (XHTML) (application/xhtml+xml) y es la primera vez que HTML y XHTML se han desarrollado en paralelo, cuyo desarrollo est siendo regulado por el consorcio W3C.

La mayora de los sitios estn basadas en HTML y utilizan HTML 4, pero esto ir cambiando en los prximos meses y aos, hasta ahora el cdigo HTML apenas ha evolucionado de la versin HTML 2.0 nicamente corrigiendo algunos problemas hasta la versin HTML 4, junto a algunas nuevas caractersticas; HTML 5 se basa en el HTML 4 pero por su propia cuenta ser completamente diferente y cambiar la manera que su navegador muestre los sitios web en el monitor de su PC. HTML 5 tendr mayor inclinacin al uso de JavaScript, y si tiene Javascript deshabilitado las pginas se mostrarn incorrectamente.

Prof. Guillermo Ral Reyes Mendo Computacin e Informtica

Nuevos elementos

HTML5 incluye un conjunto de nuevos elementos y atributos principalmente originados por las formas tpicas de uso de los sitios web modernos. Algunos elementos son tcnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semntico, por ejemplo <nav> es un bloque de navegacin del sitio web y <footer> la parte inferior de la pgina. Hay otros elementos nuevos que proporcionan nuevas funcionalidades a travs de una interfaz estandarizada, como los elementos <audio> y <video> que adems estn disponibles en Javascript. Por otra parte se mejor bastante el elemento <canvas> Algunos elementos de HTML 4.01 han quedado obsoletos tales como <font> y <center>, ya que las hojas de estilo son totalmente suficientes para ello. Y se enfatiza bastante en la importancia del scripting DOM para el comportamiento de la web.
Diferencias con HTML 4 y XHTML

Nuevos elementos: article, dialog Nuevos atributos: media, ping, autofocus, inputmode, min, max, pattern. Elementos eliminados: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u Atributos eliminados:

rev y charset en <link> y <a> target en <link> nohref en <area> profile en <head> version en <html> name en <map> scheme en <meta> archiv, classid, codetype, declare y standby en <object> valuetype en <param> charset en <script> summary en <header> axis y abrr en <td> y <th>

Prof. Guillermo Ral Reyes Mendo Computacin e Informtica

Borrador actual de especificaciones de HTML 5.


Estructura

Veamos cmo sera la estructura HTML 5 de un sitio web, en este ejemplo de una pgina de 2 columnas. La siguiente imagen muestra la actual manera de hacerla con HTML 4

Prof. Guillermo Ral Reyes Mendo Computacin e Informtica

Y la siguiente figura muestra de cmo se hara lo mismo con HTML 5

Como se nota, la ltima manera resultar siendo ms limpia puesto que HTMl 5 efectivamente hace ms sencillo estructurar una pgina web utilizando los nuevos elementos. Una vez que la mayora de los navegadores soporten HTML 5 la web ser ms rica y ms veloz.

Prof. Guillermo Ral Reyes Mendo Computacin e Informtica

Navegadores compatibles con HTML 5

Con el creciente inters en HTML 5 muchos navegadores se estn perfilando a ese aspecto, actualmente Webkit (Safari, Google Chrome, Shiira, iCab4, ) es totalmente compatible con el HTML5, Mozilla Firefox 3.5 soporta pero no es 100% compatible mientras que como siempre Microsoft Internet Explorer todava no reconoce el HTML 5 aunque comentan que para su versin 9 ya lo har.
Elementos HTML 5
Tag <comment> <!DOCTYPE> <a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> Descripcin Define un comentario Define el tipo de documento Define un enlace Define una abreviatura Define un elemento de direccin Define un rea dentro de una imagen Define un artculo Define el contenido de al lado (sidebar) Define contenido de sonido Define texto en negrita Define una URL base para todos los enlaces en una pgina Define la direccin del texto a mostrar Define un bloque de cita Define el elemento BODY Define un salto de lnea Define un botn Define un rea para manipular(generar) grficos Define una etiqueta para una tabla Define una citacin Define un texto de cdigo Define los atributos para las columnas de una tabla

Prof. Guillermo Ral Reyes Mendo Computacin e Informtica

<colgroup> <command> <datagrid> <datalist> <datatemplate> <dd> <del> <details> <dialog> <div> <dfn> <dl> <dt> <em> <embed> <eventsource> <fieldset> <figure> <footer> <form> <h1> a <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd>

Define grupos de columnas de la tabla Define un botn de comandos Define datos en una lista-rbol Define una lista desplegable Define una plantilla de datos Define una descripcin de definiciones Define un texto eliminado Define los detalles de un elemento Define una dilogo(conversacin) Define una seccin en un documento Define un trmino de definicin Define una lista de definiciones Define un trmino de definiciones Define texto enfatizado Define contenido externo interactivo o un plugin Define un destino para los eventos enviados por un servidor Define un campo establecido Define un grupo de contenido de medios, y sus etiquetas Define un pie para la seccin o pgina Define un formulario Define encabezados 1 a 6 Define informacin acerca del documento Define un encabezado para la seccin o pgina Define una linea horizontal Define el documento HTML Define texto en cursiva Define una sub ventana (frame) Define una imagen Define un campo de entrada Define texto insertado Define texto de teclado

Prof. Guillermo Ral Reyes Mendo Computacin e Informtica

<label> <legend> <li> <link> <mark> <map> <menu> <meta> <meter> <nav> <nest> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <rule> <samp> <script> <section> <select> <small> <source> <span> <strong>

Define una etiqueta para un control de un formulario Define un ttulo en un <fieldset> Define un tem de lista Define una referencia a un recurso Define un texto marcado Define un mapa para una imagen Define una lista men Define informacin relevante Define las medidas dentro de un rango predefinido Define enlaces de navegacin Define un punto de anidacin en una plantilla de datos <datatemplate> Define una seccin sin scripts Define un objeto a embeber Define una lista ordenada Define un grupo de opciones Define una opcin en una lista desplegable Define algunos tipos de salida Define un prrafo Define un parmetro para un objeto Define texto preformateado Define el progreso de un tarea de cualquier tipo Define una cita corta Define las reglas para actualizar una plantilla Define cdigo de ejemplo Define un script Define una seccin Define una lista de seleccin Define texto pequeo Define orgenes de medios Define una seccin en un documento Define texto en negrita

Prof. Guillermo Ral Reyes Mendo Computacin e Informtica

<style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <ul> <var> <video>

Define una definicin de estilos Define texto subscript (posicionado ms abajo) Define texto superscript (posicionado ms arriba) Define una tabla Define el cuerpo de la tabla Define una celda de tabla Define un rea de texto (memo) Define el pie de una tabla Define el encabezado de una tabla Define el encabezado de una tabla Define la fecha/hora Define el ttulo del documento Define una fila de una tabla Define una lista desordenada Define una variable Define un vdeo

Nota: Los campos en negrita son lo nuevo del HTML5


AtributosAtributo
class Valor nombre de clase Descripcin Especifica un nombre de clase para un elemento (utilizado en una hoja de estilo CSS) Especifica si un usuario puede o no editar el contenido Especifica el men contextual para un elemento Especifca la direccin del texto en un elemento Especifica si un usuario puede o no mover un elemento Especifica un nico nombre de identificacin para un elemento Especifica si un elemento es irrelevante, si lo es, dicho elemento no se muestra Especifica un idioma para el contenido de un elemento

contenteditable contextmenu dir draggable id irrelevant lang

true, false menu_id ltr, rtr true, false, auto id true, false cdigo de idioma

Prof. Guillermo Ral Reyes Mendo Computacin e Informtica

ref

URL, id

Especifica una referencia a otro documento / otra parte de un documento (usado nicamente si se estableci el atributo template) Especifica una marca de registro para un elemento Especifica un estilo en lnea para un elemento Especifica el orden de tabulacin de un elemento Especifica una referencia a otro documento / otra parte de un documento que deba ser aplicada a un elemento Especifica informacin extra acerca de un elemento

registrationmark style tabindex template

marca de registro definicin de estilo nmero URL, id

title

texto

Nota: Slo es una lista actual de la lista estndar de atributos. Los campos en negrita son exclusivos de HTML5.

Prof. Guillermo Ral Reyes Mendo Computacin e Informtica