htmlfrontendsemanticsmarkup

Correct semantic markup for a quote's author: <cite> vs. <span>

Based on the HTML examples provided, is it considered better practice to mark up an author's name with the cite tag or a span tag? I've read that the cite tag is intended for referencing a work (like a book or title), not a person, and I want to ensure my code is semantically correct.

I reviewed the MDN documentation on the cite tag and also consulted AI tools like ChatGPT, Google Gemini, and DeepSeek. MDN explicitly states that the cite element should be used for referencing creative works (such as books, research papers, etc.) and does not mention using it for human authors. Conversely, the AI tools suggested that using cite for author names is a best practice.

<h1>Which one is the best practise?</h1>

<h2>First example:</h2>

<figure>
  <blockquote>
    <p>Ahmed Ali was a brilliant student; always stood out with his assignments.</p>
  </blockquote>
  <figcaption>
    — <cite>John Doe</cite>, <span class="job">Assistant Professor</span>
  </figcaption>
</figure>

<h2>Second example:</h2>

<figure>
  <blockquote>
    <p>Ahmed Ali was a brilliant student; always stood out with his assignments.</p>
  </blockquote>
  <figcaption>
    — <span class="author">John Doe</span>, <span class="job">Assistant Professor</span>
  </figcaption>
</figure>
<h2>Third example:</h2>

<figure>
  <blockquote>
    <p>Ahmed Ali was a brilliant student; always stood out with his assignments.</p>
  </blockquote>
  <figcaption>
    — <address class="author">John Doe</address>, <span class="job">Assistant Professor</span>
  </figcaption>
</figure>

Solution

  • The proper semantic HTML for a blockquote with a citation is:

    <figure>
  <blockquote cite="https://example.com/article">
    <p>The important quoted text goes here.</p>
  </blockquote>
  <figcaption>
    — John Smith, <cite><a href="https://example.com/article">The Example Times</a></cite>
  </figcaption>
</figure>

    1. blockquote has a cite attribute

      • Use it for the source URL (machine-readable, not usually shown to users).

      • Example: <blockquote cite="https://example.com/article">…</blockquote>

    2. cite element inside your content

      • The <cite> element is for the title of a work (book, article, website, etc.), not technically the person’s name.

      • If you want to show the author’s name, just write it in plain text or prefix with —, and wrap the work title (or source) in <cite>.

    3. Linking the source

      • Best practice is to wrap the <cite> in an <a> so it’s clickable.

    Since your example doesn't include a linkable source you'll probably want to stick with a span for those. A cite in these examples could be the company the individual works for and that would be your cite and link.