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

发布于 2024-12-02 15:36:19 字数 280 浏览 1 评论 0 原文

例如博客文章或文章。

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

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

(如果没有的话,难道不应该有吗?)

For example of a blog-post or article.

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(9

帅哥哥的热头脑 2024-12-09 15:36:19

两者 rel="作者”< ;地址> 是专为此目的而设计。 HTML5 均支持这两种方式。规范告诉我们 rel="author" 可用于

元素。 Google 还推荐用法。结合使用

rel="author" 似乎是最佳选择。 HTML5 最适合包装

中的标题和署名信息如下所示:
<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 属性是可选的 Flyover。

  • 署名信息也可以包含在 rel="noreferrer">

如果您想要添加 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>

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>
  • The pubdate attribute indicates that that is the published date.

  • The title attributes are optional flyovers.

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

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>
七七 2024-12-09 15:36:19

HTML5 有一个 作者链接类型< /a>:

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

这里的弱点是它需要位于某种链接上,但如果有的话,就会有一个 这里对替代方案进行了长时间的讨论。如果您没有链接,则只需使用类属性,这就是它的用途:

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

HTML5 has an author link type:

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

The weakness here is that it needs to be on some sort of link, but if you have that there's a long discussion of alternatives here. If you don't have a link, then just use a class attribute, that's what it's for:

<span class="author">John</span>
满地尘埃落定 2024-12-09 15:36:19

根据 HTML5 规范,您可能需要地址

地址元素代表其联系信息
最近的文章或正文元素祖先。

该规范进一步参考了此处

4.4.4

作者的地址

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

4.4.9以下

某个章节的作者或编辑的联系信息属于
地址元素,可能本身位于页脚内。

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

也就是说,您还可以为您的地址指定一个authorrelclass

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

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

According to the HTML5 spec, you probably want address.

The address element represents the contact information for its
nearest article or body element ancestor.

The spec further references address in respect to authors here

Under 4.4.4

Author information associated with an article element (q.v. the
address element) does not apply to nested article elements.

Under 4.4.9

Contact information for the author or editor of a section belongs in
an address element, possibly itself inside a footer.

All of which makes it seems that address is the best tag for this info.

That said, you could also give your address a rel or class of author.

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

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

唠甜嗑 2024-12-09 15:36:19

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

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

In HTML5 we can use some semantic labels that help organize the information regarding your type of content, but additional and related to the subject you can check schema.org. It is an initiative of Google, Bing and Yahoo that aims to help search engines to better understand websites through microdata attributes. Your post could look like this:

<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>
尝蛊 2024-12-09 15:36:19

Google 对 rel="author" 的支持已弃用

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

使用描述列表(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="[email protected]"><img src="email-sprite.png"></a></dd>
    </dl>
  </header>
  <section class="content">
    <!-- article content goes here -->
  </section>
</article>

正如你可以的请参阅,当使用

元素作为文章元信息时,我们可以自由地包装

和甚至

和/或

标记中的 标记(根据内容的性质)和它的预期功能

标签可以自由地完成它们的工作——语义上——传达信息关于父级

Google support for rel="author" is deprecated:

"Authorship markup is no longer supported in web search."

Use a Description List (Definition List in HTML 4.01) element.

From the HTML5 spec:

The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements) followed by one or more values (dd elements), ignoring any nodes other than dt and dd elements. Within a single dl element, there should not be more than one dt element for each name.

Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.

Authorship and other article meta information fits perfectly into this key:value pair structure:

  • who is the author
  • date the article published
  • site structure under which the article is organized (category/tag: string/arrays)
  • etc.

An opinionated example:

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

As you can see when using the <dl> element for article meta information, we are free to wrap <address>, <a> and even <img> tags in <dt> and/or <dd> tags according to the nature of the content and it's intended function.
The <dl>, <dt> and <dd> tags are free to do their job -- semantically -- conveying information about the parent <article>; <a>, <img> and <address> are similarly free to do their job -- again, semantically -- conveying information regarding where to find related content, non-verbal visual presentation, and contact details for authoritative parties, respectively.

眼波传意 2024-12-09 15:36:19

您可以按照

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

HTML5 规范

You can use

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

in the header as per the HTML5 specification.

请止步禁区 2024-12-09 15:36:19

如果您要包含作者的详细联系信息,则

标记是合适的:

但如果它实际上只是作者姓名,没有特定的标签。 HTML 不包含太多与人相关的内容。

If you were including contact details for the author, then the <address> tag is appropriate:

But if it’s literally just the author’s name, there isn’t a specific tag for that. HTML doesn’t include much related to people.

烟酒忠诚 2024-12-09 15:36:19

微数据怎么样:

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

How about 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>
知你几分 2024-12-09 15:36:19

您可以使用元标记来实现此目的,如下所示:

<head>
<meta name="author" content="red bot">
</head>

You may use meta tag for this purpose, as follows:

<head>
<meta name="author" content="red bot">
</head>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文