web-dev-qa-db-ja.com

著者の名前をマークアップするために使用するHTML5タグはどれですか？

ブログ投稿や記事の例。

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

authorタグは存在しません...では、著者によく使用されるHTML5タグは何ですか？ありがとう。

（ない場合は、あるべきではありませんか？）

html5tagsblogssemantic-markup
88
Quang Van

HTML5には author link type ：があります

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

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

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

rel="author" と <address> の両方が、まさにこの目的のために設計されています。どちらもHTML5でサポートされています。仕様では、 rel="author" を <link><a>および<area>要素で使用できることが示されています。 Googleも 推奨 その 使用法 です。 <address>とrel="author"の使用を組み合わせることは最適のようです。 HTML5では、次のようにラッピングが可能です <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>
107
ryanve

HTML5仕様によると、おそらくaddressが必要でしょう。

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

仕様では、著者に関するaddressをさらに参照しています。

4.4.4の下

Article要素（q.v. address要素）に関連付けられた著者情報は、ネストされたarticle要素には適用されません。

4.4.9の下

セクションの作成者または編集者の連絡先情報はアドレス要素に属し、フッター内に含まれることもあります。

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

ただし、addressにrelまたはclassのauthorを与えることもできます。

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

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

17
Jason Gennaro

Rel = "author"のGoogleサポート 非推奨 ：

「著者マークアップはウェブ検索でサポートされなくなりました。」

説明リスト（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="[email protected]"><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
remyActual

HTML5では、コンテンツのタイプに関する情報を整理するのに役立ついくつかのセマンティックラベルを使用できますが、 schema.org で確認できるサブジェクトに追加および関連しています。 Google、Bing、Yahooのイニシアチブは、検索エンジンがmicrodata属性を通じてWebサイトをよりよく理解できるようにすることを目的としています。 Tu postpodríatener 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

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

使用できます

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

HTML5仕様 に従って、ヘッダーで。

2
Raphael

著者の連絡先の詳細を含める場合は、<address>タグが適切です：

しかし、それが文字通り著者の名前だけである場合、そのための特定のタグはありません。 HTMLには人との関連はあまりありません。

1
Paul D. Waite