¿Qué etiqueta HTML5 debo usar para marcar el nombre de un autor?

96

Por ejemplo, una publicación de blog o un artículo.

<article>
<h1>header<h1>
<time>09-02-2011</time>
<author>John</author>
My article....
</article>

Sin authorembargo, la etiqueta no existe ... Entonces, ¿cuál es la etiqueta HTML5 de uso común para los autores? Gracias.

(Si no lo hay, ¿no debería haber uno?)

Quang Van
fuente
<cite>¿tal vez? No lo sé lol. : P Sin embargo, no hace mucha diferencia en el estilo.
Joseph Marikle
2
No se trata de estilo. Técnicamente, puede usar un <p> para crear un encabezado simplemente aumentando el tamaño de la fuente. Pero los motores de búsqueda no lo entenderán así.
jalgames
2
No se le permite usar el timeelemento de esa manera. Dado dd-mm-yyyque no es uno de los formatos reconocidos, debe proporcionar una versión legible por máquina (en uno de los formatos reconocidos) en un datetimeatributo del timeelemento. Véase w3.org/TR/2014/REC-html5-20141028/…
Andreas Rejbrand
1
Ahora hay una mejor respuesta que la aceptada (la de robertc).
Dan Dascalescu

Respuestas:

113

Ambos rel="author"y <address>están diseñados para este propósito exacto. Ambos son compatibles con HTML5. La especificación nos dice que rel="author"se puede usar en los elementos y . Google también recomienda su uso . Combinar el uso de y parece óptimo. HTML5 permite envolver mejor la información de titulares y firmas de una manera similar:<link> <a><area><address>rel="author"<article><header>

<article>
    <header>
        <h1 class="headline">Headline</h1>
        <div class="byline">
            <address class="author">By <a rel="author" href="/author/john-doe">John Doe</a></address> 
            on <time pubdate datetime="2011-08-28" title="August 28th, 2011">8/28/11</time>
        </div>
    </header>

    <div class="article-content">
    ...
    </div>
</article>
  • El pubdateatributo indica que esa es la fecha de publicación.

  • Los titleatributos son pasos elevados opcionales.

  • Alternativamente, la información de la línea de autor puede estar envuelta en <footer>un<article>

Si desea agregar el microformato hcard , lo haría así:

<article>
    <header>
        <h1 class="headline">Headline</h1>
        <div class="byline vcard">
            <address class="author">By <a rel="author" class="url fn n" href="/author/john-doe">John Doe</a></address> 
            on <time pubdate datetime="2011-08-28" title="August 28th, 2011">on 8/28/11</time>
        </div>
    </header>

    <div class="article-content">
    ...
    </div>
</article>
Ryanve
fuente
3
¿No debería "Por" preceder a la etiqueta <address>? En realidad, no es parte de la dirección.
aridlehoover
1
@aridlehoover Cualquiera parece correcto de acuerdo con whatwg.org/specs/web-apps/current-work/multipage/… - Si está fuera, use .byline address { display:inline; font-style:inherit }para anular el blockvalor predeterminado en los navegadores.
Ryanve
@aridlehoover también creo que <dl>es viable. Consulte el marcado por línea en la fuente de demo.actiontheme.com/sample-page, por ejemplo.
Ryanve
4
Dado que el pubdateatributo ha desaparecido de las especificaciones WHATWG y W3C, como escribe Bruce Lawson aquí , le sugiero que lo elimine de su respuesta.
Paul Kozlovitch
51

HTML5 tiene un tipo de enlace de autor :

<a href="http://johnsplace.com" rel="author">John</a>

La debilidad aquí es que debe estar en algún tipo de enlace, pero si tiene eso, hay una larga discusión de alternativas aquí . Si no tiene un enlace, simplemente use un atributo de clase, para eso es:

<span class="author">John</span>
Robertc
fuente
3
@Quang Sí, creo que un tipo de enlace sin un enlace real anularía el propósito de intentar marcarlo semánticamente.
robertc
3
@Quang: el relatributo está ahí para describir cuál es el destino del enlace. Si el enlace no tiene destino, no reltiene sentido.
Paul D. Waite
2
Es posible que también desee consultar schema.org para encontrar formas de expresar este tipo de información.
Michael Mior
1
@ jdh8 Porque John no es el título de una obra
robertc
6
Esta respuesta ya no es la mejor. Google ya no admiterel="author" , y como mencionan Ryanve y Jason, la addressetiqueta también se diseñó explícitamente para expresar la autoría.
Dan Dascalescu
19

De acuerdo con la especificación HTML5, probablemente quieras address.

El elemento de dirección representa la información de contacto de su artículo o elemento de cuerpo más cercano antepasado.

La especificación más referencias addresscon respecto a los autores aquí

Menos de 4.4.4

La información de autor asociada con un elemento de artículo (qv el elemento de dirección) no se aplica a los elementos de artículo anidados.

Menos de 4.4.9

La información de contacto del autor o editor de una sección pertenece a un elemento de dirección, posiblemente dentro de un pie de página.

Todo lo cual hace que parezca que addresses la mejor etiqueta para esta información.

Dicho esto, también puedes dar tu addressa relo classde author.

<address class="author">Jason Gennaro</address>

Leer más: http://dev.w3.org/html5/spec/sections.html#the-address-element

Jason Gennaro
fuente
1
Gracias Jason, ¿sabes lo que significa "qv"? En> 4.4.4> La información de autor asociada con un elemento de artículo (qv el elemento de dirección) no se aplica a los elementos de artículo anidados.
Quang Van
3
@QuangVan - (espera, tus iniciales son ... qv hmm) - qv significa "quod vide" o "en este (asunto) ve a ver" - hijo sobre el asunto de "qv" ve a english.stackexchange.com/questions / 25252 /… (qv) jaja
pageman
@JasonGennaro jaja nanos gigantum humeris insidentes!
pageman
lol, me tomó un tiempo descubrir a qué se referían estos comentarios ... Gracias por la lección de latín :)
Quang Van
9

La compatibilidad de Google con rel = "author" está obsoleta :

"El marcado de autoría ya no se admite en la búsqueda web".

Utilice un elemento Lista de descripciones (Lista de definiciones en HTML 4.01).

De la especificación HTML5 :

El elemento dl representa una lista de asociación que consta de cero o más grupos de nombre-valor (una lista de descripción). Un grupo de nombre-valor consta de uno o más nombres (elementos dt) seguidos de uno o más valores (elementos dd), ignorando los nodos que no sean elementos dt y dd. Dentro de un solo elemento dl, no debe haber más de un elemento dt para cada nombre.

Los grupos de nombre y valor pueden ser términos y definiciones, temas y valores de metadatos, preguntas y respuestas, o cualquier otro grupo de datos de nombre y valor.

La autoría y otra metainformación del artículo encajan perfectamente en esta estructura de pares clave: valor:

  • quien es el autor
  • fecha de publicación del artículo
  • estructura del sitio bajo la cual se organiza el artículo (categoría / etiqueta: cadena / matrices)
  • etc.

Un ejemplo obstinado:

<article>
  <header>
    <h1>Article Title</h1>
    <p class="subtitle">Subtitle</p>
    <dl class="dateline">
      <dt>Author:</dt>
      <dd>Remy Schrader</dd>
      <dt>All posts by author:</dt>
      <dd><a href="http://www.blog.net/authors/remy-schrader/">Link</a></dd>
      <dt>Contact:</dt>
      <dd><a mailto="[email protected]"><img src="email-sprite.png"></a></dd>
    </dl>
  </header>
  <section class="content">
    <!-- article content goes here -->
  </section>
</article>

Como se puede ver cuando se utiliza el <dl>elemento de información de artículo de meta, somos libres para envolver <address>, <a>e incluso <img>etiquetas en <dt>y / o <dd>etiquetas de acuerdo con la naturaleza del contenido y es la intención función .
Las etiquetas <dl>, <dt>y <dd>son libres de hacer su trabajo - semánticamente - transmitiendo información sobre el padre <article>; <a>, <img>y <address>son igualmente libres de hacer su trabajo - nuevamente, semánticamente - transmitiendo información sobre dónde encontrar contenido relacionado, presentación visual no verbal y detalles de contacto para las partes autorizadas, respectivamente.

remyActual
fuente
9

En HTML5 podemos utilizar algunas etiquetas semánticas que ayudan a organizar la información sobre tu tipo de contenido, pero adicionales y relacionadas con el tema puedes consultar schema.org . Es una iniciativa de Google, Bing y Yahoo que tiene como objetivo ayudar a los motores de búsqueda a comprender mejor los sitios web a través de atributos de microdatos. Tu post podría tener el siguiente aspecto:

<article itemscope itemtype="http://schema.org/Article">
<header>
  <h1 itemprop="headline">header</h1>
  <time itemprop="dateCreated datePublished">09-02-2011</time>
  <div itemprop="author publisher" itemscope itemtype="http://schema.org/Organization">
    <p>
        <img itemprop="image logo" src="..."/>
        <span itemprop="name">John</span>
    </p>
  </div>
</header>
<section itemprop="articleBody" >
    My article....
    <img itemprop="image" src="..."/>
</section>
</article>
HarleySG
fuente
1
Definitivamente la respuesta más precisa para 2019.
Simon G
3
Tenga en cuenta que schema.org no forma parte de HTML5. Es una especificación separada.
ya.teck
3

¿Qué hay de los microdatos ?

<article>
<h1>header<h1>
<time>09-02-2011</time>
<div id="john" itemscope itemtype="http://microformats.org/profile/hcard">
 <h2 itemprop="fn">
  <span itemprop="n" itemscope>
   <span itemprop="given-name">John</span>
  </span>
 </h2>
</div>
My article....
</article>
steveax
fuente