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


97

例如博客文章或文章。

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

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

(如果没有,应该不应该有一个?)


<cite>也许?我不知道大声笑。:P虽然在风格上并没有太大的区别。
Joseph Marikle 2011年

2
这与风格无关。从技术上讲,只需增加字体大小,就可以使用<p>创建标题。但是搜索引擎不会那样理解。
jalgames 2014年

2
不允许您使用time类似的元素。由于dd-mm-yyy不是公认的格式之一,因此您必须datetimetime元素的属性中提供机器可读的版本(以公认的格式之一)。见w3.org/TR/2014/REC-html5-20141028/...
安德烈亚斯Rejbrand

1
现在有一个比公认的(罗伯茨的)答案更好的答案
Dan Dascalescu

Answers:


114

两者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微格式,那么我会这样:

<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
不应在<address>标记之前使用“ By”吗?它实际上不是地址的一部分。
aridlehoover

1
@aridlehoover要么似乎是正确的,根据whatwg.org/specs/web-apps/current-work/multipage/... -如果外,利用.byline address { display:inline; font-style:inherit }覆盖block在浏览器中的默认。
ryanve

@aridlehoover我也认为这<dl>是可行的。例如,请参阅demo.actiontheme.com/sample-page源中的按行标记。
ryanve

4
pubdate正如布鲁斯·劳森(Bruce Lawson)在这里写的那样,由于该属性来自WHATWG和W3C规范,因此建议您将其从答案中删除。
Paul Kozlovitch 2015年

51

HTML5具有作者链接类型

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

这里的弱点是它需要某种联系,但是如果您有这样的讨论,这里很长的讨论。如果没有链接,则只需使用class属性即可,其用途是:

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

3
@Quang是的,我认为没有实际链接的链接类型将无法达到尝试在语义上进行标记的目的。
robertc 2011年

3
@Quang:该rel属性用于描述链接的目的地。如果链接没有目的地,rel则毫无意义。
Paul D. Waite

2
您可能还希望查看schema.org,以了解表达此类信息的方式。
Michael Mior 2013年

1
@ jdh8因为约翰不是作品的标题
robertc 2014年

6
这个答案不再是最好的了。Google不再支持rel="author",正如ryanve和Jason所提到的那样,该address标签也是为表达作者身份而明确设计的。
Dan Dascalescu

19

根据HTML5规范,您可能需要address

地址元素代表其最近的物品或身体元素祖先的联系信息。

该规范address在此处进一步针对作者

低于4.4.4

与文章元素(qv地址元素)关联的作者信息不适用于嵌套的文章元素。

低于4.4.9

部分作者或编辑者的联系信息属于地址元素,可能本身也位于页脚中。

所有这些使得这似乎address是此信息的最佳标签。

这就是说,你也可以给你的address一个relclassauthor

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

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


1
感谢Jason,您知道“ qv”是什么意思吗?在> 4.4.4下>>与文章元素(qv地址元素)关联的作者信息不适用于嵌套的文章元素。
Quang Van

3
@QuangVan-(等等,您的姓名缩写是... qv嗯)-qv的意思是“ quad vide”或“在此(问题)去看”-关于“ qv”的儿子去看english.stackexchange.com/questions / 25252 /…(qv)哈哈
pageman 2014年

@JasonGennaro哈哈nanos gigantum humeris内幕!
pageman

大声笑,花了我一段时间来弄清楚这些评论指的是什么...感谢拉丁文的教训:)
Quang Van

10

在HTML5中,我们可以使用一些语义标签来帮助组织有关您的内容类型的信息,但可以与您查看schema.org的主题相关并与之相关。这是Google,Bing和Yahoo的一项举措,旨在帮助搜索引擎通过微数据属性更好地理解网站。您可以在地图上看到以下内容:

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

3
请注意,schema.org不是HTML5的一部分。这是一个单独的规范。
ya.teck

9

Google对rel =“ author”的支持已弃用

“ Web搜索不再支持作者标记。”

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

根据HTML5规范

dl元素表示由零个或多个名称-值组组成的关联列表(描述列表)。名称-值组由一个或多个名称(dt元素)后跟一个或多个值(dd元素)组成,忽略除dt和dd元素以外的任何节点。在单个dl元素内,每个名称最多只能有一个dt元素。

名称值组可以是术语和定义,元数据主题和值,问题和答案,或者任何其他名称值数据组。

作者和其他文章的元信息完全适合以下key:value对结构:

  • 谁是作者
  • 发表文章的日期
  • 组织文章的网站结构(类别/标签:字符串/数组)
  • 等等

一个有思想的例子:

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



3

微数据如何:

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.