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

HtmlTagsBlogsSemantic Markup

Html Problem Overview


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

Html Solutions


Solution 1 - Html

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>

Solution 2 - Html

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>

Solution 3 - Html

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

Solution 4 - Html

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>

Solution 5 - Html

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.

Solution 6 - Html

You can use

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

in the header as per the HTML5 specification.

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

Solution 8 - Html

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>

Solution 9 - Html

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

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionQuang VanView Question on Stackoverflow
Solution 1 - HtmlryanveView Answer on Stackoverflow
Solution 2 - HtmlrobertcView Answer on Stackoverflow
Solution 3 - HtmlJason GennaroView Answer on Stackoverflow
Solution 4 - HtmlHarleySGView Answer on Stackoverflow
Solution 5 - HtmlremyActualView Answer on Stackoverflow
Solution 6 - HtmlRaphaelView Answer on Stackoverflow
Solution 7 - HtmlPaul D. WaiteView Answer on Stackoverflow
Solution 8 - HtmlsteveaxView Answer on Stackoverflow
Solution 9 - HtmlVifterGRView Answer on Stackoverflow