Welches HTML5-Tag soll ich verwenden, um den Namen eines Autors zu markieren?


96

Zum Beispiel eines Blogposts oder Artikels.

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

Das authorTag existiert jedoch nicht ... Was ist das häufig verwendete HTML5-Tag für Autoren? Vielen Dank.

(Wenn nicht, sollte es keine geben?)


<cite>vielleicht? Ich weiß nicht lol. : P Macht aber keinen großen Unterschied im Stil.
Joseph Marikle

2
Es geht nicht um Stil. Technisch gesehen können Sie ein <p> verwenden, um eine Überschrift zu erstellen, indem Sie einfach die Schriftgröße erhöhen. Aber Suchmaschinen werden das nicht so verstehen.
Jalgames

2
Sie dürfen das timeElement nicht so verwenden. Da dd-mm-yyyes sich nicht um eines der erkannten Formate handelt, müssen Sie in einem datetimeAttribut des timeElements eine maschinenlesbare Version (in einem der erkannten Formate) angeben. Siehe w3.org/TR/2014/REC-html5-20141028/…
Andreas Rejbrand

1
Es gibt jetzt eine bessere Antwort als die akzeptierte (Robertc's).
Dan Dascalescu

Antworten:


113

Beide rel="author"und <address>sind genau für diesen Zweck konzipiert. Beide werden in HTML5 unterstützt. Die Spezifikation sagt uns, dass rel="author"für und Elemente verwendet werden kann. Google empfiehlt auch die Verwendung . Die Verwendung von und scheint optimal zu sein. HTML5 bietet am besten die Möglichkeit, Überschriften und Byline-Informationen wie folgt zu verpacken :<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>
  • Das pubdateAttribut gibt an, dass dies das Veröffentlichungsdatum ist.

  • Die titleAttribute sind optionale Überführungen.

  • Die Byline-Informationen können alternativ in ein <footer>innerhalb eines eingeschlossen werden<article>

Wenn Sie das hcard-Mikroformat hinzufügen möchten , würde ich dies folgendermaßen tun:

<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
Sollte "By" nicht vor dem <address> -Tag stehen? Es ist eigentlich kein Teil der Adresse.
Aridlehoover

1
@aridlehoover Beides scheint gemäß whatwg.org/specs/web-apps/current-work/multipage/… korrekt zu sein. - Wenn außerhalb, verwenden Sie .byline address { display:inline; font-style:inherit }, um die blockStandardeinstellung in Browsern zu überschreiben .
Ryanve

@aridlehoover Ich denke auch, dass das machbar <dl>ist. Siehe zum Beispiel das Byline-Markup in der Quelle von demo.actiontheme.com/sample-page .
Ryanve

4
Da das pubdateAttribut sowohl aus den WHATWG- als auch aus den W3C-Spezifikationen entfernt ist, wie Bruce Lawson hier schreibt , empfehle ich Ihnen, es aus Ihrer Antwort zu entfernen.
Paul Kozlovitch

51

HTML5 hat einen Autorenlink-Typ :

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

Die Schwäche hier ist, dass es sich um eine Art Link handeln muss, aber wenn Sie das haben, gibt es hier eine lange Diskussion über Alternativen . Wenn Sie keinen Link haben, verwenden Sie einfach ein Klassenattribut.

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

3
@Quang Ja, ich denke, ein Link-Typ ohne tatsächlichen Link würde den Zweck des Versuchs, ihn semantisch zu markieren, zunichte machen.
Robertc

3
@Quang: Das relAttribut beschreibt das Ziel des Links. Wenn der Link kein Ziel hat, relist er bedeutungslos.
Paul D. Waite

2
Vielleicht möchten Sie auch auf schema.org nach Möglichkeiten suchen, diese Art von Informationen auszudrücken.
Michael Mior

1
@ jdh8 Weil John nicht der Titel eines Werkes ist
robertc

6
Diese Antwort ist einfach nicht mehr die beste. Google unterstützt nicht mehrrel="author" , und wie Ryanve und Jason erwähnen, wurde das addressTag explizit entwickelt, um auch die Urheberschaft auszudrücken.
Dan Dascalescu

19

Gemäß der HTML5-Spezifikation möchten Sie wahrscheinlich address.

Das Adresselement repräsentiert die Kontaktinformationen für den nächsten Artikel- oder Körperelementvorfahren.

Die Spezifikation verweist addresshier weiter auf Autoren

Unter 4.4.4

Mit einem Artikelelement verknüpfte Autoreninformationen (siehe Adresselement) gelten nicht für verschachtelte Artikelelemente.

Unter 4.4.9

Kontaktinformationen für den Autor oder Herausgeber eines Abschnitts gehören in ein Adresselement, möglicherweise selbst in eine Fußzeile.

All dies lässt es scheinen, dass dies addressdas beste Tag für diese Informationen ist.

Das heißt, Sie könnten auch addressein reloder classvon geben author.

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

Lesen Sie mehr: http://dev.w3.org/html5/spec/sections.html#the-address-element


1
Danke Jason, weißt du was "qv" bedeutet? Unter> 4.4.4> Mit einem Artikelelement verknüpfte Autoreninformationen (siehe Adresselement) gelten nicht für verschachtelte Artikelelemente.
Quang Van

3
@QuangVan - (warte, deine Initialen sind ... qv hmm) - qv bedeutet "quod vide" oder "in dieser (Angelegenheit) go see" - Sohn in Bezug auf "qv" go see english.stackexchange.com/questions / 25252 /… (siehe) haha
pageman

@ JasonGennaro haha ​​nanos gigantum humeris insidentes!
Pageman

lol, ich habe eine Weile gebraucht, um herauszufinden, worauf sich diese Kommentare beziehen ... Danke für die lateinische Lektion :)
Quang Van

9

Google-Unterstützung für rel = "author" ist veraltet :

"Autoren-Markup wird in der Websuche nicht mehr unterstützt."

Verwenden Sie ein Beschreibungslistenelement (Definitionsliste in HTML 4.01).

Aus der HTML5-Spezifikation :

Das Element dl stellt eine Zuordnungsliste dar, die aus null oder mehr Name-Wert-Gruppen besteht (eine Beschreibungsliste). Eine Name-Wert-Gruppe besteht aus einem oder mehreren Namen (dt-Elementen), gefolgt von einem oder mehreren Werten (dd-Elementen), wobei andere Knoten als dt- und dd-Elemente ignoriert werden. Innerhalb eines einzelnen dl-Elements sollte es nicht mehr als ein dt-Element für jeden Namen geben.

Namenswertgruppen können Begriffe und Definitionen, Metadatenthemen und -werte, Fragen und Antworten oder andere Gruppen von Namenswertdaten sein.

Autoren- und andere Artikel-Metainformationen passen perfekt in diesen Schlüssel: Wertepaarstruktur:

  • Wer ist der Autor
  • Datum der Veröffentlichung des Artikels
  • Site-Struktur, unter der der Artikel organisiert ist (Kategorie / Tag: String / Arrays)
  • etc.

Ein Beispiel mit einer Meinung:

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

Wie Sie sehen können , wenn die Verwendung von <dl>Element für Artikel Meta - Informationen, sind wir wickeln frei <address>, <a>und auch <img>Tags in <dt>und / oder <dd>Tags nach der Art des Inhalts und der Funktion bestimmt .
Die <dl>, <dt>und <dd>Tags sind frei , ihre Arbeit zu tun - semantisch - Informationen über die Mutterförder <article>; <a>, <img>Und <address>ist in ähnlicher Weise frei , ihre Arbeit zu tun - auch hier semantisch - Übermittlung von Informationen in Bezug auf, wo bezogene Inhalte zu finden, das nicht-verbale visuelle Präsentation und Kontaktdaten finden Sie maßgebliche Parteien, respectively.


9

In HTML5 können wir einige semantische Beschriftungen verwenden, mit denen Sie die Informationen zu Ihrem Inhaltstyp organisieren können . Sie können jedoch zusätzlich und themenbezogen schema.org überprüfen . Es ist eine Initiative von Google, Bing und Yahoo, die Suchmaschinen dabei helfen soll, Websites anhand von Mikrodatenattributen besser zu verstehen. Tu post podría tener el siguiente aspekt:

<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
Auf jeden Fall die genaueste Antwort für 2019.
Simon G

3
Beachten Sie, dass schema.org nicht Teil von HTML5 ist. Es ist eine separate Spezifikation.
ya.teck


3

Wie wäre es mit Mikrodaten :

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

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.