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

Question

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

Politician

<cite> maybe? I don't know lol. :P Doesn't make very much of a difference in style though. – Diffractometer

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. – Pironi

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/… – Calliope

There's a better answer now than the accepted (robertc's) one. – Occultism

Answer 1

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>

Accommodative

Shouldn't "By " precede the <address> tag? It's not actually a part of the address. – Muslin

@Muslin 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. – Accommodative

@Muslin I also think that <dl> is viable. See the byline markup in the source of demo.actiontheme.com/sample-page for example. – Accommodative

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. – Catfall

Answer 2

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>

Dear

nice, thanks for the link... I guess you could do it without the href? like `<a rel='author'>John</a> ... though semantically won't make that much sense... – Politician

@Quang Yes, I think a link type without an actual link would defeat the purpose of trying to mark it up semantically. – Dear

@Quang: the rel attribute is there to describe what the link’s destination is. If the link has no destination, rel is meaningless. – Kennithkennon

You might also want to look at schema.org for ways of expressing this type of information. – Proofread

Why not <cite>John</cite>? – Apostasy

@Apostasy Because John is not the title of a work – Dear

@Dear Oh, I see. It's only available in HTML 5.1 Nightly. – Apostasy

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. – Occultism

"use a class attribute, that's what it's for" -- that's wrong! The class attribute is a selector for CSS and JavaScript, it doesn't have any semantic meaning in HTML. developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… – Levee

@Levee "Though the specification doesn't put requirements on the name of classes, web developers are encouraged to use names that describe the semantic purpose of the element, rather to the presentation of the element..." – Dear

Answer 3

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

Hypognathous

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. – Politician

@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 – Panarabism

@JasonGennaro haha nanos gigantum humeris insidentes! – Panarabism

lol, took me a while to figure out what these comments were referring to... Thanks for the Latin lession :) – Politician

Answer 4

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>

Irruptive

Definitely the most accurate answer for 2019. – Equiponderate

Note that schema.org is not part of HTML5. It is a separate specification. – Lapboard

Also note that Google recommends to always use JSON-LD in favor of microdata attributes: developers.google.com/search/docs/guides/… – Mass

Answer 5

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.

Clericals

Answer 6

You can use

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

in the header as per the HTML5 specification.

Highball

Answer 7

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.

Kennithkennon

Answer 8

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>

Schertz

Answer 9

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

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

Vervain