H1 Logo o titulo?

[Nahuel Sotelo]

Hola,
En las proximas semanas quiero mejorar el marcado de la web de la empresa donde trabajo y entre algunas de las cosas que quiero cambiar se encuentra la dsitribución de los Headings. Mi duda es, y sabiendo que hay diferentes corrientes de opinón ¿cuál creéis que debería ser el lugar del <h1>?, ¿en el logo de la cabecera o en el titulo del artículo principal de la página? Navegando por internet me he encontrado que las opiniones están bastante divididas.

En el caso de mi empresa se trata de una editorial, por lo que lo más importante de la web son las fichas de los libros, si pongo el <h1> en los títulos, ¿que haríais con el logo? ¿un simple <a> y listo?

Escucho opiniones.

Saludos,
Nahuel Sotelo

[Bruno]

Lo más importante es adaptar las cabeceras a cada página de tu web. Me explico:

• Si es la página principal, el <H1> debe ser el nombre de la empresa: "Editorial Loquesea".
• Si es la ficha de los libros, el <H1> debe ser el nombre del libro: "Libro Loquesea". En esta página puedes mantener el <H1> "Editorial Loquesea" o convertirlo en un <P> con <A>.

Tal como hacen en W3C con la pagina de HTML:
http://www.w3.org/html/

Existe un addons para Firefox bastante útil, llamado Heading Maps, que te permite visualizar las cabeceras de cualquier página facilmente.

un saludo

[Oneeyedman]

Sí, un simple a con su clase y sus estilos. Desde un punto de vista semántico tiene más sentido que el h1 vaya a un título aunque se haya estado haciendo de otra manera durante... bueno, es mi opinión :)

2010/12/22 Nahuel Sotelo <nahuel...@gmail.com>

--

·-)

[Oneeyedman]

Joe, Bruno, que bien explicado :)

2010/12/22 Oneeyedman <sidioste...@gmail.com>

--

·-)

[alvarosaco]

Te paso un artículo que leí hace tiempo y que analiza muy bien este
asunto; el logo es una imagen, no un h1.
http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/

[Nahuel Sotelo]

Gracias! Justamente ayer llegué googleando a este mismo artículo y pensaba linkarlo aquí porque me pareció que trata el tema de manera muy completa

Gracias por las respuestas!.

2010/12/23 alvarosaco <alvar...@gmail.com>

[José Galisteo]

Yo me suelo guiar para decidir cual es el "h1" por: "¿Que es lo más
importante de esta página? o ¿Qué quiero destacar?"

Como dicen por ahí en la pagina principal lo más común es que lo más
importante sea el titulo de la web.
En la vista de un artículo, lo más seguro es que sea el título del
articulo, etc.

2010/12/23 Nahuel Sotelo <nahuel...@gmail.com>:

--
http://flowersinspace.com
http://jose.gr

[Abel Sutilo]

El 23 de diciembre de 2010 11:14, José Galisteo <ceri...@gmail.com> escribió:

Como dicen por ahí en la pagina principal lo más común es que lo más
importante sea el titulo de la web.
En la vista de un artículo, lo más seguro es que sea el título del
articulo, etc.

Estoy de acuerdo pero tenemos un pequeño problema en la praxis. Imagina un maqueta ya funcional y dividida en diferentes archivos dinámicos (ejemplo sencillo: tema de Wordpress). Según esta teoría, en la vista del artículo acabamos teniendo dos <h1> (el cargado en el head.php y el que cargamos en el single.php).

¿Qué solución proponéis? Reconozco que el tema también me trae de cabeza.

--
Abel Sutilo
* http://flavors.me/abelsutilo
* abels...@gmail.com

[Marcio Barrios]

Yo creo que es cuestión de interpretación (la semántica es lo que
tiene, que es bastante subjetiva), es válida cualquiera de las dos
opciones siempre que sea justificada, de todos modos yo me decanto por
usar el logo como imagen y no como h1, ya que como bien dice el
artículo yo también creo que es "contenido".

On 23 dic, 11:14, José Galisteo <cerit...@gmail.com> wrote:
> Yo me suelo guiar para decidir cual es el "h1" por: "¿Que es lo más
> importante de esta página? o ¿Qué quiero destacar?"
>
> Como dicen por ahí en la pagina principal lo más común es que lo más
> importante sea el titulo de la web.
> En la vista de un artículo, lo más seguro es que sea el título del
> articulo, etc.
>

> 2010/12/23 Nahuel Sotelo <nahuelsot...@gmail.com>:

>
>
>
> > Gracias! Justamente ayer llegué googleando a este mismo artículo y pensaba
> > linkarlo aquí porque me pareció que trata el tema de manera muy completa
>
> > Gracias por las respuestas!.
>

> > 2010/12/23 alvarosaco <alvaros...@gmail.com>

[Emilio Garcia]

En wp puedes decirle q si estas en la home te lo maque de una forma y si estas en otra pagina te marque el logo de otra.

if is_home()

De memoria creo q la función es esa.

Enviado desde mi iPad

[Jorge del Casar]

Buenas,

En las templates de Wordpress puedes usar if, por ejemplo en head:

if( is_front_page() )

{

<h1>Logo</h1>

}

else

{

<p>Logo<p>

}

Más info: http://codex.wordpress.org/Conditional_Tags

Así que siempre puedes crear una arquitectura adecuada. Dependerá de la habilidad del desarrollador de back para gestionar las páginas ;)

Saludos,

--
Jorge del Casar
 jorgedelcasar.es
@jorgecasar
 shotools.com
 start.io/jorgecasar

2010/12/23 Abel Sutilo <abels...@gmail.com>

[Bruno]

Google software engineer Matt Cutts collected questions on Google Moderator and answered many of them on video:

• More than one H1 on a page: good or bad?
• Does the ordering of heading tags matter?

[Abel Sutilo]

@Emiulio, @Jorge, tenéis razón. El licor Navideño que han traído a la oficina me a ayudado a olvidar el Codex de WP xD Gracias :)

[Abel Sutilo]

Disculpad los errores ortográficos y que alguien aparte de mi esa botella, por favor :P

[Carlos Matallín]

¿En HTML5 no se soluciona en cierto modo este problema? No sé cómo afectará al SEO, pero cada sección de la página puede tener H1, y de ahí hacia abajo jerárquicamente.

--
Carlos Matallín
http://matallo.org

2010/12/23 Abel Sutilo <abels...@gmail.com>

[Jorge del Casar]

En html4 (http://www.w3.org/TR/html4/struct/global.html#h-7.5.5) también puedes tener varios H1, en las especificaciones no dice lo contrario. Fueron las pautas de accesibilidad WCAG 1.0 las que lo limitaron y obligaban a ponerlo al principio de la página. Pero con las WCAG 2.0 rectificaron.

--
Jorge del Casar
 jorgedelcasar.es
@jorgecasar
 shotools.com
 start.io/jorgecasar

2010/12/23 Carlos Matallín <mat...@gmail.com>

[José Galisteo]

Eso es problema de como se ha estructurado el código que genera el
html, en principio la solución es sencilla, desde usando un simple
condicional en el caso wordpress o distintas plantillas si tienes
libertad.

2010/12/23 Abel Sutilo <abels...@gmail.com>:

--
http://flowersinspace.com
http://jose.gr

[Abel Sutilo]

@Jorge, disculpa que insista pero ando realmente despistado (o más bien desinformado).

Si es cierto lo que dices (se puede usar ene veces <h1> en un mismo documento), la idea de realizar un marcado progresivo en la titulación -ejemplo:

<h1>...<h1>

<h2>...<h2>

<h2>...<h2>

<h3>...<h1>

<h3>...<h3>

<h3>...<h3>

-se rompería en XHTML, ¿no? En favor de algo como esto:

<h1>...<h1>

<h2>...<h2>

<h3>...<h3>

<h1>...<h1>

<h2>...<h2>

<h3>...<h3>

Lo digo porque la primera opción es lo que se viene aconsejando/machando como idea principal (aunque ambas validan igualmente).  A mi me valen las dos, yo me adapto a lo que más correcto sea :) 

Enlazo con el hilo original. Entiendo por otro lado que, en el caso de que la segunda opción sea correcta semánticamente (a mi me lo parece), no parecería un fallo grave de semántica enmarcar el logo en un <h1> ya que:

1. Puede ser correcto si el logo (img) es equivalente al título de la página
2. Podemos volver a utilizar <h1> en el código según WCAG 2.0 :D

Por otro lado entiendo que es semántica y la semántica, como decía un compañero más arriba, tiene su toquecito filosófico y flexible con el que es dificil cerrar formas.

Me gustaría poder aunar el criterio con idea de que todos los que estamos aquí tengamos las mismas prácticas en este sentido. Si el estándar no viene a ti, juntos creamos el estándar :P

¿Qué opináis?  :)

[Abel Sutilo]

Fe de erratas (para variar)

El 23 de diciembre de 2010 18:32, Abel Sutilo <abels...@gmail.com> escribió:

Si es cierto lo que dices (se puede usar ene veces <h1> en un mismo documento), la idea de realizar un marcado progresivo en la titulación -ejemplo:

<h1>...</h1>

<h2>...</h2>

<h2>...</h2>

<h3>...</h3>

<h3>...</h3>

<h3>...</h3>

-se rompería en XHTML, ¿no? En favor de algo como esto:

<h1>...</h1>

<h2>...</h2>

<h3>...</h3>

<h1>...</h1>

<h2>...</h2>

<h3>...</h3>

[Ismael González]

Yo no creo que usar mas de un H1 con xhtml, sea adecuado, semánticamente hablando ( aunque como has comentado en la w3c valida ), el H1 es el encabezado de primer nivel desde el que "cuelgan" el resto de niveles (h2, h3, etc), por así decirlo es como la autoridad máxima de importancia en cuanto a semántica dentro del HTML, por tanto no debe haber mas de uno.

Lo que si es cierto es, lo que dice Carlos, que en HTML5 cada "seccion" de la página (siendo "sección" un tipo de contenido seccionado segun la w3c <article>, <aside>, <nav> y <section>) tiene su propia jerarquía de encabezados, pero eso no significa que puedas poner h1 por todos lados, si no siempre dependiendo de un contexto.

Y volviendo al hilo de nuevo, H1 logo o título, pues depende, depende de alrededor de que gire la página, es decir en una home lo mas normal es que el elemento central sea el logo de la página y que desde el que desciendan el resto de encabezados.

En cambio en el detalle de un artículo, es el título del mismo, el elemento central, y el logo queda relegado a un segundo plano (<p>)

Saludos!

[Jorge del Casar]

Estoy en el móvil y no puedo adjuntar las fuentes, pero lo haré.

@Ismael @Abel es valido porque la especificación no especifica min ni max solo orden jerárquico descendente.

Y en cuanto a semántica, hay mucha influencia personal. Pero lo que dice Ismael sobre que "el H1 es el encabezado de primer nivel desde el que "cuelgan" el resto de niveles (h2, h3, etc), por así decirlo es como la autoridad máxima de importancia en cuanto a semántica dentro del HTML" hemos de recordar que tenemos el title, por lo tanto realmente el H1 es el máximo nivel dentro del contenido. Así que personalmente siempre he visto bien el uso de múltiples h1 como bien han establecido HTML5, tanto semántica como jerárquicamente.

Un saludo ;)

Jorge del Casar

jorgedelcasar.es

[Abel Sutilo]

Comprendo ambas posturas y, será un problema de sobredosis de tolerancia por mi parte, me gustan las dos.

Pero sí he de apuntar que lo que me descuadra en concreto es esto:

El 23 de diciembre de 2010 19:55, Jorge del Casar <jorge...@gmail.com> escribió:

es valido porque la especificación no especifica min ni max solo orden jerárquico descendente.

Contradice la idea de repetir varios <h1>:

Al repetir romperíamos el orden jerárquico descendente ¿no? En tal caso, si eso es lo que dice la especificación no podremos repetir un <h1> Discúlpame si no te entiendo bien :)

En fin, insisto en todo esto porque estoy intentando obviar mi propia "influencia personal" y reciclar mis ideas respecto a la titulación. Intento hallar lo estrictamente especificado y válido como punto de partida. 

En cualquier caso, ambas prácticas me parece lógicas, la semántica es lo que tiene... 

Un saludo,

[Jorge del Casar]

Con orden jerárquico descendente me refiero a que no haya saltos de manera descendente.

Hay que ir bajando de nivel de 1 en 1 pero puedes subir de golpe al nivel superior que quieras.

El ejemplo que se puso hace unos días con varios h2 y h3 es perfectamente valido si quitamos el h1 y aumentamos un nivel a todo.

Creo que ahora me he explicado mejor.

Jorge del Casar

jorgedelcasar.es

[Harold Dennison]

Por acabar de liar más el tema, no olvideis que con HTML5, ya no
tenemos el "flujo lineal" del que se está hablando, si no que las
etiquetas como article pueden tener su propia serie de headers, siendo
esto totalmente correcto.
No tengo ahora a mano referencia, pero sirva esto como ejemplo de
código correcto (y aconsejado):

<body>
<h1>Mi blog!</h1>
<h2>Listado de artículos</h2>
<article>
<h1>Post sobre CSS</h1>
<p>Lorem ipsum dolor sit amet...</p>
</article>
<article>
<h1>Post sobre HTML</h1>
<p>Lorem ipsum dolor sit amet...</p>
</article>
</body>

[Abel Sutilo]

Cierto, Harold. Creo recordar que Jorge u otro compañero lo ha comentado ya. En HTML5 nos queda claro, paree que no hay problemas.

La idea es consensuar la mejor forma de construirlo en XHTML (con el que algunos tendremos que seguir trabajando algún tiempo  :)

[Jorge del Casar]

Desde mi punto de vista ese mismo ejemplo en XHTML quedaría así:

<head>

<title>Mi blog!</title>

</head>

<body>
       <h1>Mi blog!</h1>
       <h2>Listado de artículos</h2>

       <h3>Post sobre CSS</h3>

       <p>Lorem ipsum dolor sit amet...</p>

       <h3>Post sobre HTML</h3>

       <p>Lorem ipsum dolor sit amet...</p>

</body>

Y en caso de ser la página de un artículo:

<head>

<title>Post sobre CSS - Mi blog!</title>

</head>

<body>
       <p>Mi blog!</p>

       <h1>Post sobre CSS</h1>
       <p>Lorem ipsum dolor sit amet...</p>

</body>

Saludos,

--
Jorge del Casar
 jorgedelcasar.es
@jorgecasar
 shotools.com
 start.io/jorgecasar

2010/12/24 Abel Sutilo <abels...@gmail.com>

[Harold Dennison]

Y ahora lo interesante... alguien sabe que repercusión real tiene esto en posicionamiento SEO?

Yo todos los SEO que conozco son señores oscuros y con capa, que no sueltan ni prenda aunque trabajes con ellos... alguien tiene más facilidades? :P

[Emilio Garcia]

X los q yo conozco pondrías todo dentro de un h1

Enviado desde mi iPad

[Carlos Matallín]

Yo todos los SEO que conozco son unos cantamañanas, lo siento si ofendo a alguno que de la lista que se encuentre camuflado!

--
Carlos Matallín
http://matallo.org

2010/12/24 Harold Dennison <harold....@gmail.com>

[Abel Sutilo]

Se nos va el hilo, se nos va por el barranquillo. Pero reconozco que me habéis hecho reir :)

Feliz cena de Navidad, por cierto :)

[Daniel Martinez]

jajajaj estoy contigo Carlos, en mi opinión se debe usar un solo h1 y dependiendo del caso puede convenir que sea el logo o en otros casos el título del articulo o página.