Home Tips HTML & CSS Etiquetas Html5 que ya podemos usar

Etiquetas Html5 que ya podemos usar

Jueves, 18 Noviembre 2010 | Escrito por Jhon Marreros Guzman

ico Detalles Tip - Nivel : Intermedio, Formato : texto y video.
En este Tip veremos como aprovechar características de html5 relacionadas con las etiquetas en nuestros proyectos, con la seguridad de que funcionarán en todos los navegadores, incluso IE6

 

En el siguiente video se muestra a través de un ejemplo cómo realizar las modificaciones a un archivo html clásico para que funcione con las etiqueta html5

Suscríbete a monitojoomla en youtube para que puedas ver todos los videos publicados

 

Etiquetas Simplificadas

En el ejemplo, las etiquetas doctype, html y meta han sido simplificadas, para los archivos de estilos y para los archivos de scripts no es necesario colocar type

<!DOCTYPE html >
<html lang="es-es">
<head>
 <meta charset="utf-8" />
 <title>Pagina ejemplo html5</title>

 <link rel="stylesheet" href="/css/estilos.css"/>
 <script src="/js/script.js" ></script>
</head>

 

Compatibilidad IE

Se hace referencia a una librería de google, asi como también se tiene que definir que los elementos se comporten como block

<!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
 
 <style>
 header,nav, section, article, footer{display:block;}
 </style>

 

Nuevas Etiquetas

En este ejemplo utilizamos las siguientes : header, nav, section, article, footer, para ver una lista completa visitar el siguiente link

 

Conclusión

Html5 tiene características muy interesantes alguna de las cuales ya deberíamos empezar a utilizar como la que se discute en este artículo, sin necesidad de preocuparnos por la compatibilidad en los navegadores antiguos o IE.

 

 

 

Comparte este postDel.icio.us! Google! Live! Facebook! Twitter! Joomla Free PHP
Comentarios (7)
  • 20-11-2010 FELIPERGIEZA
    avatar
    Excelente videotutorial y muy interesante html5
    Responder
  • 21-11-2010 maccabi
    avatar
    ¿La etiqueta section viene a sustituir a la etiqueta div?

    Porque al hablar de semántica resulta conveniente. Y quiero suponer que puedo tener esta etiqueta dentro de las etiquetas header,footer,nav o no es posible.
    Responder
  • 21-11-2010 Jhon Marreros
    avatar
    Hola maccabi,

    La etiqueta div no desaparece, pero su uso debería ser excluido de temas estructurales, es decir es preferible semanticamente utilizar:

    <section id="parte1"> en lugar de <div class="section" id="parte1">

    Lee el siguente post:

    http://blog.whatwg.org/is-not-just-a-semantic

    Por otro lado, si es posible tener section dentro de footer, header incluso dentro de section, todo depende de cómo quieras estructurar tu web, en ese sentido html5 es flexible.

    Saludos.
    Responder
  • 22-11-2010 maccabi
    avatar
    Gracias por responder a mi duda.

    Tambien existen otros elementos que por lo que he leido ponen en peligro al flash como son el canvas,video y audio.

    Comento esto así porque regularmente creo que con flash se consigue mostrar informacion de esta manera.

    Pero el canvas para utilizarlo requiere javascript, entonces esto significa que los futuros navegadores ya no permitiran deshabilitarlo.
    Responder
  • 23-11-2010 Jhon Marreros
    avatar
    Hola maccabi

    Cierto, existen otros etiquetas como el canvas y video y audio, pero les falta ser refinadas para que compitan con flash.

    Por ejemplo Youtube tiene versión html5 con la etiqueta <video>, pero conserva todavia la versión en flash del reproductor de video ya que tiene más funciones.

    Para algunas funciones avanzadas se requerirá javascript y será necesario que los navegadores los tengan habilitados (dificilmente alguien trabaja con esta opción deshabilitada actualmente), pero claro tiene que ser un tema de "progressive enhancement " o mejora progresiva en el uso de javascript, es decir con javascript mejoras la experiencia de usuario, pero la funcionalidad básica debe seguir operativa, así javascript no se encuentre habilitado.

    Saludos.
    Responder
  • 11-10-2011 marcelo
    avatar
    excelente tutorial che impresionante
    se entiende todo
    me gustaria saber que editor html estas usando esta muy bueno te agradeceria que me lo digas
    gracias
    Responder
  • 20-10-2011 Jhon Marreros Guzmán
    avatar
    Hola Marcelo

    Es Coda para Mac, pero también son buenos textmate, smultron, etc.
    Para windows puedes usar Notepad++

    Saludos.
    Responder
Escribir comentario
Gravatar enabled