Tag HTML5 mana yang harus saya gunakan untuk menandai nama penulis?


97

Misalnya posting blog atau artikel.

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

Namun, authortag tersebut tidak ada ... Jadi apa tag HTML5 yang umum digunakan untuk penulis? Terima kasih.

(Jika tidak ada, bukankah seharusnya ada?)


<cite>mungkin? Saya tidak tahu lol. : P Tidak membuat banyak perbedaan dalam gaya.
Joseph Marikle

2
Ini bukan tentang gaya. Secara teknis, Anda dapat menggunakan <p> untuk membuat tajuk hanya dengan meningkatkan ukuran font. Tetapi mesin pencari tidak akan memahaminya seperti itu.
jalgames

2
Anda tidak diperbolehkan menggunakan timeelemen seperti itu. Karena dd-mm-yyybukan salah satu format yang dikenali, Anda harus memberikan versi yang dapat dibaca mesin (dalam salah satu format yang dikenali) di datetimeatribut timeelemen. Lihat w3.org/TR/2014/REC-html5-20141028/…
Andreas Rejbrand

1
Ada jawaban yang lebih baik sekarang daripada yang diterima (Robertc).
Dan Dascalescu

Jawaban:


114

Keduanya rel="author"dan <address>dirancang untuk tujuan yang tepat ini. Keduanya didukung dalam HTML5. Spesifikasi memberi tahu kita bahwa rel="author"dapat digunakan pada , dan elemen. Google juga merekomendasikan nya penggunaan . Menggabungkan penggunaan dan tampaknya optimal. HTML5 paling baik memberikan informasi headline dan bylines yang membungkus seperti ini:<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>
  • The pubdateatribut menunjukkan bahwa itu adalah tanggal diterbitkan.

  • The titleatribut jalan layang opsional.

  • Info byline sebagai alternatif bisa dibungkus <footer>dalam<article>

Jika Anda ingin menambahkan mikroformat hcard , saya akan melakukannya seperti ini:

<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
Bukankah "Oleh" harus mendahului tag <address>? Ini sebenarnya bukan bagian dari alamat.
aridlehoover

1
@aridlehoover Salah satu tampaknya benar menurut whatwg.org/specs/web-apps/current-work/multipage/… - Jika di luar, gunakan .byline address { display:inline; font-style:inherit }untuk menimpa blockdefault di browser.
ryanve

@aridlehoover Saya juga berpikir itu <dl>layak. Lihat markup byline di sumber demo.actiontheme.com/sample-page misalnya.
ryanve

4
Karena pubdateatribut sudah hilang dari spesifikasi WHATWG dan W3C, seperti yang ditulis Bruce Lawson di sini , saya sarankan Anda untuk menghapusnya dari jawaban Anda.
Paul Kozlovitch

51

HTML5 memiliki tipe link penulis :

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

Kelemahannya di sini adalah bahwa itu perlu pada semacam tautan, tetapi jika Anda memilikinya, ada diskusi panjang tentang alternatif di sini . Jika Anda tidak memiliki link, gunakan saja atribut class, untuk itulah:

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

3
@Quang Ya, menurut saya jenis tautan tanpa tautan aktual akan menggagalkan tujuan mencoba menandainya secara semantik.
robertc

3
@Quang: relatribut ada di sana untuk menjelaskan tujuan tautan. Jika link tidak memiliki tujuan, reltidak ada artinya.
Paul D. Waite

2
Anda mungkin juga ingin melihat schema.org untuk mengetahui cara mengungkapkan jenis informasi ini.
Michael Mior

1
@ jdh8 Karena John bukan judul sebuah karya
robertc

6
Jawaban ini bukan yang terbaik lagi. Google tidak lagi mendukungrel="author" , dan seperti yang disebutkan oleh ryanve dan Jason, addresstag tersebut juga secara eksplisit dirancang untuk mengekspresikan kepengarangan.
Dan Dascalescu

19

Menurut spesifikasi HTML5, Anda mungkin menginginkannya address.

Elemen alamat mewakili informasi kontak untuk artikel terdekat atau elemen badan leluhurnya.

Spesifikasi referensi lebih lanjut address sehubungan dengan penulis di sini

Di bawah 4.4.4

Informasi penulis yang terkait dengan elemen artikel (qv elemen alamat) tidak berlaku untuk elemen artikel bertingkat.

Di bawah 4.4.9

Informasi kontak untuk penulis atau editor bagian termasuk dalam elemen alamat, mungkin itu sendiri di dalam footer.

Semua itu membuatnya tampak addressseperti tag terbaik untuk info ini.

Meskipun demikian, Anda juga dapat memberikan addressa relatau classdari author.

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

Baca lebih lanjut: http://dev.w3.org/html5/spec/sections.html#the-address-element


1
Terima kasih Jason, apakah kamu tahu apa artinya "qv"? Di bawah> 4.4.4> Informasi penulis yang terkait dengan elemen artikel (qv elemen alamat) tidak berlaku untuk elemen artikel bertingkat.
Quang Van

3
@QuangVan - (tunggu, inisial Anda adalah ... qv hmm) - qv berarti "quod vide" atau "dalam hal ini (masalah) lihat" - nak tentang masalah "qv" lihat english.stackexchange.com/questions / 25252 /… (qv) haha
pageman

@JasonGennaro haha ​​nanos gigantum humeris insidentes!
pageman

lol, butuh beberapa saat untuk mencari tahu apa yang dirujuk komentar ini ... Terima kasih untuk bahasa Latinnya :)
Quang Van

10

Di HTML5 kita dapat menggunakan beberapa label semantik yang membantu mengatur informasi mengenai jenis konten Anda, tetapi tambahan dan terkait dengan subjek Anda dapat memeriksa schema.org . Ini adalah inisiatif dari Google, Bing dan Yahoo yang bertujuan untuk membantu mesin pencari untuk lebih memahami situs web melalui atribut microdata. Tu posting podría tener el siguiente aspek:

<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
Pasti jawaban paling akurat untuk 2019.
Simon G

3
Perhatikan bahwa schema.org bukan bagian dari HTML5. Ini adalah spesifikasi terpisah.
ya. Cek

9

Dukungan Google untuk rel = "author" tidak digunakan lagi :

"Markup kepengarangan tidak lagi didukung dalam penelusuran web."

Gunakan elemen Daftar Deskripsi (Daftar Definisi dalam HTML 4.01).

Dari spesifikasi HTML5 :

Elemen dl mewakili daftar asosiasi yang terdiri dari nol atau lebih grup nama-nilai (daftar deskripsi). Grup nama-nilai terdiri dari satu atau beberapa nama (elemen dt) diikuti oleh satu atau beberapa nilai (elemen dd), mengabaikan node apa pun selain elemen dt dan dd. Dalam satu elemen dl, tidak boleh ada lebih dari satu elemen dt untuk setiap nama.

Kelompok nilai-nama dapat berupa istilah dan definisi, topik dan nilai metadata, pertanyaan dan jawaban, atau kelompok data nilai nama lainnya.

Kepengarangan dan informasi meta artikel lainnya sangat cocok dengan kunci ini: struktur pasangan nilai:

  • siapa penulisnya
  • tanggal artikel diterbitkan
  • struktur situs tempat artikel diatur (kategori / tag: string / array)
  • dll.

Contoh beropini:

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

Seperti yang Anda lihat saat menggunakan <dl>elemen untuk informasi meta artikel, kami bebas untuk membungkus <address>, <a>dan bahkan memberi <img>tag <dt>dan / atau <dd>tag sesuai dengan sifat konten dan fungsi yang dimaksudkan .
The <dl>, <dt>dan <dd>tag bebas untuk melakukan pekerjaan mereka - semantik - menyampaikan informasi tentang orang tua <article>; <a>, <img>dan <address>juga bebas untuk melakukan pekerjaan mereka - sekali lagi, secara semantik - menyampaikan informasi mengenai di mana menemukan konten terkait, presentasi visual non-verbal, dan detail kontak untuk pihak yang berwenang.



3

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.