118

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

4
  • <cite> maybe? I don't know lol. :P Doesn't make very much of a difference in style though. Sep 3, 2011 at 1:10
  • 2
    It's not about style. Technically, you can use a <p> to create a heading just by increasing the font size. But search engines won't understand it like that.
    – jalgames
    Apr 23, 2014 at 12:53
  • 2
    You are not allowed to use the time element like that. Since dd-mm-yyy isn't one of the recognised formats, you have to supply a machine-readable version (in one of the recognised formats) in a datetime attribute of the time element. See w3.org/TR/2014/REC-html5-20141028/… Nov 17, 2014 at 18:58
  • 1
    There's a better answer now than the accepted (robertc's) one. Jun 13, 2016 at 0:23

9 Answers 9

137

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>
4
  • 3
    Shouldn't "By " precede the <address> tag? It's not actually a part of the address. Jun 24, 2013 at 18:12
  • 1
    @aridlehoover Either seems correct according to whatwg.org/specs/web-apps/current-work/multipage/… - If outside, use .byline address { display:inline; font-style:inherit } to override the block default in browsers.
    – ryanve
    Jun 24, 2013 at 20:40
  • @aridlehoover I also think that <dl> is viable. See the byline markup in the source of demo.actiontheme.com/sample-page for example.
    – ryanve
    Jun 24, 2013 at 20:46
  • 6
    Since the pubdate attribute is gone from both the WHATWG and W3C specs, as Bruce Lawson writes here, I suggest you to remove it from your answer. Apr 16, 2015 at 11:36
52

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>
10
  • 3
    @Quang Yes, I think a link type without an actual link would defeat the purpose of trying to mark it up semantically.
    – robertc
    Sep 3, 2011 at 1:21
  • 3
    @Quang: the rel attribute is there to describe what the link’s destination is. If the link has no destination, rel is meaningless. Sep 5, 2011 at 7:19
  • 2
    You might also want to look at schema.org for ways of expressing this type of information. Jan 19, 2013 at 14:36
  • 1
    @jdh8 Because John is not the title of a work
    – robertc
    Jan 1, 2014 at 15:09
  • 6
    This answer just isn't the best any longer. Google no longer supports rel="author", and as ryanve and Jason mention, the address tag was explicitly design for expressing authorship as well. Jun 13, 2016 at 0:19
23

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

4
  • 1
    Thanks Jason, do you know what "q.v." means? Under >4.4.4 >Author information associated with an article element (q.v. the address element) does not apply to nested article elements.
    – Quang Van
    Feb 29, 2012 at 9:24
  • 4
    @QuangVan - (wait, your initials are ... q.v. hmm) - q.v. means "quod vide" or "on this (matter) go see" - son on the matter of "q.v." go see english.stackexchange.com/questions/25252/… (q.v.) haha
    – pageman
    Feb 10, 2014 at 5:44
  • @JasonGennaro haha nanos gigantum humeris insidentes!
    – pageman
    Feb 11, 2014 at 1:10
  • lol, took me a while to figure out what these comments were referring to... Thanks for the Latin lession :)
    – Quang Van
    Feb 25, 2014 at 22:01
17

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>
3
  • 1
    Definitely the most accurate answer for 2019.
    – Simon G
    Jan 3, 2019 at 16:22
  • 6
    Note that schema.org is not part of HTML5. It is a separate specification.
    – ya.teck
    Oct 20, 2019 at 16:50
  • 1
    Also note that Google recommends to always use JSON-LD in favor of microdata attributes: developers.google.com/search/docs/guides/… Sep 21, 2021 at 15:18
11

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.

6

You can use

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

in the header as per the HTML5 specification.

2

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.

2

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.