HTML5
HTML5
HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un
termino de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5,
CSS3 y nuevas capacidades de Javascript.
termino de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5,
CSS3 y nuevas capacidades de Javascript.
Nuevas etiquetas de HTML5
HTML4 y HTML5 son 100% compatibles entre sí. Todo el código que tienes en HTML normal seguirá
funcionando sin problemas en HTML5. Para empezar a usar HTML5 lo único que tienes que hacer es
colocar este DOCTYPE4 antes de la etiqueta <html>:
<!DOCTYPE html>
<header>
Hacer cosas como <div id=”header”> es un poco estúpido cuando el 99% de los proyectos web
tienen una cabecera. <header> está diseñada para reemplazar la necesidad de crear divs sin significado
semántico.
Hacer cosas como <div id=”header”> es un poco estúpido cuando el 99% de los proyectos web
tienen una cabecera. <header> está diseñada para reemplazar la necesidad de crear divs sin significado
semántico.
<hgroup>
Muchos headers necesitan múltiples títulos, como un blog que tiene un titulo y un tagline explicando el
blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar
otro h1 en el sitio.En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.
Muchos headers necesitan múltiples títulos, como un blog que tiene un titulo y un tagline explicando el
blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar
otro h1 en el sitio.En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.
<nav>
Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de navegación principal.
Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>.
Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de navegación principal.
Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>.
<section>
Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts.
En un video de youtube, habría un section para el video, uno para los datos del video, otro para la zona
de comentarios.
<article>
Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article. En
un post del blog, el post y cada uno de sus comentarios sería un <article>.
<aside>
Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un
blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el área de indicadores económicos.
Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un
blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el área de indicadores económicos.
<footer>
Este es obvio. Es el pie de página y todo lo que lo compone.
Atención <div> no está muerto:
Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesites
una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico. Sólo
usa las etiquetas semánticas de HTML5 donde sean necesarias.
Este es obvio. Es el pie de página y todo lo que lo compone.
Atención <div> no está muerto:
Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesites
una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico. Sólo
usa las etiquetas semánticas de HTML5 donde sean necesarias.
Ejemplo de blog hecho con HTML5
<hgroup>
<h1>El blog de Roberto Garcia</h1>
<h2>Este es el blog de Mejorando la web</h2>
</hgroup>
</header>
<nav>
Aquí va la botonera de navegación
</nav>
<section>
<article>Aquí va un post, con su titulo en h2</article>
<article>Aquí va un post, con su titulo en h2</article>
<article>Aquí va un post, con su titulo en h2</article>
</section>
<aside>
Barra lateral con cosas que nadie lee, como cuentas de twitter,
facebook, posts viejos, etc.
</aside>
<footer>
Pie de pagina, amenazas de copyright, etc.
</footer>
Las etiquetas nuevas importantes de HTML5
Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y buen desarrollo
web, no son la razón por la que todo el mundo habla de HTML5. Video, audio y animación vectorial
están en la lista de prioridades y en la boca de todas las personas que evangelizan su uso. Específicamente,
las nuevas etiquetas son:
web, no son la razón por la que todo el mundo habla de HTML5. Video, audio y animación vectorial
están en la lista de prioridades y en la boca de todas las personas que evangelizan su uso. Específicamente,
las nuevas etiquetas son:
<video>
Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta codecs diferentes
de video, lo que hace necesario recodificar un video en múltiples codecs. En un futuro capítulo
hablamos un poco del drama que este tag está generando.
<audio>
Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también
depende del navegador.
<input *>
Input ya existía como la etiqueta para insertar cajas de texto y botones. Ahora es más poderosa, con la
capacidad de insertar cajas tipo “email” que se autovalidan, calendarios tipo “date”, sliders, números,
entre otras.
<canvas>
Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript.
<svg>
Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash. Todo basado en el estándar abierto SVG (Scalable Vector Graphics), derivado de XML.
No hay comentarios:
Publicar un comentario