banner
hace 4 años
1008 Views

Etiquetas Nuevas Html5

Autor:
banner

 

Hola amigos hoy vamos a ver las NovedadesEtiquetas Nuevas Html5, el ultimo estándar de Html, que simplifica y optimiza el código y permite crear webs con un alto contenido semántico, mediante etiquetas con valor semántico generamos webs mas estructuradas y mejor definidas.

De la misma manera que Html5, ha visto la luz Css3 que también trae espectaculares novedades que van a dar que hablar durante mucho tiempo, estas novedades permiten crear diseños basados en animaciones, en fotografías, etc….

 

Una vez explicados por encima los lenguajes, vamos a meternos en materia..

 

En esta ocasión únicamente veremos las Nuevas etiquetas  Html5 las que nos permitirán estructurar la web sistemáticamente

html5HTML5

Lo primero que vemos que ha cambiado de Html a Html5 es la declaración del documento. Mientras que antes la declaración era larga ya que necesitabas poner cierta información. Ahora se simplifica de manera contundente.

          <!DOCTYPE html>

Simplemente debemos declarar el Html5, y listo, simple no?

 

Después de declarar el documento pasaríamos ha declarar la etiqueta <head>, donde meteríamos todas las etiquetas <meta>, así como los archivo javascript, css, etc….

 

Entrando en el contenido, es decir, en el <body>, Html5 nos trae grandes novedades en forma de nuevas etiquetas, estas ayudan a simplificar la creación de las nuevas webs, así como de darle un valor semántico a las nuevas etiquetas, ya que cada etiqueta iría relacionada semánticamente con su contenido.etiquetas html5

 

Estas nuevas etiquetas crean un vinculo semántico con su contenido, por ejemplo: La etiqueta <header> es la que en Html5 se encarga de agrupar todos los elementos que pertenecen al encabezado de la pagina.

 

Antes de meternos ha explicar uno a uno cada etiqueta vamos enumerar las mas importantes, ya que esta tecnología esta avanzando rápidamente, cada día salen cosas nuevas, así como las compatibilidades con los navegadores mas modernos, también avanzan a pasos agigantados.

 

 header, article, aside, section, footer, nav, hgroup, canvas, audio, video, details, datalist, figure, mark, meter, output, progress, time, etc….

 

La mayoría de estas etiquetas son compatibles con los navegadores mas modernos, si tenéis alguna duda de compatibilidad podéis visitar “findmyIP: Hay encontrareis toda la información sobre Html5 y Css3.

 

 Web findmyIP


En este tutorial vamos a centrarnos en las primeras 5 etiquetas, estas son las que constituyen la maquetación de la pagina web, los bloques con los cuales realizamos la base del diseño.

Estas etiquetas son: header, article, aside, section y footer.

HEADER


<header></header>

Como hemos explicado anteriormente esta etiqueta agrupa a los elementos del encabezado, anteriormente utilizábamos un <div id=”header>


Y ahora en Html5 tenemos ya una etiqueta solo para el encabezado, dándole así a la etiqueta el valor semántico del contenido de la etiqueta <header>.


ARTICLE


<article></article>

Esta etiqueta permite definir secciones

Se suele componer de un titulo y el texto, aunque entre ellos también se podría meter una imagen, animaciónetc….


ASIDE


<aside></aside>

Complementando la etiqueta anterior tenemos aside, y generaría la famosa columna lateral de los Weblogs


SECTION


<section></section>

La etiqueta section equivale a la antigua <div>

La etiqueta <div> todavía se utiliza puesto que a nivel de diseño es fundamental; sobre todo a la hora de maquetar y  estructurar elementos web.

No obstante Html5 nos trae la etiqueta <section>. Esta etiqueta permite crear secciones personalizadas.


Aunque esta etiqueta, no puede agrupar elementos que después vayan a aplicarse a un estilo Css, ni que ejecute ningún script


FOOTER


<footer></footer>

Esta etiqueta agrupa los elementos de el pie de pagina


Estas nuevas etiquetas de Html5 nos permiten maquetar un sitio web básico rápidamente, añadiéndole un alto valor semántico a la web

Con estas etiquetas Html5 aquí expuestas podremos empezar a practicar creando nuestras propias plantillas Html5

 

Sendoa

Sendoa

¡Aúpa! Me llamo Sendoa y soy un apasionado del Diseño y Desarrollo Web.

Fundador de WebSdcStudio.es; mi blog personal, donde expongo diferentes contenidos de ayuda, consejos, trucos, recursos... sobre el mundo del Diseño y Desarrollo Web.
Sendoa

Latest posts by Sendoa (see all)

Articulos Relacionados

Artículos Categorías:
Desarrollo Web · Html5
banner

Deja un Comentario

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

Left Menu Icon
Web Sdc Studio
Right Menu Icon