How to write HTML code for inspirational quote?

Is it like this:

<blockquote>
<p>A ship in port is safe; but that is not what ships are built for.</p>
<blockquote>

<cite>Grace Hopper</cite>

I’m getting confuse with the use of <cite> element. In this website: www.html5doctor.com/blockquote-q-cite

It says there “The cite element represents the title of a work. A person’s name is not the title of a work and the element must therefore not be used to mark up people’s names.” - W3C HTML5 specification

Kindly help me.

Thanks,

1 Like

html5doctor has a tendency for a free flow articles that are really not that informative after some time. When I don’t know how to represent something in the form of HTML in a semantic way I usually check the w3c specification.

Quote from w3c:

The cite element represents a reference to a creative work. It must include the title of the work or the name of the author (person, people or organization) or an URL reference, or a reference in abbreviated form as per the conventions used for the addition of citation metadata.

In the specification you can find some examples, take a look at example 12, which is similar to what you need.


In my own projects, if given quotation is an important and distinct part of the content I usually prefer to represent it in this way:

<figure>
  <blockquote>
    <p>A ship in port is safe; but that is not what ships are built for.</p>
  </blockquote>
  <figcaption>
    <a href="https://en.wikipedia.org/wiki/Grace_Hopper">Grace Hopper</a>
  </figcaption>
</figure>

This is consistent with the w3c specification for the figcaption:

The figcaption element represents a caption or legend for the rest of the contents of the figcaption element’s parent figure element, if any.

And I do not have to deal with the author name in the cite element drama :slight_smile:


Just to clarify my point of view towards html5doctor as a viable educational resource… That is a quote from the middle of the article you have mentioned:

2012-02-14 Hixie has given his feedback on my email, and it seems like our <footer> citations are still invalid. The official recommendation is to put the blockquote in a figure and add attribution in <figcaption> . Read the whole thread as there are some interesting comments. I’ll wait for the dust to settle a little yet…

… so the whole article talks about use of footer to add information about the quote and they know that it is not a valid method. Such important information should be more emphasized, right?

1 Like

Thanks for sharing this… Much needed Information.

1 Like

Thanks factoradic. I appreciate your help.

I also read about the use of footer citations and yes, I think it’s wrong to use it.

I tend to search when I get confuse, to check the idea of others.

1 Like

You are very welcome :panda_face: That was an interesting question :slight_smile:

1 Like

Also remember to have the slash in the ending part of your tags. You put one in for cite, but not for blockquote.

1 Like