著者の名前をマークアップするには、どのHTML5タグを使用すればよいですか?


96

たとえば、ブログの投稿や記事です。

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

しかし、authorタグは存在しません...では、作者が一般的に使用するHTML5タグは何ですか?ありがとう。

(存在しない場合、存在すべきではありませんか?)


<cite>多分?わかんないけど。:Pただし、スタイルの違いはほとんどありません。
ジョセフマリクル

2
それはスタイルについてではありません。技術的には、フォントサイズを大きくするだけで<p>を使用して見出しを作成できます。しかし、検索エンジンはそれをそのように理解しません。
jalgames 2014

2
timeそのような要素を使用することはできません。dd-mm-yyyは認識される形式の1つではないためdatetimetime要素の属性に機械で読み取り可能なバージョン(認識される形式の1つ)を指定する必要があります。w3.org/TR/2014/REC-html5-20141028/…を
Andreas Rejbrand 2014年

1
受け入れられた(robertcの)答えよりも良い答えがあります。
Dan Dascalescu 2016年

回答:


113

両方rel="author"<address>この正確な目的のために設計されています。どちらもHTML5でサポートされています。仕様は、および要素でrel="author"使用できることを示しています。Googleもその使用を推奨しています。との組み合わせの使用は最適と思われます。HTML5 は、次のように見出しと署名の情報をラップするのに最適です。<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>
  • pubdate属性は、その発行日であることを示しています。

  • title属性はオプションフライオーバーです。

  • 署名欄情報は、別の方法として<footer><article>

hcard microformatを追加する場合は、次のようにします。

<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
「By」を<address>タグの前に置くべきではありませんか?実際には住所の一部ではありません。
aridlehoover 2013年

1
@aridlehooverどちらもwhatwg.org/specs/web-apps/current-work/multipage/…によれば正しいようです -外部.byline address { display:inline; font-style:inherit }block場合、ブラウザのデフォルトを上書きするために使用します。
ライアンブ2013年

@aridlehoover私もそれ<dl>が実行可能だと思います。たとえば、demo.actiontheme.com / sample-pageのソースにあるバイラインマークアップを参照してください。
ライアンブ2013年

4
このpubdate属性はWHATWGとW3Cの両方の仕様から削除されているため、Bruce Lawsonがここに書いているように、回答から削除することをお勧めします。
Paul Kozlovitch、2015

51

HTML5には著者リンクタイプがあります。

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

ここの弱点は、それが何らかのリンク上にある必要があるということですが、それがある場合は、ここで代替案についての長い議論があります。リンクがない場合は、クラス属性を使用するだけです。それが目的です。

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

3
@Quangはい、実際のリンクのないリンクタイプは、意味的にマークアップしようとする目的に反すると思います。
robertc

3
@Quang:relリンクの宛先が何であるかを説明する属性があります。リンクに宛先がない場合は、rel意味がありません。
ポールD.ウェイト2011

2
このタイプの情報を表現する方法については、schema.orgもご覧ください。
Michael Mior 2013年

1
@ jdh8ジョンは作品のタイトルで
robertc

6
この答えはもはや最高ではありません。Googleはサポートしなくなりましたrel="author"。また、ryanveとJasonが述べたように、addressタグは作者を表すためにも明示的に設計されました。
Dan Dascalescu

19

HTML5仕様によると、おそらく必要ですaddress

address要素は、最も近い記事またはbody要素の祖先の連絡先情報を表します。

仕様はaddress、ここで著者に関してさらに参照します

4.4.4未満

アーティクル要素(アドレス要素のqv)に関連付けられた作成者情報は、ネストされたアーティクル要素には適用されません。

4.4.9未満

セクションの作成者または編集者の連絡先情報は、おそらくそれ自体がフッター内のアドレス要素に属しています。

これらすべてがaddress、この情報に最適なタグであると思われます。

そうは言っても、あなたのaddressa relまたはclassを与えることができますauthor

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

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


1
ジェイソン、ありがとう、 "qv"の意味を知っていますか?> 4.4.4の下で、article要素(qv address要素)に関連付けられた作成者情報は、ネストされたarticle要素には適用されません。
クアンヴァン

3
@QuangVan-(待って、あなたのイニシャルは... qv hmm)-qvは「クォードヴィデ」または「これについて(問題)見に行く」を意味します-「qv」の問題についての息子english.stackexchange.com/questionsをご覧ください/ 25252 /…(qv)笑
ページマン

@JasonGennaro haha​​ nanos gigantum humeris insidentes!
pageman、2014

笑、これらのコメントはラテンlessionのために...おかげで言及されたかを把握する私にしばらく時間がかかった:)
クアンヴァン

9

rel = "author"に対するGoogleサポートは廃止されました

「著者情報のマークアップはWeb検索でサポートされなくなりました。」

説明リスト(HTML 4.01の定義リスト)要素を使用します。

HTML5仕様から:

dl要素は、0個以上の名前と値のグループで構成される関連付けリスト(記述リスト)を表します。名前値グループは、1つ以上の名前(dt要素)とそれに続く1つ以上の値(dd要素)で構成され、dt要素とdd要素以外のノードは無視されます。単一のdl要素内には、名前ごとに複数のdt要素があってはなりません。

名前と値のグループは、用語と定義、メタデータのトピックと値、質問と回答、または名前と値のデータの他のグループです。

著者とその他の記事のメタ情報は、このキーと値のペア構造に完全に適合します。

  • 作者は誰
  • 記事が公開された日付
  • 記事が構成されているサイト構造(カテゴリ/タグ:文字列/配列)

考え抜かれた例:

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

<dl>要素を記事のメタ情報に使用するときにわかるように、コンテンツの性質とその目的の機能に応じて自由にラップし<address>たり<a><img>タグを追加し<dt>たりでき<dd>ます。、および意味的に- -タグは自分の仕事をするのは自由です親についての情報を伝えます。、そして同様に彼らの仕事を自由に行うことができます-再び、意味的に-関連するコンテンツの検索場所に関する情報、非言語的な視覚的プレゼンテーション、および権威ある当事者の連絡先の詳細をそれぞれ伝えます。
<dl><dt><dd><article><a><img><address>


9

HTML5では、コンテンツのタイプに関する情報を整理するのに役立ついくつかのセマンティックラベルを使用できますが、追加で主題に関連する場合はschema.orgを確認できます。これは、検索エンジンがmicrodata属性を通じてウェブサイトをよりよく理解できるようにすることを目的とした、Google、Bing、Yahooの取り組みです。Tu postpodríatener el siguienteアスペクト:

<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
確かに2019年のための最も正確な答え
サイモン・G

3
schema.orgはHTML5の一部ではないことに注意してください。別仕様です。
ya.teck


3

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>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.