'title' Atributo global semántico en html5

Web semántica | El valor del atributo 'title' | HTML5

El atributo ‘title’ en la web semántica

En el nuevo HTML5 hay una serie de atributos globales que se pueden asignar a prácticamente todas las etiquetas del lenguaje. Voy a tratar de explicar mi concepto del atributo title, tradicionalmente usado con links <a>, para mostrar información adicional del destino de dicho enlace, y algo menos con imágenes enlazadas o no. Como ya es sabido este atributo provée de información de consulta para el elemento marcado, y se presenta a modo de tooltip cuando el puntero del ratón pasa sobre el elemento en cuestión, esta es la razón de su uso en accesibilidad, también, porque los lectores de páginas por voz o agentes no visuales utilizarán el atributo ‘title’ para indicar la información complementaria del elemento con dicho atributo. Para mi, dentro de los atributos globales del HTML5 el ‘title’ es el que más nos ayudará en la optimización y la arquitectura semántica de la web… por lo tanto al Seo.

Con la llegada del HTML5 y las nuevas etiquetas con carga semántica, creo ahora que el atributo (global en HTML5) ‘title’ adquiere una importancia, en la web semántica, inusitada desde el punto de vista de la clasificación de contenidos y la semántica web.


Las nuevas etiquetas con carga semántica en HTML5 son: * <section>* <article>* <footer>* <hgroup>* <mark>* <nav>* *<header>* <aside> … y estas otras de HTML4:<cite>* <span>* <dfn>* <abbr>

Etiqueta HTML5<section>, la más versatil

Esta es una de las nuevas etiquetas HTML5, muy importante y genérica, se puede usar para marcar secciones de una pagina entera, o dentro de un artículo agrupando contenidos:

<article><section>txt post</section><article>. Lo podríamos usar también jerarquizado con la etiqueta <footer><section>Contenido 1</section><section>Contenido 2</section><address>Direcc.</address></footer>

O bien para indicar el título inequivoco de una sección, yo lo uso en tags, taxonomias y categorias, <section><header><h1>TITULO SECC.</h1></header></section> y a continuación la descripción del elemento marcado como

<section title="Definición de Tag">la descripción del tag, categoría o taxonomia</section>.

Desde el punto de vista conceptual de la etiqueta <section> “marcar y diferenciar contenidos” creo que se debería usar el atributo global ‘title’ en todos los casos explicados anteriormente excepto en el marcado de títulos enlazados que ya llevan su propio atributo ‘title’, puesto que los bloques delimitados por <section> son independientes, agrupan contenidos diferentes y deben informar a través del atributo ‘title’ de estos contenidos: <section title=”En esta parte hablamos del analisis de una web en la perspectiva Seo”>BLOQUE</section> y pondría la excepción también en el siguiente caso: Con WordPress en la vista de archivos del blog, bien sea la lista de artículos de una categoría, tag, taxonomía o fecha de entrada; el marcado que yo uso actualmente es el siguiente.

<section><article><header><h2>Título del post</h2></header></article></section> a continuación marco con <section><article title="Introducción al artículo sobre -Seo y deSeo-">Entradilla del artículo en vista de archives</article><section>

como véis en este caso el atributo ‘title’ se lo pongo a la etiqueta <article> pues la lectura humana de ese marcado es: tengo una página completa con una lista de artículos de la taxonomía que son secciones dentro de la página, dentro de cada sección hay un artículo con su título marcado y debajo, la entradilla del post que es, una sección compuesta por la introducción a un artículo que habla de Seo.

Por último la etiqueta <section> la podemos usar jerarquizada dentro de <article> para agrupar secciones dentro de un artículo.

<article><header><h1>Título del post</h1></header> <section title="Describimos aquí el comienzo del Seo">Texto de la sección del artículo</section> <sectión title="Como el seo se convirtio en deSeo"><header><h3>Subtitulo dentro del post y título de la sección</h3></header>2º texto del post</section>

Etiqueta HTML5<article>, bienvenida

Otra nueva etiqueta en HTML5 que debe delimitar el contenido principal de la página, usado sin otra jerarquía superior en la vista simple de un post:

<article title="Una nueva perspectiva del asunto Post"><header><h1>Título del Post</h1></header>Texto completo del post</article>también uso esta combinación de etiquetas en widgets, por ejemplo, de artículos relacionados <aside title="Posts relacionados -con título del post-"><article><header><h3>Titulo del post</h3></header>Entradilla, si se muestra</article></aside> o este otro con widgets, por ejem. los artículos más leidos: <section title="Los mejores posts del blog">article><header><h3>Titulo del post</h3></header>Entradilla, si se muestra</article></section>

Etiqueta HTML5<footer>, necesaria

Por fin la etiqueta <footer> que se va a encargar de agrupar los contenidos, casi siempre fijos, a pie de página y que por la lejanía, muchas veces, del principio del código de nuestra página web se ha visto perjudicado en la lectura lineal que todavía hacen muchos motores de búsqueda, ahora con el marcado semántico los buscadores clasificarán las partes de una página de una manera más eficaz. Con esta nueva etiqueta se pueden generar varios footer donde cada uno estaría relacionado con su respectivo <article> o <section>
Bueno, yo uso, como es el caso de esta web, un atributo ‘title’ en la etiqueta->footer, aunque también admite anidamientos de section, aside, nav, header, article, etc. La dirección de contacto está marcada con Microdatos para geolocalización y fragmentos enriquecidos.

<footer title="Categorías | Address | Tags | © | Contacto">Contenido del footer</footer></code>

Etiqueta HTML5<header> + info con ‘title’

La etiqueta header define el título principal de una <section> o <article>, de esta manera podríamos tener varios <h1> en una página de nuestra web, podemos definir el atributo ‘title’ para <header> cuando queramos ampliar información de ese título principal, generalmente yo lo uso cuando dicho <header> no está enlazado.

Etiqueta HTML4 <abr> existe por su ‘title’

El uso de la etiqueta <abr> va ligado siempre al uso del atributo title puesto que <abr> debe usarse con abreviaturas o acrónimos.

Etiqueta HTML4 <cite> con ‘title’ identifica la fuente

El uso del atributo title en la etiqueta <cite> es necesario para identificar la fuente o el autor de la cita.

<cite title="André Gibe">Todo está dicho, pero como nadie escucha...</cite>
Todo está dicho, pero como nadie escucha…
Desde luego se pueden hacer muchas combinaciones en el uso del atributo, yo observaría el contexto de los textos a marcar y la jerarquía html, animo al uso del atributo title en la mayor cantidad de etiquetas html siempre que se respete el principio de ayuda a la navegación del usuario por vuestras páginas.

Relacionados->Diseño gráfico->Branding->Web

2.498 views

Una opinión

  1. El atributo ‘title’ en la web semántica

    […] Optimización Web | Uso en HTML5 de 'title' el atributo global semántico […]

Los comentarios se agradecen

*

Ùltimos Post

ÆØ Watches. Relojes de diseño

La marca de relojes de diseño ÆØ Watch surge en 1989, el concepto inicial tratab
Qebab Shadow font

Tipografía gruesa con sombra para grandes títulos o logos. La fuente "Qebab Shad
Tecnocrática, industrial font

Tipografía sans con contraste, display, geométrica, con acabado redondeado y pro

23 fonts del 2013 en 7'40 de vídeo"

Relojes de diseño 89/93

ÆØ WATCH DESIGN WATCH DESIGN WATCH

Fernando Haro
deFharo
Diseñador gráfico y web freelance
Ampuero. 39840 Cantabria. España
034 942 68 28 19 / 616 679 058