Nuevas etiquetas que traerá HTML5. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Internet HTML

¡votar!

Nuevas etiquetas que traerá HTML5

Html5 es la nueva versión del lenguaje de programación básico para la web. Actualmente está en fase Beta, aunque ya hay empresas que están desarrollando sus sitios en esta versión de html.

Vamos a dar un repaso por los elementos nuevos mas importantes que traerá esta nueva versión.

Mejora la estructura

Actualmente, al diseñar una web, es habitual hacer un uso abusivo de las etiquetas DIV. HTML 5 traerá nuevos elementos para diferenciar distintas zonas, sin necesidad de acudir a estas etiquetas. De esta forma el código será mucho mas sencillo y legible. Entre las nuevas etiquetas están:

<section></section>: Se utiliza para representar una sección general dentro de un documento. Junto con las etiquetas H1...H6, podemos conseguir una mejor organización.
<article></article>: Representa un componente de una página. Por ejemplo, en un blog, se podría utilizar esta etiqueta para hacer referencia a la noticia. Se pueden utilizar etiquetas article dentro de otras etiquetas article.
<aside></aside>: Representa a una sección de la página que aunque esté relacionado con el tema, se puede considerar independiente. Se puede utilizar para las barras laterales por ejemplo.
<header></header>: Representa a un grupo de elementos introductorios, como por ejemplo una barra de navegación.
<nav></nav>: Representa a una sección de una página que es un link a otras páginas o partes dentro de la página.
<footer></footer>: Representa el pie de una sección, con información acerca de la sección, como puede ser el autor, copyright....

Os dejamos una imagen que os puede servir para aclarar estos conceptos.

Nuevos campos para formularios

Con HTML5 tendremos nuevos tipos de datos para el campo input. Veamos algunos de estos nuevos valores para indicar en el type.

<input type=”search”>: Para cajas de búsqueda.
<input type=”number”>: Para sumar o restar números mediante botones.
<input type=”range”>: Para seleccionar un valor entre dos valores predeterminados.
<input type=”color”>: Para poder seleccionar un color.
<input type=”tel”>: Campo para números de teléfonos.
<input type=”url”>: Campo para direcciones web.
<input type=”email”>: Direcciones de email.
<input type=”date”>: Calendario para seleccionar un día.
<input type=”month”>: Campo para meses.
<input type=”week”>: Para semanas.
<input type=”time”>: Para fechas.
<input type=”datetime”> Para indicara una fecha exacta.

Algunas otras etiquetas que traerá esta nueva versión, y que pueden ser interesantes son:

<audio> y <video>:que son nuevos elementos que nos permitirán poner contenido multimedia en nuestras aplicaciones sin necesidad de utilizar plugins como el de Flash.
<embed>: Esta etiqueta se utilizará para contenido que necesite de plugins para su funcionamiento.
<canvas>: Elemento que permite que se generen gráficos o dibujos en su interior.

También nos encontraremos con nuevos atributos que nos facilitarán las cosas en algunos casos. Es por ejemplo el caso del atributo Placeholder, que lo que nos permitirá es poner un texto por defecto en un campo de texto, y una vez que el foco esté en el campo, su valor desaparecerá.

Otro atributo nuevo es autofocus, que lo que hace es que más cargar la página, el campo que tenga este atributo, será el que coja el control del foco de la página, pudiendo escribir en el campo, sin necesidad de tener que seleccionarlo nosotros.

HTML5 traerá mas cambios que nos ayudarán al desarrollo de nuestras aplicaciones.

Vía: Theproc.es