Lo que se viene: HTML 5

21/ago/2007 18

Por primera vez en este milenio, nuevos elementos son agregados a HTML. Nuevas etiquetas de estructura, nuevos elementos de línea, nuevas maneras de agregar objetos y nuevos elementos interactivos son algunas de sus promisorias bondades.

El desarrollo de HTML quedó estancado en 1999 con HTML 4. Desde ahí hasta ahora, la guerra de browsers no ha terminado: IExplorer con una gran parte de la cancha cubierta y Firefox y Opera dando la batalla por ganarse su merecido espacio. Desafortunadamente han dejado de lado una buena parte de los consejos de la W3C sobre los estándares, y se han esforzado en ofrecer tabs, password managers y lectores de RSS integrados, aparte de agregar skins y temas customizables. Era hora de hacer algo por el fondo mismo: el código fuente.

Viendo que nada pasaba por parte de la W3C (quienes siguen enfocados con SVG, XForms y MathML), recientemente, 3 de los mayores fabricantes de browsers: Apple, Mozilla y Opera se unieron para desarrollar una versión mejorada del clásico HTML. Más reciente aún, la W3C despertó y escuchó al grupo y la nueva HTML 5 porfin ve una luz.

Pero no se preocupen, no han reinventado la rueda.

Permanecen nuestros viejos amigos <p>, <div> y <strong> pero se incluyen nuevas etiquetas que refuerzan la semántica: <section>, <header>, <footer> y <nav>, entre otros. Nada de otro mundo, pero muy útiles. Seguro que te preocupa si Netscape 4 aún reconocerá esos nuevos elementos. Pues esto fue pensado para ser degradable, o sea, ser reconocido por versiones antiguas de navegadores. Si no, dificilmente se haría la migración.

Estructura

La idea es que a través de nuevas etiquetas, las que no asustan para nada ya que tienen nombres muy obvios, construímos nuestros sitios antes llenos y colapsados de div’s. Ahorraremos bastantes ahora. Con el siguiente ejemplo, recrearemos lo que usualmente hacemos hasta ahora:

<html>
     <head>
          <title>Ejemplo</title>
     </head>
     <body>
          <div id="contenedor">
               <div id="encabezado">
                    <h1>Titulo de este ejemplo</h1>
               </div>
               <div id="contenido">
                    <div id="menu">
                         <ul>
                              <li><a href="" title="Ir a Uno">Uno</a></li>
                              <li><a href="" title="Ir a Dos">Dos</a></li>
                              <li><a href="" title="Ir a Tres">Tres</a></li>
                         </ul>
                    </div>
                    <div id="columna">
                         <p>Proin at eros non eros.........</p>
                    </div>
               </div>
               <div id="pie">
                    <p>copyleft</p>
               </div>
          </div>
     </body>
</html>

Bastantes div’s para una página simple, con un contenedor donde cabe mi encabezado, mi contenido con un menú con listas y un pie de pagina. A través de CSS se le da luego el posicionamiento y los estilos, pero esto no es importante ahora. Me interesa la estructura, el esqueleto.

Ahora, cómo sería con HTML 5:

<html>
     <head>
          <title>Ejemplo</title>
     </head>
     <body>
          <header>
               <h1>Titulo de este ejemplo</h1>
          </header>
          <section>
               <nav>
                    <ul>
                         <li><a href="" title="Ir a Uno">Uno</a></li>
                         <li><a href="" title="Ir a Dos">Dos</a></li>
                         <li><a href="" title="Ir a Tres">Tres</a></li>
                    </ul>
               </nav>
               <article>
                         <p>Proin at eros non eros.........</p>
               </article>
          </section>
          <footer>
               <p>copyleft</p>
          </footer>
     </body>
</html>

Ningún div. En vez de utilizarlos (son etiquetas separadoras, lineal, y no tienen significado semántico) estamos reemplazándolas por nuevas etiquetas que sí le dan significado a nuestra estructura. ¿Un acercamiento a la Web 3.0?

Revisemos estas nuevas etiquetas:

  • <header> El encabezado; no confundir con el aún vigente y fiel <head>.
  • <nav> Navegación, una colección de links a otras páginas.
  • <section> Como un capítulo en un libro, puede albergar uno o varios <article>
  • <article> Un artículo.
  • <footer> El pie de pagina, la firma, el email de contacto… enfin.

Media

Video y audio en la web no lo para nadie, pero todo es propietario. Youtube usa Flash, Microsoft usa Windows Media y Apple utiliza Quicktime. Actualmente se utiliza <embed> y <param> al mismo tiempo para insertar un swf, lo que hace no validar el HTML. Pero la promesa viene con una etiqueta de video y otra para audio que permite insertarlos independiente del formato:

<video src="video.mov" />
<audio src="../musicas/growl.mp3" autoplay="autoplay" />

Esto es sólo un resumen, se viene mucho más. Ojalá esto permita que se construya una mejor web, para el bien de todos.

Links

Comentarios

  1. xmax [#]

    Increíble, cada día codificar se hace más práctico y divertido. Esperemos, claro, que IE no malogre la fiesta de nuevo. =S

  2. Nova [#]

    Muy bueno, a ver si las empresas se dejan de “mariconadas” y implantan pronto las reglas de las W3C.

    Por cierto, en los 2 ejemplos en el la etiqueta de cierre no sería ?

  3. latejedora [#]

    un buen resumen, sí señor. en mi opinión, estos cambios hacían falta desde hace tiempo, y son cosas que caen por su propio peso: el éxito está asegurado

    ahora, a ver si de esa “entente cordiale” que han formado Apple, Mozilla y Microsoft, sale un mínimo consenso en cómo interpretar el código. El día que eso ocurra, los diseñadores nos ahorraremos el 30% de nuestros dolores de cabeza :)

  4. HTML 5 [#]

    […] Fuente del copy paste CSSLab […]

  5. Arcadio [#]

    muy interesabre la actualizacion… verdaderamente necesaria ya…

  6. CSSLab Admin [#]

    arreglada la etiqueta y agregue mas links si quieren ahondar en la lectura.

  7. Oscar F. [#]

    Yo sabía que hay dos futuros estándares: el HTML 5 que mencionas y el XHTML 2 de W3C. El problema del XHTML 2 es que si está mal escrito toda la página falla y no se muestra nada más que el error amarillo de XML mal formado. Por eso Apple, Mozilla y Opera crean el HTML 5, para que a pesar de haber un error (por ejemplo de un comentario mal formado a propósito) no bloqueara la página por completo. El W3C todavía no acepta el HTML 5. Yo pienso que ellos deberían mejorar su XHTML 2 para evitar la creación de un HTML 5. ¡No al HTML 5!

  8. CSSLab Admin [#]

    Oscar, interesante punto el ttuyo, y entretenido paara uniciar una discusion. el motivo por el q escribi sobre html5 y no xhtml2 es porq lo veo mas factible de ser concreto, ya q la w3c esta hace mucho con lo suyo y por eso las 3 compañias se unieron paraa desarrrollar esta renovacvion del lenguaje. sinceramente veo q es mejor para nosotros q la w3c se una a ellos y pongaa sus estandares, a q vaya contra la corriente y siga con su xhtml, el q no tendra soporte despues de los fabricantes. soy partidario de html5. Saludos.

  9. Buzu [#]

    Ya había oído de html5 antes, Me pregunto No es como ir hacia atrás? Es decir ahora hay XHTML que como lo indica la X es una extencion al viejo e inútil HTML. Apoyo 100% lo que dice Oscar, en cuanto a XHTML 2 aun no se nada, :( pero investigaré
    De cualquier modo no veo mucha diferencia, quizá te ahorres unos cuantos id que de igual modo tendrás que ocupar si quieres manipular el DOM mediante javascript. En cuanto a semántica, claro que HTML5 es mas semántico pero quizá seria mejor implementar esas etiquetas en XHTML.
    Apoyo aquello que por un error en el código el sitio no se muestre bien. Eso nos obliga a poner mas atencion a nuestro trabajo y hacerlo bien, como PHP, si te falta un “;” estas jodido. Seguramente disminuiría mucho esa web basura que sale últimamente gracias a que hacer un sitio es tan sencillo que cualquiera lo puede hacer.
    Veamos que rumbo toma esto.
    Saludos

  10. Buzu [#]

    Algo que se me olvidaba por que usar un div para el menu? div es elemento de bloque al igualq ue ul por lo que es mejor eliminar ese div y usar directamente la ul. ya se que los Divs sirven para agrupar diferentes sec ciones y que por ese lado es razonable usar un div para agrupar el menu y de ese modo quede separado de las otras secciones pero, no es suficiente la ul para separarlo?

  11. netizen [#]

    “”Seguramente disminuiría mucho esa web basura que sale últimamente gracias a que hacer un sitio es tan sencillo que cualquiera lo puede hacer.”” Pues podrá ser basura, pero la magia de la web actual es que cualquiera pueda utilizarla como medio para decir algo… territorio libre de todos y para todos, donde podemos construir nuestras casitas de puertas abiertas que aveces adquieren las dimensiones de toda una institución… mientras más sencillo sea el acceso a este recurso, más gente entrará y todos saldremos beneficiados… la web no solo es el dinero que le deja a un freelance…

  12. netizen [#]

    no me malinterpreten 😉 yo también apoyo el xhtml2 como preferido para el acercamiento a la web semántica (pero no como un filtro de todo aquel que no sea un geek)

  13. Vuarnet [#]

    Excelente artículo, muchas gracias.

    Saludos.

  14. Itákora » Blog Archive » Lecturas recomendadas (5) [#]

    […] Breve introducción a lo que va a ser HTML5 (¡que ya es hora, señores de la W3C!) […]

  15. CSSLab - ¿Ansioso por HTML 5? [#]

    […] he comentado sobre las características de este nuevo estándar, y en este momento nos concentraremos en una maqueta funcional utilizando las nuevas etiquetas y […]

  16. ¿Ansioso por HTML 5? [#]

    […] he comentado sobre las características de este nuevo estándar, y en este momento nos concentraremos en una maqueta funcional utilizando las nuevas etiquetas y […]

  17. Juan Torres [#]

    Esto se llama estar al tanto de lo que se viene. Increible que la única parte que no se cumple hoy (en el 2012) es lo que corresponde a los browsers mas utilizados. Muy bien Jorge !!!

    Y una verdadera lástima que los avances en la implementación de los navegadores sea tan lenta.
    (IE 6, te odiamos !!!)

  18. itákora » Lecturas recomendadas (5) [#]

    […] introducción a lo que va a ser HTML5 (¡que ya es hora, señores de la […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab