发表新帖
发表新帖

Which HTML5 tag should I use to mark up an author’s name?

前端 未结
关注
9 2077
悲&欢浪女
悲&欢浪女 2021-01-30 03:36

For example of a blog-post or article.



header


John
My articl
相关标签:
9条回答
  • 醉梦人生
    2021-01-30 04:06

    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="remy@blog.net"><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.

    0 讨论(0)
  • 终归单人心
    2021-01-30 04:11

    You can use

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

    in the header as per the HTML5 specification.

    0 讨论(0)
  • 再見小時候
    2021-01-30 04:13

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

    • http://dev.w3.org/html5/spec-author-view/the-address-element.html#the-address-element

    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.

    0 讨论(0)
  • 被撕碎了的回忆
    2021-01-30 04:14

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

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

    0 讨论(0)
  • 爱一瞬间的悲伤
    2021-01-30 04:21

    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>
    0 讨论(0)
  • 生来不讨喜
    2021-01-30 04:24

    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>
    0 讨论(0)
 看不清?
提交回复
热议问题