Qual tag HTML5 devo usar para marcar o nome de um autor?


96

Por exemplo, uma postagem de blog ou artigo.

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

A authortag não existe ... Então, qual é a tag HTML5 comumente usada para autores? Obrigado.

(Se não houver, não deveria haver um?)


<cite>talvez? Eu não sei lol. : P Não faz muita diferença no estilo.
Joseph Marikle,

2
Não se trata de estilo. Tecnicamente, você pode usar um <p> para criar um título apenas aumentando o tamanho da fonte. Mas os motores de busca não vão entender assim.
jalgames

2
Você não tem permissão para usar o timeelemento dessa forma. Como dd-mm-yyynão é um dos formatos reconhecidos, você deve fornecer uma versão legível por máquina (em um dos formatos reconhecidos) em um datetimeatributo do timeelemento. Consulte w3.org/TR/2014/REC-html5-20141028/…
Andreas Rejbrand

1
Há uma resposta melhor agora do que a aceita (de robertc).
Dan Dascalescu

Respostas:


113

Ambos rel="author"e <address>são projetados para esse propósito exato. Ambos são suportados em HTML5. A especificação nos diz que rel="author"pode ser usado em elementos e . O Google também recomenda seu uso . Combinar o uso de e parece ótimo. O HTML5 oferece melhores recursos para agrupar informações de manchetes e assinaturas de maneira semelhante a:<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>
  • O pubdateatributo indica que essa é a data de publicação.

  • Os titleatributos são sobrevôos opcionais.

  • As informações da assinatura podem, alternativamente, ser agrupadas em um <footer>dentro de um<article>

Se você quiser adicionar o microformato hcard , eu faria assim:

<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>

3
"Por" não deveria preceder a tag <address>? Na verdade, não faz parte do endereço.
aridlehoover

1
@aridlehoover Qualquer um parece correto de acordo com whatwg.org/specs/web-apps/current-work/multipage/… - Se estiver fora, use .byline address { display:inline; font-style:inherit }para substituir o blockpadrão nos navegadores.
ryanve

@aridlehoover também acho que <dl>é viável. Veja a marcação de assinatura na fonte de demo.actiontheme.com/sample-page, por exemplo.
ryanve

4
Como o pubdateatributo sumiu das especificações WHATWG e W3C, como Bruce Lawson escreve aqui , sugiro que você o remova de sua resposta.
Paul Kozlovitch,

51

HTML5 tem um tipo de link de autor :

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

O ponto fraco aqui é que ele precisa estar em algum tipo de link, mas se você tiver isso, há uma longa discussão de alternativas aqui . Se você não tiver um link, basta usar um atributo de classe, é para isso que serve:

<span class="author">John</span>

3
@Quang Sim, acho que um tipo de link sem um link real anularia o propósito de tentar marcá-lo semanticamente.
robertc

3
@Quang: o relatributo existe para descrever qual é o destino do link. Se o link não tem destino, relnão faz sentido.
Paul D. Waite,

2
Você também pode consultar o schema.org para encontrar maneiras de expressar esse tipo de informação.
Michael Mior

1
@ jdh8 Porque John não é o título de uma obra
robertc

6
Esta resposta simplesmente não é mais a melhor. O Google não oferece mais suporterel="author" , e como ryanve e Jason mencionam, a addresstag foi projetada explicitamente para expressar a autoria também.
Dan Dascalescu

19

De acordo com as especificações do HTML5, você provavelmente deseja address.

O elemento de endereço representa as informações de contato do artigo mais próximo ou ancestral do elemento de corpo.

As especificações são referências adicionais addressem relação aos autores aqui

Sob 4.4.4

As informações do autor associadas a um elemento de artigo (qv o elemento de endereço) não se aplicam a elementos de artigo aninhados.

Abaixo de 4.4.9

As informações de contato do autor ou editor de uma seção pertencem a um elemento de endereço, possivelmente dentro de um rodapé.

Tudo isso parece addressser a melhor tag para essa informação.

Dito isso, você também pode dar seu addressa relou classde author.

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

Leia mais: http://dev.w3.org/html5/spec/sections.html#the-address-element


1
Obrigado Jason, você sabe o que "qv" significa? Em> 4.4.4> as informações do autor associadas a um elemento de artigo (qv o elemento de endereço) não se aplicam a elementos de artigo aninhados.
Quang Van

3
@QuangVan - (espere, suas iniciais são ... qv hmm) - qv significa "quod vide" ou "sobre este (assunto) vá ver" - filho sobre o assunto "qv" vá ver english.stackexchange.com/questions / 25252 /… (qv) haha
pageman de

@JasonGennaro haha ​​nanos gigantum humeris insidentes!
pageman

lol, demorei um pouco para descobrir a que esses comentários se referiam ... Obrigado pela lição latina :)
Quang Van

9

O suporte do Google para rel = "author" foi descontinuado :

"A marcação de autoria não é mais compatível com a pesquisa na web."

Use um elemento de lista de descrições (lista de definições em HTML 4.01).

Da especificação HTML5 :

O elemento dl representa uma lista de associação que consiste em zero ou mais grupos nome-valor (uma lista de descrição). Um grupo nome-valor consiste em um ou mais nomes (elementos dt) seguidos por um ou mais valores (elementos dd), ignorando quaisquer nós diferentes dos elementos dt e dd. Em um único elemento dl, não deve haver mais de um elemento dt para cada nome.

Os grupos nome-valor podem ser termos e definições, tópicos e valores de metadados, perguntas e respostas ou quaisquer outros grupos de dados nome-valor.

Autoria e outras informações meta do artigo se encaixam perfeitamente nesta chave: estrutura de par de valores:

  • quem é o autor
  • data em que o artigo foi publicado
  • estrutura do site sob a qual o artigo é organizado (categoria / tag: string / arrays)
  • etc.

Um exemplo opinativo:

<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="remy@blog.net"><img src="email-sprite.png"></a></dd>
    </dl>
  </header>
  <section class="content">
    <!-- article content goes here -->
  </section>
</article>

Como você pode ver quando se utiliza o <dl>elemento de informações artigo meta, somos livres para embrulhar <address>, <a>e até mesmo <img>tags <dt>e / ou <dd>marcas de acordo com a natureza do conteúdo e é destinado função .
As tags <dl>, <dt>e <dd>são livres para fazer seu trabalho - semanticamente - transmitir informações sobre o pai <article>; <a>, <img>e <address>são igualmente livres para fazer seu trabalho - de novo, semanticamente - transmitindo informações sobre onde encontrar conteúdo relacionado, apresentação visual não verbal e detalhes de contato de partes autorizadas, respectivamente.


9

Em HTML5 podemos usar alguns rótulos semânticos que ajudam a organizar as informações sobre o seu tipo de conteúdo, mas adicionais e relacionados ao assunto, você pode verificar o schema.org . É uma iniciativa do Google, Bing e Yahoo que visa ajudar os buscadores a entender melhor os sites por meio de atributos de microdados. 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>

1
Definitivamente, a resposta mais precisa para 2019.
Simon G

3
Observe que o schema.org não faz parte do HTML5. É uma especificação separada.
ya.teck


3

Que tal microdados :

<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>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.