Nuestro Blog

 

                                                                  ETIQUETAS CON CARGA SEMÁNTICA

Los cambios en HTML5 comienzan añadiendo semántica y accesibilidad implícitas, especificando cada detalle y borrando cualquier ambigüedad. Se tiene en cuenta el dinamismo de muchos sitios web, donde su aspecto y funcionalidad son más semejantes a aplicaciones webs que a documentos.

El HTML5 nos brinda varios elementos que perfeccionan esta estructuración estableciendo qué es cada sección, eliminando así DIV innecesarios.

Algunas de las más importantes etiquetas introducidas en HTML5 son las que añaden valor semántico y estructural, es decir, indican de forma inequívoca las distintas partes de las que consta un página: cabecera, pie, navegación, …

Ingredientes: Sublime Text3.
Nivel de dificultad: medio.
Tiempo de cocción: 30 min.

<section></section>Esta etiqueta se usa para marcar una sección genérica dentro de un documento o aplicación. Una sección, en este contexto, es una agrupación temática del contenido, típicamente con un encabezado. Ejemplos de uso de <section> podrían ser los capítulos de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página creando jerarquías del contenido, algo muy favorable para el buen posicionamiento web.

<article></article> Se usa para marcar contenido independiente que tendría sentido fuera del contexto de la página actual y que podría sindicarse, por ejemplo: una noticia, un artículo en un blog o un comentario.

Normalmente un <article> tendrá, además de su propio contenido, también una cabecera (a menudo con<header>) y posiblemente un pie (<footer>).

<aside></aside>  Contenido secundario (mapas, calendarios, subscripciones,..No se pierde la información principal)Esta  etiqueta se usa para marcar un trozo de contenido que está relacionado con el contenido de la página principal, pero que no es parte del mismo. Ejemplos de uso serían: grupos de enlaces a páginas relacionadas, barras laterales, …

<header></header>  Esta etiqueta representa un grupo de artículos  introductorios o de navegación. Es la parte que introduce nuestra página web.

<footer></footer>  Representa el pié de una sección, con información acerca de la página/sección como el autor, el copyright o el año. Es la zona en la que se aloja el Copyright enlaces a páginas estáticas, formularios,…

<nav></nav>  Sección de una página que enlaza a otras páginas o a partes dentro de la página: una sección con links de navegación. No todos los grupos de enlaces en una página tienen que estar en un elemento <nav>, sólo las secciones que consisten en bloques principales de la navegación son apropiados para ser utilizadas con el elemento <nav>. Puede utilizarse particularmente en el pie de página para tener un menú con un listado de enlaces a varias páginas de un sitio. El elemento <footer> es plenamente suficiente sin necesidad de tener un elemento <nav>. En esta etiqueta se aloja el menú de la página, es el que navega por las secciones de mi web.

 

                                                                           NUEVAS EN HTML5

<hgroup></hgroup> Esta etiqueta se utiliza para agrupar  un conjunto de uno o más elementos de encabezado (h1-h6). Se podría definir el título de la web con un <h1> y una descripción bajo el mismo con una etiqueta <h2>. Cualquier agrupación de titulares definidos con <h...> seguidos deberíamos encerrarlos entre <hgroup> y </hgroup>.

<figure></figure>  La idea de esta etiqueta es marcar contenido que tiene imágenes, diagramas, ilustraciones, fotos y ejemplos de código. Un sencillo ejemplo para especificar una imagen dentro de la figure es el siguiente:

Tal y como veis también he añadido en el ejemplo la etiqueta <figcaption> para añadir una leyenda.

<figcaption></figcaption> Esta etiqueta plantea que la usemos, solo una vez, dentro de una etiqueta figure, para dar información, agregar texto o una leyenda. Es totalmente opcional y puede aparecer antes o después del elemento que se incluya en la etiqueta figure. La etiqueta figcaption se usa para poner un título a este trozo de contenido.

<time></time> se usa para marcar fechas y horas en un formato que entiendan los ordenadores. Dicha fecha puede ser el contenido de la etiqueta o puede ir en el atributo datetime con lo cual el contenido puede ser cualquier cosa.

<main></main> Hasta ahora, utilizábamos la etiqueta div para englobar el contenido primario de un documento, asignándole al mismo un id de valor “main” (que significa principal en inglés). Ahora el id puede seguir siendo el mismo, pero la etiqueta debería cambiar a main si queremos maquetar correctamente. El propósito principal de esta etiqueta es desde un punto de vista de accesibilidad,  ya que ayuda a que los screen readers (lectores de pantalla) y otras tecnologías asistenciales puedan identificar donde comienza el contenido principal de la página y donde termina.Según la especificación: el elemento main representa el contenido principal del cuerpo (body) de un documento.