Correct HTML5 (+ schema.org) mark up for an article's publication date and location

Question

The HTML <time> element represents either a time on a 24-hour clock or a precise date in the Gregorian calendar (with optional time and timezone information).

For instance:

<q>All is quiet on <time datetime="2018-01-01 00:00">New Year's Day</time></q>

---

With this in mind, <time> seems the obvious markup for giving article publication dates and times:

<article itemscope itemtype="http://schema.org/Article">
<h2>Article Heading Here</h2>
<time datetime="2017-10-30" itemprop="datePublished">October 30th, 2017</time>
<p>Article Here</p>
</article>

---

Often though, articles will give a reporting location alongside their publication date and time.

But a stated geographical location seems like inappropriate content for <time>.

So... how best to mark up the information:

Huddersfield • October 30th, 2017

---

My favoured approach so far is to use an HTML5 data-* element, displayed via the CSS ::before pseudo-element:

Working Example:

time::before {
content: attr(data-location) '\00a0\00a0\2022\00a0\00a0';
}

<time datetime="2017-10-30" itemprop="datePublished" data-location="Huddersfield">October 30th, 2017</time>

But is there a more semantic approach (using schema.org microdata etc.)?

Answer 1

As a dateline is typically used for news articles, Schema.org defines a dateline property only for NewsArticle (which is a sub-type of Article):

A dateline is a brief piece of text included in news articles that describes where and when the story was written or filed though the date is often omitted. Sometimes only a placename is provided.

It expects a text value.

Examples in Microdata

The dateline consists of placename and date (assuming that the publishing date is the date "when the story was written or filed"):

<p itemprop="dateline">
  Huddersfield • <time datetime="2017-10-30" itemprop="datePublished">October 30th, 2017</time>
</p>

The dateline consists of placename only:

<p>
  <span itemprop="dateline">Huddersfield</span> • <time datetime="2017-10-30" itemprop="datePublished">October 30th, 2017</time>
</p>