web-dev-qa-db-fra.com

Quelle balise HTML5 dois-je utiliser pour annoter le nom d’un auteur?

Par exemple d'un article de blog ou d'un article.

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

La balise author n'existe pas cependant ... Alors, quelle est la balise HTML5 couramment utilisée par les auteurs? Merci.

(S'il n'y en a pas, ne devrait-il pas en exister un?)

html5tagsblogssemantic-markup
88
Quang Van

HTML5 a un type de lien auteur :

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

La faiblesse ici est que cela doit être sur une sorte de lien, mais si vous en avez, il y a un longue discussion sur les alternatives ici . Si vous n'avez pas de lien, utilisez simplement un attribut de classe, voici pourquoi:

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

Tous les deux rel="author" et <address> sont conçus à cet effet. Les deux sont pris en charge en HTML5. La spécification nous dit que rel="author" peut être utilisé sur <link><a>, et <area> éléments. Google a également recommande sa tilisation . Combinaison d'utilisation de <address> et rel="author" semble optimal. HTML5 offre le meilleur emballage <article> informations de titre et de titre dans un <header> ainsi:

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

  • L'attribut pubdate indique qu'il s'agit de la date de publication.

  • Les attributs title sont des survols facultatifs.

  • Les informations sur la ligne peuvent également être placées dans un <footer> dans un <article>

Si vous voulez ajouter le microformat hcard, je le ferais comme ceci:

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

Selon les spécifications HTML5, vous voulez probablement address.

L'élément address représente les informations de contact pour son article le plus proche ou son ancêtre d'élément body.

La spécification fait référence à address en ce qui concerne les auteurs ici

sous 4.4.4

Les informations d'auteur associées à un élément d'article (q.v. l'élément d'adresse) ne s'appliquent pas aux éléments d'article imbriqués.

sous 4.4.9

Les informations de contact de l'auteur ou de l'éditeur d'une section appartiennent à un élément d'adresse, lui-même éventuellement situé dans un pied de page.

Tout cela donne à penser que address est la meilleure balise pour cette information.

Cela dit, vous pouvez également donner à votre address un rel ou class de author.

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

En savoir plus: http://dev.w3.org/html5/spec/sections.html#the-address-element

17
Jason Gennaro

Assistance Google pour rel = "author" obsolète :

"Le balisage de l'auteur n'est plus pris en charge dans la recherche Web."

Utilisez un élément List de description (liste de définitions en HTML 4.01).

De la spécification HTML5 :

L'élément dl représente une liste d'associations composée de zéro ou de plusieurs groupes de noms-valeurs (une liste de description). Un groupe nom-valeur se compose d'un ou de plusieurs noms (éléments dt) suivis d'une ou de plusieurs valeurs (éléments dd), en ignorant les nœuds autres que les éléments dt et dd. Dans un seul élément dl, il ne devrait pas y avoir plus d'un élément dt pour chaque nom.

Les groupes de noms-valeurs peuvent être des termes et définitions, des sujets et des valeurs de métadonnées, des questions et des réponses ou tout autre groupe de données de noms-valeurs.

La paternité et les autres méta-informations sur les articles s’intègrent parfaitement dans cette structure de paire de valeurs:

  • qui est l'auteur
  • date de publication de l'article
  • structure du site sous lequel l'article est organisé (category/tag: string/arrays)
  • etc.

Un exemple d'opinion:

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

Comme vous pouvez le constater lorsque vous utilisez l'élément <dl> Pour les méta-informations sur les articles, nous sommes libres d'envelopper les balises <address>, <a> Et même <img> Dans <dt> Et/ou <dd> En fonction de la nature du contenu et la fonction souhaitée .
Les balises <dl>, <dt> Et <dd> Sont libres de faire leur travail - transmettant sémantiquement - des informations sur le parent <article>; <a>, <img> Et <address> Sont également libres de faire leur travail - là encore, sémantiquement - transmettant des informations sur l'endroit où trouver du contenu associé, une présentation visuelle non verbale, et les coordonnées des parties autorisées, respectivement.

9
remyActual

En HTML5, nous pouvons utiliser certaines étiquettes sémantiques qui permettent d’organiser les informations relatives à votre type de contenu, mais vous pouvez également vérifier les informations supplémentaires liées au sujet schema.org . Il s'agit d'une initiative de Google, Bing et Yahoo visant à aider les moteurs de recherche à mieux comprendre les sites Web grâce aux attributs de microdonnées. Votre post-part 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>
3
HarleySG

Qu'en est-il de microdata :

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

Vous pouvez utiliser

<meta name="author" content="John Doe">

dans l'en-tête selon spécification HTML5 .

2
Raphael

Si vous incluiez les coordonnées de l'auteur, la balise <address> Est appropriée:

Mais s’il ne s’agit que du nom de l’auteur, il n’existe pas de balise spécifique pour cela. HTML n'inclut pas beaucoup de choses liées aux personnes.

1
Paul D. Waite