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

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

For example of a blog-post or article.

header

John My articl

相关标签:
9条回答
  • 2021-01-30 04:30

    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>
    
    0 讨论(0)
  • 2021-01-30 04:31

    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>
    
    0 讨论(0)
  • 2021-01-30 04:31

    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

    0 讨论(0)
提交回复
热议问题