Con este primer artículo de introducción a HTML5, presentamos una serie de artículos a modo de curso cuyo autor, al que agradezco su interés por colaborar en el blog, es Roberto. Si ya sabes algo puedes echar un vistazo al artículo Ejemplos en HTML5: Almacenamiento Web, SQL y WebSocket.

Un poco de historia

Como bien indica su propio nombre es la 5 versión del estándar de WWW (World Wide Web), el W3C a estado años trabajando en este nuevo estándar despuesdespués del XHTML, el cual se puede denominar como uno de sus fracasos, al tener un lenguaje muy estricto, y no ser compatible con la mayoría de las webs publicadas en el momento del lanzamiento, esta nueva versión sí es compatible con todas las anteriores, ademas de incorporar nuevas mejoras, algunas de las novedades que mas ruido han hecho ha sido la desaparición del case sensitive, con lo que podemos escribir por ejemplo la etiqueta ID de un div en mayúsculas o minúsculas y que los navegadores lo reconozcan sin producir error, aun así se recomienda seguir unos estándares, como son el de escribir todos los elementos en minúsculas, y sus valores entre comillas dobles “”, aunque en esta versión sean validas las comillas simples ”; también se recomienda cerrar todas las etiquetas, aunque no sea obligatorio como en XHTML; así mismo también incluye nuevas funciones como la reproducción de vídeo y sonido, y algunas etiquetas nuevas, para ello hicieron un estudio sobre el nombrado de etiquetas de las webs mas famosas, y casi todas tenían una barra lateral, llamada aside,un encabezado llamado header, y un pie llamado footer, así como las barras de navegación nav; y un largo etc.



¿Por dónde empezar?

Lo primero que debemos saber es que HTML sea cual sea su versión no es un lenguaje de programación, tan solo es un lenguaje de marcas, se usan una serie de etiquetas estandarizadas, HTML se usa para crear la estructura de una web, y se ha puesto de moda para las aplicaciones móviles, gracias a Frameworks como PhoneGap a esta moda se a sumado Mozilla, con su S.O. Firefox OS; así que como podemos comprobar es casi obligatorio como mínimo conocerlo sea cual sea la plataforma a la que queramos desarrollar; como he dicho nos sirve para dar la estructura a una web (el esqueleto) después podremos darle colores, formas y organizarlo con las hojas de estilo en cascada (CSS) y se recomienda usar su ultima versión CSS3, aunque esta es otra batalla de la que hablaremos en otra ocasión; ahora que sabemos que es, y para que sirve, es el momento de conocer la etiqueta que debe aparecer en cualquier documento HTML5.


Con esta etiqueta decimos que el documento es una pagina web HTML5; como vemos es muy sencilla, incluso nos la podemos aprender a diferencia de su antecesor HTML4.


ó

según fuera tradicional o estricto, no vamos a entrar en las diferencias ya que esto hoy en día a pasado a la historia.

Todo el que empieza en esto esta deseando ir al código escribir su primera pagina web y verla funcionando. Esto se puede lograr con una estructura básica como la siguiente:




    El contenido de la pagina  


A esta estructura le podemos dar “vida” simplemente abriendo nuestro blog de notas, y pegándolo, dándole el nombre que deseemos y la extensión html. Después de eso si la abrimos con cualquier navegador podemos verla funcionando.

Ahora os explicare qué es cada etiqueta, la primera: el Doctipe, ya la conocemos, seguidamente tenemos una etiqueta <html>; que cierra al final del documento </html> podemos intuir que hay que incluir dentro todo el contenido html y justamente es así como funciona debemos escribir dentro todo el contenido de nuestra página, la siguiente etiqueta es el <head> allí debemos incluir los enlaces a nuestras hojas de estilo, etiquetas de metadatos (mas adelante veremos que son y para que sirven), el titulo de la página, este se incluye dentro de las etiquetas ** ** y como vemos en la imagen superior lo que escribamos aquí va a aparecer en la pestaña de nuestra pagina; se debe cerrar con </head>; seguidamente nos encontramos con <body> aquí es donde escribiremos todo el cuerpo de nuestra web.

Estas son las etiquetas básicas, el body podemos complicarlo todo lo que queramos o necesitemos añadiendo tantas etiquetas <div> </div> conocidas como divisiones, o capas, y dentro de cada una meteremos el contenido que deseemos, imágenes, texto, vídeo…

Etiquetas de HTML5

Las etiquetas mas usadas son:

Índice

</body>