banner
hace 3 años
635 Views

Etiquetas Nuevas HTML5 II

Autor:
banner

 
 

Hola amigos en esta ocasión vamos a explicar 5 Etiquetas Nuevas Html5. En este articulo vamos a reunir etiquetas sencillas  pero que nos darán una idea de las nuevas funciones que nos trae Html5

.
 

En post anteriores de Html5 vimos los artículos: “Html 5 Etiquetas basicas” y “Vídeo en Html5“; en estos se explicaban la nueva estructura, con las nuevas etiquetas que definen la estructura del documento y la nueva funcionalidad que nos permite insertar vídeos en nuestros proyectos sin ningún problema, cosa que anterior a Html5 era un quebradero de cabeza.HTML5 Etiquetas

En este post vamos a explicar ciertas etiquetas que igual no tienen tanta repercusión como <video> o otras, pero nos pueden servir para ciertas funcionalidades que necesitemos, no obstante algunos navegadores modernos no son compatibles con algunas de estas nuevas etiquetas Html5.

 

Bueno entrando en materia empecemos con una etiqueta que ya utilizamos en el post “Menu Html5“, esta etiqueta es <nav></nav> y <menu></menu>.

NAV Y MENU

Estas etiquetas que trae los nuevos estándares de html, se utilizan para definir cada uno de los elementos de un menú de cabecera, como; inicio,contacto,… y el menú en si.
 

La etiqueta <nav> va dentro de la nueva etiqueta <header>, está la explicamos en el post “Etiquetas Nuevas HTML5” donde explicamos las etiquetas principales para crear un documento Html5. Ha esta etiqueta también se le puede dar un valor a su id o class para el posterior diseño en css.

 


<nav id="menu_cabecera">
<menu>Home</menu>
<menu>Nosotros</menu>
<menu>Servicios</menu>
<menu>...</menu>
</nav>

 

Como podemos ver utilizamos la etiqueta <nav> para definir el menú en general y las etiquetas <menu> para definir cada uno de los elementos que contiene el menú.
 
En este caso podemos apreciar el trabajo que han hecho los creadores de Html5, simplificando y creando etiquetas con valor semántico.

 

No obstante cabe destacar que estas etiquetas todavía no nos cubren todas nuestras expectativas, puesto que para ciertos tipos de menús tendremos que utilizar las listas <ul><li> de toda la vida, como menús despegables.

FIGURE

Esta etiqueta es sencilla y mas que nada es una muestra mas de que las etiquetas Html5 contienen un valor semántico, que facilita el rastreo de los buscadores.
 

Con <figure> nos permite crear espacios o contenedores para las imágenes, listas, gráficos, …
Dentro de está colocaríamos la imagen como siempre mediante un <img>.

 

Por otro lado tenemos <figcaption>, está es utilizada para crear una pequeña descripción de la imagen, esta etiqueta la colocaríamos dentro de <figure>.

 


 <figure>
<img src="1.jpg"/>
<figcaption> Descripcion de la foto .../figcaption>
</figure>

 

Esta etiqueta la podríamos comparar con un “div” personalizado cuyo único fin es contener imágenes

MARK

Esta etiqueta equivale a la etiqueta <b>,<strong>, … y similares; es decir resalta el texto que se situé dentro de las etiquetas en si.
 

Esta etiqueta como la anterior son compatibles con todos los navegadores modernos, cosa que como hemos visto ciertas etiquetas todavia no lo son.
 

Usando atributos css podemos darle cierto diseño a estas etiquetas.

 


<p>Bienvenido a<mark>Web Sdc Studio</mark></p>

TIME

Otra etiqueta Html5 sencilla, está permite representar la fecha y la hora en nuestros proyectos web de manera simple y concisa, cosa que antes necesitábamos mas código para realizar esta función.


<p> Son las <time> 08:00 </time></p>

DETAILS

Antes de explicar la etiqueta, debo mencionar que está solo es soportada por el navegador Chrome, aunque estas tecnologías avanzan rápidamente. Entrando en materia ya saber que esta etiqueta permite agregar información adicional a cualquier texto, imagen,…


<details>
<sumary> Titulo </sumary>
Información adicional que queramos añadir
</details>

Como podemos apreciar la etiqueta esta formada en su interior por otra; <sumary>, que representa el titulo de la información adicional

 

Bueno amigos con esta etiqueta me despido hasta el siguiente post donde seguiré explicando las nuevas etiquetas y funcionalidades del nuevo estándar web Html5.

 

Recuerdo me podéis comentar cualquier duda o problema que os haya surgido y os atenderé en la mayor brevedad posible

 

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

Tags Artículos:
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 *

Web Sdc Studio