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

2022-01-18 00:00:00 blogs tags html semantic-markup

例如博客文章或文章.

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

author 标签并不存在……那么，作者常用的 HTML5 标签是什么?谢谢.

The author tag doesn't exist though... So what is the commonly used HTML5 tag for authors? Thanks.

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

(If there isn't, shouldn't there be one?)

推荐答案

两者 rel="author" 和 <address> 正是为此目的而设计的.两者都在 HTML5 中受支持.规范告诉我们 rel="author" 可用于 <link> <a> 和 <area> 元素.Google 还推荐 用法.结合使用 <address> 和 rel="author" 似乎是最佳选择.HTML5 最适合包装 <article> <header> 中的标题和署名信息，如下所示:

Both rel="author" and <address> are designed for this exact purpose. Both are supported in HTML5. The spec tells us that rel="author" can be used on <link> <a>, and <area> elements. Google also recommends its usage. Combining use of <address> and rel="author" seems optimal. HTML5 best affords wrapping <article> headlines and bylines info in a <header> like so:

<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 属性表明这是发布日期.

    • The pubdate attribute indicates that that is the published date.

      title 属性是可选的天桥.

      署名信息也可以包装在 <footer>"><文章>

      The byline info can alternatively be wrapped in a <footer> within an <article>

      如果你想添加 hcard 微格式，我会这样做就像这样:

      If you want to add the hcard microformat, then I would do so like this: 

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

相关文章