¿Qué es HTML5?
HTML5 es la quinta revisión de HTML (Hyper Text Markup Language). HTML5 está en desarrollo ya por algún tiempo y parecía lejano el día de cuando comencemos a utilizarlo, ahora ya estamos llegando al momento de cuando esto se convierta una práctica común entre los desarrolladores aunque muchos predicen que recién 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 estándar de codificación y no únicamente un markup para HTML4 sino un nuevo lenguaje HTML5 que hará más sencillo su uso para todos incluyendo navegadores y desarrolladores; ya existen muchos ejemplos hechas en Javascript y algunas APIs que ya utilizan el estándar a venir “HTML5.”
HTML5 especifica dos variantes de sintaxis para HTML: un clásico 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 mayoría de los sitios están basadas en HTML y utilizan HTML 4, pero esto irá cambiando en los próximos meses y años, hasta ahora el código HTML apenas ha evolucionado de la versión HTML 2.0 únicamente corrigiendo algunos problemas hasta la versión HTML 4, junto a algunas nuevas características; 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 inclinación al uso de JavaScript, y si tiene Javascript deshabilitado las páginas se mostrarán incorrectamente.
Nuevos elementos
HTML5 incluye un conjunto de nuevos elementos y atributos principalmente originados por las formas típicas de uso de los sitios web modernos. Algunos elementos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, por ejemplo <nav> es un bloque de navegación del sitio web y <footer> la parte inferior de la página. Hay otros elementos nuevos que proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio> y <video> que además están 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>
Borrador actual de especificaciones de HTML 5.
Estructura
Veamos cómo sería la estructura HTML 5 de un sitio web, en este ejemplo de una página de 2 columnas.
La siguiente imagen muestra la actual manera de hacerla con HTML 4
Y la siguiente figura muestra de cómo se haría lo mismo con HTML 5
Como se nota, la última manera resultará siendo más limpia puesto que HTMl 5 efectivamente hace más sencillo estructurar una página web utilizando los nuevos elementos. Una vez que la mayoría de los navegadores soporten HTML 5 la web será más rica y más veloz.
Navegadores compatibles con HTML 5
Con el creciente interés en HTML 5 muchos navegadores se están 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 todavía no reconoce el HTML 5 aunque comentan que para su versión 9 ya lo hará.
Elementos HTML 5
| Tag | Descripción |
| <comment> | Define un comentario |
| <!DOCTYPE> | Define el tipo de documento |
| <a> | Define un enlace |
| <abbr> | Define una abreviatura |
| <address> | Define un elemento de dirección |
| <area> | Define un área dentro de una imagen |
| <article> | Define un artículo |
| <aside> | Define el contenido de al lado (sidebar) |
| <audio> | Define contenido de sonido |
| <b> | Define texto en negrita |
| <base> | Define una URL base para todos los enlaces en una página |
| <bdo> | Define la dirección del texto a mostrar |
| <blockquote> | Define un bloque de cita |
| <body> | Define el elemento BODY |
| <br> | Define un salto de línea |
| <button> | Define un botón |
| <canvas> | Define un área para manipular(generar) gráficos |
| <caption> | Define una etiqueta para una tabla |
| <cite> | Define una citación |
| <code> | Define un texto de código |
| <col> | Define los atributos para las columnas de una tabla |
| <colgroup> | Define grupos de columnas de la tabla |
| <command> | Define un botón de comandos |
| <datagrid> | Define datos en una lista-árbol |
| <datalist> | Define una lista desplegable |
| <datatemplate> | Define una plantilla de datos |
| <dd> | Define una descripción de definiciones |
| <del> | Define un texto eliminado |
| <details> | Define los detalles de un elemento |
| <dialog> | Define una diálogo(conversación) |
| <div> | Define una sección en un documento |
| <dfn> | Define un término de definición |
| <dl> | Define una lista de definiciones |
| <dt> | Define un término de definiciones |
| <em> | Define texto enfatizado |
| <embed> | Define contenido externo interactivo o un plugin |
| <eventsource> | Define un destino para los eventos enviados por un servidor |
| <fieldset> | Define un campo establecido |
| <figure> | Define un grupo de contenido de medios, y sus etiquetas |
| <footer> | Define un pie para la sección o página |
| <form> | Define un formulario |
| <h1> a <h6> | Define encabezados 1 a 6 |
| <head> | Define información acerca del documento |
| <header> | Define un encabezado para la sección o página |
| <hr> | Define una linea horizontal |
| <html> | Define el documento HTML |
| <i> | Define texto en cursiva |
| <iframe> | Define una sub ventana (frame) |
| <img> | Define una imagen |
| <input> | Define un campo de entrada |
| <ins> | Define texto insertado |
| <kbd> | Define texto de teclado |
| <label> | Define una etiqueta para un control de un formulario |
| <legend> | Define un título en un <fieldset> |
| <li> | Define un ítem de lista |
| <link> | Define una referencia a un recurso |
| <mark> | Define un texto marcado |
| <map> | Define un mapa para una imagen |
| <menu> | Define una lista menú |
| <meta> | Define información relevante |
| <meter> | Define las medidas dentro de un rango predefinido |
| <nav> | Define enlaces de navegación |
| <nest> | Define un punto de anidación en una plantilla de datos <datatemplate> |
| <noscript> | Define una sección sin scripts |
| <object> | Define un objeto a embeber |
| <ol> | Define una lista ordenada |
| <optgroup> | Define un grupo de opciones |
| <option> | Define una opción en una lista desplegable |
| <output> | Define algunos tipos de salida |
| <p> | Define un párrafo |
| <param> | Define un parámetro para un objeto |
| <pre> | Define texto preformateado |
| <progress> | Define el progreso de un tarea de cualquier tipo |
| <q> | Define una cita corta |
| <rule> | Define las reglas para actualizar una plantilla |
| <samp> | Define código de ejemplo |
| <script> | Define un script |
| <section> | Define una sección |
| <select> | Define una lista de selección |
| <small> | Define texto pequeño |
| <source> | Define orígenes de medios |
| <span> | Define una sección en un documento |
| <strong> | Define texto en negrita |
| <style> | Define una definición de estilos |
| <sub> | Define texto subscript (posicionado más abajo) |
| <sup> | Define texto superscript (posicionado más arriba) |
| <table> | Define una tabla |
| <tbody> | Define el cuerpo de la tabla |
| <td> | Define una celda de tabla |
| <textarea> | Define un área de texto (memo) |
| <tfoot> | Define el pie de una tabla |
| <th> | Define el encabezado de una tabla |
| <thead> | Define el encabezado de una tabla |
| <time> | Define la fecha/hora |
| <title> | Define el título del documento |
| <tr> | Define una fila de una tabla |
| <ul> | Define una lista desordenada |
| <var> | Define una variable |
| <video> | Define un vídeo |
Nota: Los campos en negrita son lo nuevo del HTML5
Atributos
| Atributo | Valor | Descripción |
| class | nombre de clase | Especifica un nombre de clase para un elemento (utilizado en una hoja de estilo CSS) |
| contenteditable | true, false | Especifica si un usuario puede o no editar el contenido |
| contextmenu | menu_id | Especifica el menú contextual para un elemento |
| dir | ltr, rtr | Especifíca la dirección del texto en un elemento |
| draggable | true, false, auto | Especifica si un usuario puede o no mover un elemento |
| id | id | Especifica un único nombre de identificación para un elemento |
| irrelevant | true, false | Especifica si un elemento es irrelevante, si lo es, dicho elemento no se muestra |
| lang | código de idioma | Especifica un idioma para el contenido de un elemento |
| ref | URL, id | Especifica una referencia a otro documento / otra parte de un documento (usado únicamente si se estableció el atributo template) |
| registrationmark | marca de registro | Especifica una marca de registro para un elemento |
| style | definición de estilo | Especifica un estilo en línea para un elemento |
| tabindex | número | Especifica el orden de tabulación de un elemento |
| template | URL, id | Especifica una referencia a otro documento / otra parte de un documento que deba ser aplicada a un elemento |
| title | texto | Especifica información extra acerca de un elemento |
Nota: Sólo es una lista actual de la lista estándar de atributos. Los campos en negrita son exclusivos de HTML5.
…
Entradas
