我应该使用哪个HTML5标记来标记作者的姓名?

Qua*_*Van 88 tags html5 blogs semantic-markup

例如博客文章或文章.

<article>
<h1>header<h1>
<time>09-02-2011</time>
<author>John</author>
My article....
</article>
Run Code Online (Sandbox Code Playgroud)

虽然author标签不存在......那么作者常用的HTML5标签是什么?谢谢.

(如果没有,不应该有吗?)

rya*_*nve 107

双方rel="author"<address>设计用于此确切目的.HTML5都支持这两种方式.该规范告诉我们rel="author"可以使用和元素.谷歌也建议使用它.结合使用和似乎是最佳的.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>
Run Code Online (Sandbox Code Playgroud)
  • pubdate属性表示这是发布日期.

  • title属性是可选的天桥.

  • 也可以将换行信息包含在一个<footer><article>

如果你想添加hcard微格式,那么我会这样做:

<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>
Run Code Online (Sandbox Code Playgroud)

  • 由于'pubdate`属性已从WHATWG和W3C规范中删除,正如Bruce Lawson在[这里](http://www.brucelawson.co.uk/2012/best-of-time/)所写,我建议你从你的答案中删除它. (4认同)
  • 不应该在<address>标记之前加"By"吗?它实际上不是地址的一部分. (2认同)
  • 这应该是公认的答案. (2认同)

rob*_*rtc 48

HTML5有一个作者链接类型:

<a href="http://johnsplace.com" rel="author">John</a>
Run Code Online (Sandbox Code Playgroud)

这里的弱点是它需要处于某种联系,但如果你有这种联系,那么这里有很多关于替代方案的讨论.如果你没有链接,那么只需使用一个类属性,它就是它的用途:

<span class="author">John</span>
Run Code Online (Sandbox Code Playgroud)

  • 这个答案不再是最好的了.[Google不再支持`rel ="author"`](https://support.google.com/webmasters/answer/6083347?rd=1),以及[ryanve](http://stackoverflow.com/questions/7290504 /这-HTML5的标签应-I-使用到标记上的执笔者-S-名称/ 7295013#7295013)和Jason提到的`address`标签被设计明确地表达作者以及. (4认同)
  • @Quang是的,我认为没有实际链接的链接类型会破坏尝试在语义上标记它的目的. (3认同)
  • @Quang:`rel`属性用于描述链接的目的地.如果链接没有目的地,`rel`就没有意义了. (3认同)
  • 您可能还想查看http://schema.org/以了解表达此类信息的方法. (2认同)

Jas*_*aro 17

根据HTML5规范,您可能想要address.

address元素表示其最近的文章或正文元素祖先的联系信息.

该规范进一步引用address了作者

根据4.4.4

与article元素相关联的作者信息(qv,address元素)不适用于嵌套的article元素.

根据4.4.9

部分的作者或编辑者的联系信息属于地址元素,可能本身在页脚内.

所有这些似乎address都是这个信息的最佳标签.

也就是说,你也可以给你address一个rel或者class一个author.

<address class="author">Jason Gennaro</address>
Run Code Online (Sandbox Code Playgroud)

阅读更多:http://dev.w3.org/html5/spec/sections.html#the-address-element

  • @QuangVan - (等等,你的姓名首字母是...... qv嗯) - qv的意思是"quod vide"或"on this(matter)go see" - 儿子关于"qv"的问题去看http://english.stackexchange .com/questions/25252/how-does-one-correct-use-qv(qv)哈哈 (3认同)

小智 16

在 HTML5 中,我们可以使用一些语义标签来帮助组织有关您的内容类型的信息,但您可以查看与主题相关的附加信息schema.org。这是谷歌、必应和雅虎的一项倡议,旨在通过微数据属性帮助搜索引擎更好地理解网站。您的帖子可能如下所示:

<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>
Run Code Online (Sandbox Code Playgroud)

  • 请注意,schema.org 不是 HTML5 的一部分。这是一个单独的规范。 (5认同)

rem*_*ual 9

对于相对="作者"谷歌的支持已经过时:

"网络搜索不再支持作者标记."

使用描述列表(HTML 4.01中的定义列表)元素.

来自HTML5规范:

dl元素表示由零个或多个名称 - 值组(描述列表)组成的关联列表.名称 - 值组由一个或多个名称(dt元素)后跟一个或多个值(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>
Run Code Online (Sandbox Code Playgroud)

正如您在使用<dl>元素获取文章元信息时所看到的那样,我们可以根据内容的性质和预期的功能自由地包装<address>,<a>甚至<img>标记<dt>和/或<dd>标记. 的,并且标签可以自由地做他们的工作-语义-输送更多地了解家长的信息; ,并且也同样可以自由地做他们的工作-再次,语义-输送关于在哪里,找到相关内容,非语言的视觉呈现,以及联系方式分别为权威方的信息.
<dl><dt><dd><article><a><img><address>


Rap*_*ael 6

您可以使用

<meta name="author" content="John Doe">
Run Code Online (Sandbox Code Playgroud)

根据HTML5 规范在标头中。