NorfiPC
NorfiPC » Diseño y edición web » Usar HTML5 en las páginas web

Cómo y por qué usar HTML5 en las páginas web

Beneficios prácticos y ventajas que aporta el uso del nuevo estándar HTML5 en las páginas web, como crear las paginas usando esta declaración. Diferencias con los formatos anteriores, como solucionar conflictos al validar una página en HTML5. Códigos de ejemplos para crear paginas en HTML5.
Usar HTML5 en las páginas web
En los últimos años se habla mucho y menciona en las páginas de internet con contenido técnico de HTML5.
Para los que no tienen muchos conocimientos técnicos, no comprenderán que significa, qué importancia tiene y en la práctica cual es la diferencia con otras especificaciones como HTML4 o XHTML.
Tratamos en este artículo de explicarlo de forma sencilla y de enfatizar en las ventajas.
Usamos muchos ejemplos prácticos para poder comprender los principales cambios.


¿Qué es HTML5?


HTML es el lenguaje usado para escribir las páginas web, describe la estructura y el contenido usando solo texto y lo complementa con objetos tales como imágenes, flash y otros.
Los archivos así creados son guardados con la extensión de archivo HTM o HTML.
Su estructura se compone de etiquetas o tags entre las cuales van insertados los diferentes elementos que componen la pagina como son los bloques de texto, scripts y la ruta a la ubicación de archivos externos como imágenes y otros archivos multimedia. Al navegador cargar dichos archivos representa todos los elementos en ella de forma adecuada.
Existen varias versiones o especificaciones de HTML, son las siguientes:
• HTML la primera especificación de 1991
• HTML 3.0 propuesta por el recién formado W3C en 1995
• HTML 4 1999
• XHTML 2002
• HTML5 usándose actualmente pero aun en desarrollo
HTML5 surge como una evolución lógica de las especificaciones anteriores y por la necesidad de lograr los siguientes objetivos:
✔ Lograr que la información, y la forma de presentarla estén lo más separadas posible.
✔ Resumir, simplificar y hacer más sencillo el código utilizado.
✔ Un lenguaje que haga las páginas compatibles con todos los navegadores web, incluyendo los de los teléfonos móviles y otros dispositivos modernos usados en la actualidad para navegar en Internet.
✔ Eliminar restricciones que hagan el código más popular y asequible


Principales estándares en el lenguaje HTML


HTML4

Posiblemente el lenguaje mas usado en las paginas de Internet es el HTML4, a pesar de estar ya casi obsoleto debido a sus limitaciones.
Muchos CMS (software hechos para crear de forma fácil paginas web en Internet), están diseñados para crear las paginas usando dicha especificación, por lo que se siguen sumando muchas de ellas a los millones acumuladas en los servidores de Internet.
Una página escrita en HTML4 puede ser que se muestre de forma diferente en distintos navegadores, o que no se muestre en lo absoluto.
Es imposible representar en dicho lenguaje multitud de caracteres especiales como los Unicode, que son tan comunes en las páginas de este sitio.

XHTML

Después del HTML4 surge el XHTML en dos versiones, Transitional y Strict, lenguaje desde sus inicio considerado de transición y de uso temporal, no obstante representa un adelanto enorme respecto a las posibilidades que introduce, limitado siempre al tratar de mantener la compatibilidad con la especificación anterior.
Es más ligero y compatible con cualquier navegador, su desventaja es que posee muchas restricciones, por lo que muchos no se habituaron fácilmente, al salto que representó su introducción y aun siguen atrapados en el lenguaje anterior.
La mayor parte de las páginas de este sitio han sido escritas usando este lenguaje, desde hace un tiempo acá todas las que se crean. utilizan HTML5.

HTML5

Finalmente llega HTML5, recoge todas las ventajas que introdujo el XHTML y elimina bastante restricciones y limitaciones.
Es más ligero al ser más sencillo y simple el código, lo que permite que las paginas escritas en este lenguaje carguen mas rápido en el navegador.
Si aun no fuera suficiente, introduce infinidad de opciones que hasta ahora estaban vedadas a las páginas web, como insertar directamente video (no flash), música, y casi cualquier elemento.
Si te interesa el posicionamiento de tu pagina en Google, debes saber que una pagina escrita en este lenguaje es priorizada por el buscador, respecto a otras con el mismo contenido pero escritas usando otros lenguajes.


Diferencias del código de HTML5 con lenguajes anteriores


Solo algunas de las diferencias más notables son las siguientes:
✔ No es necesario el cierre de las etiquetas img, br, hr, input, etc.
Por ejemplo:
<br /> ahora se sustituye por: <br>
<hr /> por: <hr>
<img src=""……/> por: <img src=""……>
<input …./> por: <input ….>
✔ Se puede usar tanto minúsculas como mayúsculas en el código a diferencia del XHTML que solo admite minúsculas.
✔ El Doctype o declaración del documento está completamente minimizado, en HTML5 solo es necesario emplear:
<!DOCTYPE html>
✔ Introduce nuevos marcadores para sumarlos a los existentes <div> en usos específicos, por ejemplo: <nav>, <footer>, <audio>, <video>, etc.


Elementos obsoletos en HTML5


Un breve vistazo a los elementos que ya no se pueden emplear en el código de las páginas en HTML5 y los nuevos que se introducen.
Más información sobre las características de cada uno, puedes encontrarlas en forma detallada en las páginas especializadas cuyos vínculos están al final de este artículo.
acronym, applet, basefont, bgsound. big. blink, center, dir, font, frame, frameset, isindex, listing, marquee, nobr, noembed, noframes, plaintext, s, spacer, strike, tt, u, wbr, xmp

Todos los elementos que admite HTML5

a, abbr, address, area, article, aside, audio, b, base, bb, bdo, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, command, datagrid, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, link, map, mark, menu, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, ruby, samp, script, section, select, small, source, span, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, ul, var, video

¿Por qué usar el lenguaje HTML5 en las paginas web?


Escribir páginas usando HTML 5 nos brinda varios beneficios, por ejemplo:
✓ Al ser el código más sencillo y simplificado, cargan más rápido las páginas en el navegador.
✓ Las páginas y los elementos que contienen, se ven perfectamente en todos los navegadores. La gran mayoría de los navegadores de los teléfonos Smartphone y las tabletas, son compatibles con HTML5, si posees uno de estos dispositivos puedes comprobarlo, accediendo con él a la siguiente página: Detector e identificador de dispositivos móviles
✓ Los plugins, widgets y botones que ofrecen los desarrolladores de las redes como Facebook, Twitter y otras, escritos en HTML 5 funcionan excelentemente, con más opciones que los clásicos en XHTML o que los iframes.
✓ Es posible insertar directamente videos en las páginas sin tener que acudir a los iframes o usar la etiqueta object.
✓ HTML 5 incluye etiquetas orientadas principalmente a los buscadores, para facilitarles comprender el contenido de las páginas, lo que nos beneficia, por ejemplo: header, footer, article, nav, etc.
✓ Permite la Geolocalizacion del usuario.
✓ Otras de las razones es el empleo del microformato en las páginas web, que algunos son totalmente incompatibles con otros lenguajes por lo que no validan correctamente a no ser que se use HTML5.
Todavía HTML5 no es un estándar aprobado por el W3C, aunque se puede validar correctamente las páginas usando el Validador W3C de este organismo.
Validar el codigo HTML5 de las paginas en el validador del W3C
Lee más información detallada sobre cómo usar el validador del W3C para comprobar el código HTML y CSS de las páginas: Como validar y comprobar el código HTML y CSS de las páginas web
Desgraciadamente los grandes CMS de la red como Wordpress, Blogger u otros y programas para la PC, aun no dan la opción de crear páginas en este formato, pero si posees un sitio web al que puedes subir las paginas manualmente, puedes crear algunas para aprovechar los beneficios que admite solo este lenguaje.


Que es el microformato y que son los marcadores o snippets


Los lenguajes de marcado es una forma agregarle contenido en forma de texto al código HTML, que pueda ser significativo para el usuario.
Tradicionalmente se han usado microdata, microformato y RDFa, recientemente Google con los otros principales buscadores como Yahoo y Bing, han llegado a un consenso para decidirse por el desarrollo del microformato, de forma tal que las páginas que incorporen contenido en ese formato, sean compatibles al usar cualquier buscador.
schema.org es donde Google ha centrado su objetivo, el uso de este estándar permite a los usuarios agregar y crear marcadores, también conocidos como snippets enriquecidos, similar a los widgets, en las páginas de acuerdo al tema del que traten.
Algunos ejemplos:

• Es posible usando marcadores de schema.org, que en los resultados de las búsquedas, una página que incorpore en un marcador una pequeña imagen relacionada con el contenido y una descripción, resalte sobre las otras páginas que solo ofrecen el texto tradicional. Esto permite que el que utilice este sistema en sus páginas, tome ventaja de manera significativa sobre otras que ofrezcan un contenido similar.

• Otro ejemplo práctico es el botón +1 de Google, algo similar al Me Gusta de Facebook, pero que promete agregarle funcionalidades muy provechosas para los que publican contenido.

• Ya están disponibles snippets para insertar en páginas con contenido de música, video, ventas, recetas de cocina, que traten de celebridades, etc. todos facilitan que el usuario pueda saber rápidamente si la página tiene la información que le interesa, pues en los resultados de las búsquedas mostrarán un preview o muestra del contenido.
Mas información en: www.google.com/support/webmasters
Schema.org admite marcadores para todo tipo de contenido, desde libros, restaurantes, películas, organizaciones, etc. todas serán admitidas por Google y otros buscadores de forma gradual.
Mas información sobre todos los marcadores: schema.org
Para aprovechar todas estas opciones es necesario usar HTML5.


Ejemplos prácticos del uso de HTML 5


Ejemplos del código necesario en dos declaraciones, XHTML y HTML5


En XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="es" />
<title>Código necesario para una página en XHTML</title>

En HTML5
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Código necesario para una página en HTML5</title>


Ejemplo del código para crear una sencilla página en HTML5


Copia en siguiente código y pégalo en el Bloc de notas, guarda el archivo con el nombre: pagina.html.
Contiene varios comentarios en los que se explica algunas de las funcionalidades nuevas del HTML5. Los comentarios tienen el siguiente formato:
<!--Esto es un comentario-->


Usar la Geolocalización en HTML 5


La Geolocalización permite al desarrollador detectar la ubicación del usuario, lo que pude ser usado con fines diferentes, al mismo tiempo el usuario puede conocer su ubicación exacta con el navegador, sin tener que acudir a otras aplicaciones.
Esta característica es más efectiva en dispositivos móviles, más aun si estos poseen GPS.
Un ejemplo de su uso puedes verlo en la siguiente página: Ver la ubicación y la localización que ofrece el GPS
Más información: Códigos para usar la Geolocalización en el navegador web.

Solucionar conflictos al validar HTML5


¿Como validar los formularios en HTML5?


Para que validen correctamente los formularios en HTML5, los elementos INPUT que contengan el atributo NAME se deben encerrar en un contenedor DIV, por ejemplo:
<form method="get" action="http://www.google.com/search">
<div>
<input type="text" name="q" value="">
<input type="submit" name="" value="Buscar">
</div>
</form>
Los atributos: "size" y "maxlength" ya no se pueden utilizar, su función se realiza usando "width" en CSS.

¿Como validar las tablas en HTML5?


Los siguientes atributos ya no se pueden usar en el marco de las tablas: border, cellpadding, cellspacing y width.
En el caso de border y width se deben especificar en el estilo CSS, los otros dos no validan ni usándolos en CSS, su efecto de consigue usando PADDING.
Hazlo como en el siguiente sencillo ejemplo:
<table class="tabla">
<tr><td>celda1</td><td>celda2</td></tr>
<tr><td>celda3</td><td>celda4</td></tr>
</table>

<style type="text/css" media="screen">
.tabla{width:400px;border-collapse:collapse;}
.tabla td{padding:6px;border:1px solid black;}
</style>

¿Cómo validar los iframe en HTML5?


Los siguientes atributos ya no se pueden usar en iframe: scrolling, frameborder, marginwidth y marginheight.
Es necesario especificar border y margin en CSS.
Para evitar el scrolling puede usarse overflow-x:hidden;overflow-y:hidden; en CSS.
Se introduce el uso de: seamless que establece que el iframe debe lucir como si formara parte de la página, se usa: seamless="seamless".
Se mantiene el uso de los atributos: width, height y src.

Como usar object para insertar flash y otros objetos en HTML5


El elemento object permite insertar películas flash, audio, video, PDF, etc. Ya no son válidos los siguientes atributos: align, classid, codebase, codetype, standby, border.
Es posible emplear: data que especifica la URL del archivo, type, width y height. El parámetro <param> es necesario para asegurar compatibilidad con Internet Explorer
Usa el siguiente ejemplo para insertar una película flash.
<object type="application/x-shockwave-flash"
width="740" height="470" data="../flash/horoscopo.swf">
<param name="movie" value="../flash/horoscopo.swf">
</object>

Navegación interna en la misma página en HTML5


Para crear links que permitan la navegación interna en una página es necesario usar un DIV para anclar el destino. Por ejemplo:
<a href="#abajo">Bajar</a>
<a id="abajo"></a>
<div id="abajo"></div>

Caracteres que no se pueden emplear en HTML5


Los caracteres de la codificación ASCII extendida (Latin-1 Supplement) que se encuentran en el rango comprendido del 128 al 159 (0x80 al 0x9f) se consideran de control y por lo tanto lo validan en HTML5, al usar Windows code page 1252, por lo que es necesario reemplazarlos por su correspondiente valor Unicode.
Por ejemplo:
Para mostrar el signo bullet: • (&#149;) hay que utilizar &#8226;
Para mostrar el signo trade mark: ™ (&#153;) hay que utilizar &#8482;

Para aclarar cualquier duda mira el código fuente de esta misma página, por supuesto, es HTML5.

Infografía, las ventajas de usar HTML5 en las páginas web

Imagen que detalla de forma sencilla las principales ventajas de usar esta especificación. Ventajas de usar HTML5 en las páginas web

Características de HTML5 explicadas en un lenguaje sencillo y ameno

DIVE INTO HTML5

Más información y todas las especificaciones sobre HTML5

www.whatwg.org
www.w3.org

Páginas relacionadas