Diferencias del HTML5
Publicado por
el
24/06/2009 |
25 comentarios
Anterior a este artículo hablé sobre la llegada del HTML5, en el artículo titulado HTML 5 ya es una realidad, en él, mencioné su beneficio en la red. Ahora trataré de explicar algunas diferencias entre el HTML5 y HTML4. Ya algunos colegas me han comentado que esto será un problema, el tener que modificar los codigos del HTML4.
Lo mismo nos ocurrió cuando llego PHP5, en aquel momento sé que muchos estábamos disfrutando del dominio del PHP4, pero tuvimos que adaptarnos y todos los que teníamos aplicaciones en PHP4 nos actualizamos, ahora le llegó el momento al HTML.
Comenzaré explicando la sintaxis del HTML5.
1. Sintaxis
El término HTML posee una sintaxis compatible con HTML4 y XHTML1 publicados en la red, pero no compatible con las características más esotéricas del SGML de HTML4.
HTML5 define detalladas reglas de sintaxis, incluyendo un control de errores, para que esta sintaxis sea compatible con las implementaciones más populares. Los navegadores seguirán las mismas reglas que los que actualmente tienen text/html.
La otra sintaxis que se puede utilizar para HTML5 es el llamado XHTML5, que no es más que una sintaxis compatible con XML y documentos correctos en XHTML1. Los documentos servidos con esta sintaxis deben ser servidos mediante el MIME application/xml.
2. Codificación
Al igual que sus hermanos menores, seguiremos pidiendo que se defina el charset de nuestro documento mediante la etiqueta <meta charset=”UTF-8″ > o la correspondiente versión de XML para XHTML5.
2.2. El DOCTYPE
El nuevo HTML5 requiere el elemento DOCTYPE que debe ser declarado al principio de la página, de esta forma nos aseguramos de que el navegador renderiza la página en modo estándar. En cambio para la versión XHTML5 este elemento es opcional debido a que XML actúa de diferente manera dentro de nuestro navegador.
<!DOCTYPE html … >
3.1. Modelos estrictos de contenidos
HTML5 define de forma más estricta el contenido para los elementos <div /> y <li />. Estos elementos ahora pueden contener contenido de elementos “block” o “inline” pero no los dos. En HTML4 esto fue bug que en un pricipio dio mucho dolor de cabeza ya que permitía el uso de ambos.
Permitido:
<div>
<em> text </em> //contenido inline
text
</div>
<div>
<p><em> text </em></p>
<p> text </p> //Contenido block
</div>
pero no permite esto:
<div>
<em> text </em>
<p> text </p>
</div>
Otros cambios afectan al elemento <tfoot />, ahora podrá aparecer al final de la página, al igual que directamente después del elemento <thead />.
Un ejemplo sería:
<table border=”1″>
<tbody>
<caption>Nombre de la tabla</caption>
<thead>
<tr>
<th scope=”col”>COLUMNA 1</th>
<th scope=”col”>COLUMNA 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>DATOS 1</td>
<td>DATOS 2</td>
</tr>
<tr>
<td>DATOS 3</td>
<td>DATOS 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope=”col”>PIE 1</th>
<th scope=”col”>PIE 2</th>
</tr>
</tfoot>
</table>
3.2. Nuevos elementos
La web ha cambiado mucho desde sus inicios, con el cambio de la tecnología ha requerido de nuevos elementos para proporcionar una web más semántica, completa y homogénea. Para ello se ha añadido una buena serie de elementos que nos permitirán encapsular más nuestro contenido.
- <article /> elemento que nos permite declarar un trozo del contenido como artículo. Ideal para blogs o periódicos.
- <aside /> representa un trozo de contenido que se relaciona muy levemente con el resto del contenido.
- <dialog /> elemento que permite representar conversaciones.
Ejemplo
<dialog>
<dt> Costello
<dd> Look, you gotta first baseman?
<dt> Abbott
<dd> Certainly.
<dt> Costello
<dd> Who’s playing first?
<dt> Abbott
<dd> That’s right.
<dt> Costello
<dd> When you pay off the first baseman every month, who gets the money?
<dt> Abbott
<dd> Every dollar of it.
</dialog>
- <figure /> podrás usarlo para asociar con un caption un contenido incrustado, como por ejemplo gráficos o vídeo:
<figure>
<video src=ogg>…</video>
<legend>Example</legend>
</figure>
- <footer /> sección de la página para contener información sobre el autor, copyright, etc,…
- <header /> representa a la sección de cabecera.
- <nav /> representa la sección de la página orientada a la navegación.
- <section /> elemento que indica que se trata de una sección genérica.
- <audio /> y <video /> para el contenido multimedia.
- <embed /> es un elemento dedicado para contenido de plugins.
- <m /> representa el texto marcado.
- <meter /> usado para representar medidas, por ejemplo el tamaño del disco usado…
- <time /> usado para mostrar fechas y/o tiempo.
- <canvas /> usado para mostrar gráficos renderizados en tiempo real, por ejemplo gráficos, juegos, etc,…
- <commnad /> relacionado con los comandos que el usuario puede invocar.
- <datagrid /> ideal para mostrar un árbol de datos o una tabla tabulada.
- <details /> muestra información adicionar si el usuario lo demanda.
- <datalist /> junto con el nuevo atributo list para los <input /> puede ser usado para crear comboboxes:
<input list=browsers>
<datalist>
<option value=”Safari”>
<option value=”Internet Explorer”>
<option value=”Opera”>
<option value=”Firefox”>
</datalist>
- <event-sources /> puede ser usado para capturar eventos enviados desde servidor.
- <output /> nos indica que tipo de salida vamos producir con nuestra página.
- <progress /> representa una barra de proceso de una tarea, por ejemplo descargar,…
Los elementos de entrada <input /> dispondrán de una serie de tipos (type) nuevos para indicar los diferentes tipos de elementos de entrada posibles.
- datetime
- datetime-local
- date
- month
- week
- time
- number
- range
- url
La idea es que estos tipos sean proporcionados por el agente de usuario (navegador) en su interface que someter el formato definido al servidor.
3.3 Nuevos atributos
HTML 5 ha introducido una gran cantidad de nuevos elementos para varios elementos de los que ya disponemos en la HTML4.
- media: Para conseguir una mayor consistencia con el link en los elementos <a />
- ping: Especificaremos una lista separada por espacios donde produciremos un ping cuando se siga el enlace, para los elementos <area /> y <a />
- target: Disponible para mejorar la consistencia con el elemento <a />.
- autofocus: Destinado para indicar el elemento <input /> (no hidden), <select />, <textarea /> o <button /> que ha de coger el foco al cargar la página.
- form: Atributo para <input />, <ouput />, <select /> <textarea />, <button /> y <fieldset /> que permite que se asocie con un simple formulario.
- replace: Atributo para <input /> <button /> y <form /> que le afectará cuando el contenido del elemento sofra algún cambio.
- data: Para <form />, <select /> y <datalist />.
- required: Para elementos <input /> (Excepto hidden e image) y <textarea />, indica que el campo es obligatorio.
- inputmode: Atributo para <input /> y <textarea />.
- disabled: Para <fieldset />, permite desactivar el fieldset completo.
- autocomplete, min, max, pattern, step: Para elementos <input /> permite delimitar las posibilidades de nuestros elementos de entrada.
- list: Para elementos <datalist /> y <select />.
- template: Para <input /> y <button /> podrá usarse para repetir templates.
- scoped: Para elemento <style />, permitirá usar hojas de estilo “scoped” ??
- async: Para el elemento <script /> el ajax hecho atributo.
Atributos globales
- Aparte de los ya existentes: class, dir, id, lang y title.
- contenteditable: indica que se trata de un área editable.
- contextmenu: Puede ser usado como punto de menú contextual proporcionado por el usuario.
- draggable: indica que se trata de un elemento draggable.
- tabindex: indica la posición numérica a la que llegaremos pulsando la tecla TAB.
- irrelevant: atributo que indica que el contenido no es relevante.
- repeat, repeat-start, repeat-min, repeat-max: atributos referentes a las iteraciones.
3.4 Elementos Cambiados
Estos elementos de HTML5 son incompatibles con HTML4.
- El elemento <a /> sin href ahora creará un enlace al sitio.
- El elemento <address /> es ahora un nuevo concepto de sección.
- El elemento <b /> ahora representa un trozo de texto a ser estilizado sin ninguna importancia.
- Para elementos <label /> el navegador no debe mover el foco desde la etiqueta al control a menos que el comportamiento sea estándar para el interfaz utilizado en la plataforma.
- <menu /> ha sido redefinido para ser usado con los actuales menús.
- El elemento <small /> ahora representa una impresión pequeña.
- El elemento <strong /> definitivamente representa el énfasis puesto en trozo de nuestro texto.
3.5 Elementos eliminados
En la nueva versión, algunos de los elementos anteriormente desaprobados pasan a ser eliminados definidamente.
- acronym
- applet
- basefont
- big
- center
- dir
- font
- frame
- frameset
- isindex
- noframes
- noscript (solo en XHTML5)
- s
- strike
- tt
- u
3.6 Atributos eliminados
Al igual que los elementos los atributos también pasarán a mejor vida.
- 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 />
- archive, classid, codetype, declare y standby en <object />
- valuetype en <param />
- charset en <script />
- summary en <table />
- header, axis y abbr en <td /> y <th />
4.1. Extensión de HTMLDocument
HTML5 también ha modificado el elemento padre del DOM Level 2. En él encontramos una serie de mejoras y otras que finalmente se hacen estándares:
- getElementsByClassName(), para seleccionar elementos por el atributo class. Ya lo comentamos hace tiempo y vimos que las diferencias a nivel de tiempo de respuesta eran más que satisfactorias.
- innerHTML, aunque prácticamente se usa en todas, o casi todas, las aplicaciones web existentes, por fín será reconocido como estándar en la especificación. Además aprovechando su inserción se posibilita su uso en el elemento padre.
- activeElement, hasFocus(), nos permitirá conocer el elementos activo en tiempo real y el que tenga el foco.
- getSelection(), devuelve un objeto con la selección actual.
- designMode y execCommand(), muy usados para editar documentos.
4.2. Extensiones del Elementos HTMLElement.
A nivel de elemento el DOM también ha sufrido una serie de cambios que vale la pena comentar.
- getElementsByClassName(), nos permite seleccionar los hijos de cualquier objeto que contengan una clase determinada.
- innerHTML, nos permite leer/modificar el contenido de un nodo (al añadir crea nodos texto con etiquetas).
- classList, una implementación muy interesante para vivir con className que nos permite interactuar con las clases de los elementos, proporcionando métodos como has(), add(), remove() y toggle() con los que podremos trabajar con las clases de nuestros elementos.
- relList, funciona de igual forma que classList, pero sobre los atributos rel de <a />, <area /> y <link />.
Escrito por H. E. Pica
© 2009 HectorPica.com
Recursos: W3C – HTML 5 differences from HTML 4
¿Te gusto este artículo?
Califica este artículo: 
Total de votos: 121 votos, Promedio: 4.80 de 5
Tu calificación es útil para otros usuarios y ayuda a valorar el artículo.
Dejale saber a tu amigos que te gusto.
Héctor, tú realmente crees que el HTML5 se implemente pronto o tardará mucho en implementarse?
El HTML5 ya está aquí, quienes no han hecho el cambio somos nosotros los webmaster y los navegadores que aún no tienen soporte para el HTML5.
Héctor Pica, necesito hacerte una pregunta fuera de este tema:
Es que tengo interés por aprender sobre software de computadoras y quisiera saber si me podrías recomendar una forma de hacerlo; alguna página de Internet o algún libro?
Soy un chico de 16 años, si me podrías ayudar te lo agradecería.
MUY INTERESANTE TU BLOG Y TUS OPINIONES.
Existen varias páginas muy buenas que te pueden ayudar, todo depende qué deseas aprender. Te puedo adelantar que ITAPR (Information Technology Association of Puerto Rico) lanzará pronto su portal de cursos en línea donde puedes matricularte y tomar diferentes cursos cortos sobre computadora.
Pero déjame saber qué específicamente deseas conocer del software. Me refiero a si quieres aprender a desarrollar, instalarlos o simplemente usarlos.
Quiero aprender de todo. Porque de eso es que quiero estudiar, de computadora.
Por ahora quiero aprender de software (todo lo que pueda) (me gustaría aprender a hacer una página de Internet) y más adelante, pues me gustaría aprender de hardware.
Te recomiendo que en agosto te matricules en los cursos de ITAPR, todos los cursos son online y te certificarás en diferentes temas desde el diseño y desarrollo, hasta programación, arte gráfico y otros temas interesantes.
Gracias!
Hector me entere que comienzan unos cursos pronto donde consigo esa información para matricularme.
Victor las clases comienzan en agosto 2009 son con ITAPR (Information Technology Asociation of Puerto Rico) inscribete en el boletin de mi website y te estare enviando informacion sobre este tema.
ES UNA EXCELENTE OPORTUNIDAD Y MUY COSTO EFICIENTE…..LO RECOMIENDO…EXITO
Luis 4 de agosto iniciamos. Te paso la información luego.
Hector cuando comienzan las clases
4 de agosto, te envie un e-mail. Lo resibistes?