Los nuevos tags de HTML5
Hace un par de meses me dí a la tarea de actualizarme y, entre otras cosas, estudiar a fondo lo nuevo de HTML5 y CSS3. En
esta y proximas entradas comentare lo aprendido a manera de resumen y repaso de ese auto-curso que me impartí.
Html5 incorpora nuevos tags, etiquetas, dentro de su definición. Dichas etiquetas designan nuevos elementos estructurales cuya
idea es mejorar la forma en que se escribe el código de una página haciendo que la estructura del documento este dividida en
regiones logicas de acuerdo al contenido.
Los nuevos tags son:
- <section> Define una región o sección de una página.
- <nav> Define una región de navegación, es decir un área de menú o enlaces dentro de la página.
- <article> Define una region cuyo contenido es una pieza completa de informacion o datos, como un artículo.
- <header> Define una cabecera, puede ser de página, de sección o de artículo.
- <footer> Define un pie de página, igual que la cabecera, puede aplicar a diferentes tipos de regiones.
- <aside> Define una sección con información complementaria o relacionada.
- <meter> Define un valor dentro de un rango.
- <progress> Es un control que muestra un progreso en tiempo real.
Hace algunos añitos se utilizaban tablas para estructurar el contenido en las paginas web, en ocasiones incluso para
el diseño, luego gracias al CSS se cambio a la estructuración basada en el uso de elementos <div>. Lo cual fue
una mejora ya que un uso excesivo de TABLEs, TRs y TDs (muchas ocasiones en forma anidada), muy extendido por cierto, hacía muy
complicada la lectura, comprensión y mantenimiento del código de miles de sitios web.
Html5 incorpora los nuevos tags para facilitar la estructuración del contenido en secciones o regiones de acuerdo a lógica
del documento. Evidentemente se pueden seguir utilizando DIVs, TABLEs (y el resto de tags como P, SPAN, etc) para crear paginas, pero la idea
es mejorar la estructuración usando las nuevas etiquetas. Así mismo las nuevas tags se pueden complementar por los
atributos Id y Class para el uso de CSS o para facilitar el entendimiento del documento.
Como ocurre siempre con nuevas tecnologias, estandares o protocolos, inicialmente no hay un soporte completo en la tecnología
existente sino que ha de pasar un tiempo hasta la publicación de nuevas versiones. En el caso de las novedades de Html5 los navegadores
web tienen soporte parcial para el nuevo estandar. Para las tags listadas la *situación es como se
muestra a continuación, se usan las siguientes abreviaturas: C=chrome, F=Firefox, S=Safari, O=Opera e IE=Internet Explorer cada una
seguida por un numero de versión mínimo.
- section, nav, article, header, footer, aside Soportados por C5, F3.6, S4, O10 e IE8.
- meter Soportado por C5, F3.5, S4, O10.
- progress No Soportado al momento que hice el curso. Mientras escribo esta entrada C16 ya tiene soporte.
*Los datos de la lista anterior son basados en mi **fuente de
consulta, pero según mi experiencia en IE8 las tags no son soportadas. Para este caso se puede recurrir a javascript usando
la funcion createElement del objeto document de la siguiente forma:
<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement("nav");
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("article");
</script>
<![endif]-->
El nuevo elemento aside puede ser erroneamente interpretado como si se tratase de una barra lateral que se utiliza
en muchas paginas, no es así, por lo menos no en un sentido estricto, es una región para información complementaria o
relacionada que se posiciona como cualquier elemento en bloque, si se desea por medio de CSS se puede colocar como barra lateral pero por si
misma no es su forma de funcionar.
Es importante comentar sobre el doctype de las paginas en Html5, los que hayan trabajado en html4 sabran lo complicado que puede llegar
a ser una declaración del doctype, algo así como:
Pues bien, en Html5 el doctype es tan simple como:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Pues bien, en Html5 el doctype es tan simple como:
<!DOCTYPE html>
De acuerdo a Html5, una página se puede estructurar de la siguiente forma, al pasar el mouse sobre las partes de la página
verán el elemento de que cual se trata, mas abajo de la figura la explicacion y el código fuente.
Mi Página en HTML5
Meter:
Progress:
Los header son aquellos con fondo amarillo y texto en rojo; El nav fondo azul claro y texto en blanco;
Las section en fondo verde claro; Los article en fondo verde muy claro y borde verde oscuro; El aside en
fondo rojo y texto amarillo; Los footer en fondo verde oscuro y texto blanco.
Noten como hay section anidadas dentro de los article y a su vez cada article tiene sus propios
header y footer. Si estan viendo esto con chrome v16 verán el meter y el progress como controles
graficos, si estan usando un navegador o una version sin soporte solo veran los valores (Meter: 100 y Progress: 2)
El codigo fuente es el siguiente:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de uso de tags Html5</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<!--[if lt IE 9]>
<script type="text/javascript" >
document.createElement("nav");
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("article");
</script>
<![endif]-->
<style type="text/css">
header { background-color:yellow;padding:3px 5px;margin-bottom:4px;color:red; }
h3 { text-align:center;margin-bottom:7px; }
nav { text-aling:center;background-color:rgb(120,140,255);color:white;width:80%;margin:1px auto; }
nav a { color:white; }
section { background-color:rgb(50,255,50);padding:3px 23px; }
section.meters { width:86%;margin:9px auto;padding:11px;background-color:rgb(245,245,245);text-align:center; }
article { background-color:rgb(185,255,185);padding:5px 27px;border:ridge 3px rgb(0,165,0);margin:5px; }
aside { float:right;background-color:rgb(255,40,40);width:4em;color:yellow;text-align:center;padding:2px;margin:0 5px; }
article section { background-color:rgb(50,255,50);padding:3px 9px; }
footer { clear:both;background-color:rgb(0,75,0);padding:3px 9px;color:rgb(238,236,238);text-align:right;width:92%;margin:0 auto; }
/*Para un correcto despliege en IE a veces es necesaria la siguiente regla. */
header, nav, section, aside, footer, article { display:block; }
</style>
</head>
<body>
<header id="cabecera_principal" title="header">
<h3><a name="mipaghtml5">Mi Página en HTML5</a></h3>
<nav title="nav">
Menu: <a href="#mipaghtml5">Principal</a>
<a href="#mipaghtml5">Articulos</a>
<a href="#mipaghtml5">Contacto</a>
</nav>
</header>
<section id="contenido_principal" title="section">
<article id="article_1" title="article">
<header title="header">
New Tags in Html2
</header>
<aside id="inf_comp" title="aside">
Ext inf or data
</aside>
<section title="section" class="_article_content">
<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis ...</p>
</section>
<footer title="footer">
By MetalPower, on Feb2012.
</footer>
</article>
<article id="article_2" title="article">
<header title="header">
Site Statistics
</header>
<section title="section" class="content">
<section class="meters" title="section">
Help us to reach one thousand visits by month... <br />
Meter: <meter title="Monthly Visits Average" value="100" min="0" max="1000"> 100 </meter>
</section>
<section class="meters" title="section">
Help us to reach 20 comments in every article... <br />
Progress: <progress title="Max comments reached" value="2" max=20><span>2</span></progress>
</section>
</section>
<footer title="footer">
By MetalPower, on Jan2012.
</footer>
</article>
</section>
<footer title="footer">
El pie de pagina, copyrigth, avisos legales, etc...
</footer>
</body>
</html>
En próximas entradas repasare otras novedades de Html5, atributos, formularios, audio, video, canvas y funciones.
**Fuente: HTML5 & CSS3, autor Brian P. Hogan, editorial Pragmatic Bookshelf.
Muy interesante...
ResponderBorrarComienzo a conocer HMTL5 y está genial tu publicación, gracias!
Gracias por tu comentario y espero sigas visitando mi blog.
ResponderBorrar