Którego tagu HTML5 należy użyć, aby oznaczyć nazwisko autora?


97

Na przykład post na blogu lub artykuł.

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

Ten authortag jednak nie istnieje ... Więc jaki jest powszechnie używany tag HTML5 dla autorów? Dzięki.

(Jeśli nie ma, czy nie powinno być?)


<cite>może? Nie wiem lol. : P Nie robi jednak dużej różnicy w stylu.
Joseph Marikle,

2
Nie chodzi o styl. Technicznie rzecz biorąc, możesz użyć <p> do utworzenia nagłówka, po prostu zwiększając rozmiar czcionki. Ale wyszukiwarki tak tego nie zrozumieją.
jalgames

2
Nie możesz używać tego timeelementu w ten sposób. Ponieważ dd-mm-yyynie jest jednym z rozpoznawanych formatów, musisz podać wersję do odczytu maszynowego (w jednym z rozpoznawanych formatów) w datetimeatrybucie timeelementu. Zobacz w3.org/TR/2014/REC-html5-20141028/…
Andreas Rejbrand

1
Jest teraz lepsza odpowiedź niż zaakceptowana (robertc).
Dan Dascalescu

Odpowiedzi:


115

Obie rel="author"i <address>są przeznaczone do tego właśnie celu. Oba są obsługiwane w HTML5. Specyfikacja mówi nam, że rel="author"można go używać w elementach i . Google również zaleca jego użycie . Łączenie użycia i wydaje się optymalne. HTML5 najlepiej umożliwia zawijanie nagłówków i informacji bocznych w następujący sposób:<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>
  • pubdateAtrybut wskazuje, że jest Data opublikowania.

  • Te titleatrybuty są opcjonalne estakady.

  • Informacje o autorze mogą być alternatywnie umieszczone <footer>w pliku<article>

Jeśli chcesz dodać mikroformat hcard , zrobię to w ten sposób:

<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
Czy „By” nie powinno poprzedzać tagu <address>? W rzeczywistości nie jest to część adresu.
aridlehoover

1
@aridlehoover Albo wydaje się poprawne, zgodnie z whatwg.org/specs/web-apps/current-work/multipage/ ... - Jeśli na zewnątrz, użyj .byline address { display:inline; font-style:inherit }do nadpisania wartości blockdomyślnej w przeglądarkach.
ryanve

@aridlehoover też uważam, że <dl>to wykonalne. Zobacz na przykład znaczniki byline w źródle demo.actiontheme.com/sample-page .
ryanve

4
Ponieważ pubdateatrybut zniknął ze specyfikacji WHATWG i W3C, jak pisze tutaj Bruce Lawson , proponuję usunąć go z odpowiedzi.
Paul Kozlovitch

51

HTML5 ma typ linku autora :

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

Słabość polega na tym, że musi być na jakimś łączu, ale jeśli tak jest, jest tu długa dyskusja na temat alternatyw . Jeśli nie masz linku, po prostu użyj atrybutu class, do tego służy:

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

3
@Quang Tak, myślę, że typ linku bez rzeczywistego linku zniweczyłby cel próby oznaczenia go semantycznie.
robertc

3
@Quang: relatrybut służy do opisania miejsca docelowego linku. Jeśli link nie ma celu, reljest bez znaczenia.
Paul D. Waite,

2
Możesz również zajrzeć na schema.org, aby znaleźć sposoby wyrażania tego typu informacji.
Michael Mior,

1
@ jdh8 Ponieważ Jan nie jest tytułem pracy
robertc

6
Ta odpowiedź nie jest już najlepsza. Google już nie obsługujerel="author" , a jak wspominają ryanve i Jason, addresstag został wyraźnie zaprojektowany również w celu wyrażenia autorstwa.
Dan Dascalescu

19

Zgodnie ze specyfikacją HTML5 prawdopodobnie chcesz address.

Element address reprezentuje informacje kontaktowe swojego najbliższego przodka artykułu lub elementu treści.

Specyfikuje dalsze odniesienia addressw odniesieniu do autorów tutaj

Zgodnie z 4.4.4

Informacje o autorze powiązane z elementem artykułu (qv element adresu) nie dotyczą zagnieżdżonych elementów artykułu.

Pod 4.4.9

Informacje kontaktowe autora lub redaktora sekcji znajdują się w elemencie adresu, prawdopodobnie w stopce.

Wszystko to sprawia, że ​​wydaje się, że addressjest to najlepszy tag dla tych informacji.

Mimo to, można również nadać addressA rellub classod author.

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

Czytaj więcej: http://dev.w3.org/html5/spec/sections.html#the-address-element


1
Dzięki Jason, czy wiesz, co oznacza „qv”? W obszarze> 4.4.4> Informacje o autorze powiązane z elementem artykułu (qv element adresu) nie dotyczą zagnieżdżonych elementów artykułu.
Quang Van

3
@QuangVan - (czekaj, twoje inicjały to ... qv hmm) - qv oznacza „quod vide” lub „w tej sprawie” - syn w sprawie „qv” przejdź na stronę english.stackexchange.com/questions / 25252 /… (qv) haha
pageman

@JasonGennaro haha ​​nanos gigantum humeris insidentes!
pageman,

lol, zajęło mi trochę czasu, zanim zrozumiałem, do czego odnoszą się te komentarze ... Dzięki za lekcję łaciny :)
Quang Van

11

W HTML5 możemy użyć niektórych etykiet semantycznych, które pomagają uporządkować informacje dotyczące rodzaju treści, ale dodatkowe i związane z tematem możesz sprawdzić na schema.org . Jest to inicjatywa Google, Bing i Yahoo, której celem jest pomoc wyszukiwarkom w lepszym zrozumieniu witryn internetowych za pomocą atrybutów mikrodanych. 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
Zdecydowanie najdokładniejsza odpowiedź na rok 2019.
Simon G

3
Pamiętaj, że schema.org nie jest częścią HTML5. To osobna specyfikacja.
ya.teck

9

Pomoc Google dotycząca rel = "author" została wycofana :

„Znaczniki autorstwa nie są już obsługiwane w wyszukiwaniu internetowym”.

Użyj elementu Lista opisów (lista definicji w HTML 4.01).

Z specyfikacji HTML5 :

Element dl reprezentuje listę skojarzeń składającą się z zera lub większej liczby grup nazwa-wartość (lista opisów). Grupa nazwa-wartość składa się z jednej lub więcej nazw (elementów dt), po których następuje co najmniej jedna wartość (elementy dd), ignorując wszystkie węzły inne niż elementy dt i dd. W pojedynczym elemencie dl nie powinno być więcej niż jeden element dt dla każdej nazwy.

Grupami nazwa-wartość mogą być terminy i definicje, tematy i wartości metadanych, pytania i odpowiedzi lub dowolne inne grupy danych nazwa-wartość.

Autorstwo i inne meta informacje o artykule idealnie pasują do tej struktury klucza: pary wartości:

  • kto jest autorem
  • data publikacji artykułu
  • struktura serwisu, w ramach której zorganizowany jest artykuł (kategoria / tag: ciąg znaków / tablice)
  • itp.

Uparty przykład:

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

Jak widać podczas używania <dl>elementu do metainformacji artykułu, możemy dowolnie zawijać <address>, <a>a nawet umieszczać <img>znaczniki <dt>i / lub <dd>tagi w zależności od charakteru treści i jej zamierzonej funkcji .
Znaczniki <dl>, <dt>i <dd>mogą wykonywać swoją pracę - semantycznie - przekazując informacje o rodzicu <article>; <a>, <img>i <address>podobnie mogą swobodnie wykonywać swoją pracę - ponownie, semantycznie - przekazując informacje dotyczące odpowiednio tego, gdzie znaleźć powiązane treści, niewerbalną prezentację wizualną i dane kontaktowe do autorytatywnych stron.



3

A co z mikrodanymi :

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.