The use of cite and Figcaption elements is confusing. How should I use it to get it right?

Asked 2 years ago, Updated 2 years ago, 51 views

I have a question. I'm a little confused between the figure caption tag and the cite tag. Figcaption is only applied to the description and source of the image, and I'm wondering if the cite is more extensive.

html5 cite figcaption fast-frontend

2022-09-22 18:39

1 Answers

If you look at the HTML5 technical standard document, the figurecaption element is described as follows.

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

Interpreting this, we describe the "figcaption element as a caption or legend" for the content of the figure element, which is the parent of the figurecaption element.

Warning! 
The figurecaption element must only be used inside the parent element figure.

If you look at the description of the cite element, it will be described as follows.

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.

Interpreting this means "the cite element is a reference to a creation. You must include references to the title of the work, the author's name (person, person, or organization) or URL references, or abbreviated references according to the rules.

Books, paper, essays, poems, scores, songs, scripts, movies, TV shows, games, sculptures, paintings, theatrical production, plays, operas, computer programs, websites, webpages, blog posts or comments, forum posts or comments, tweets, written or oral statements.

Let's look at an example.

<p>
  <cite>Charles Bukowski</cite> said: -
  <q>Knowledgemen say simple things hard. An artist says something difficult in a simple way.</q>
</p>
<blockquote class="twitter-tweet">
<p>♥ Bukowski in <a href="https://twitter.com/search?q=%23HTML5&src=hash">#HTML5</a> spec examples
<a href="https://t.co/0FIEiYN1pC">https://t.co/0FIEiYN1pC</a></p><cite>— karl dubost (@karlpro)
<a href="https://twitter.com/karlpro/statuses/370905307293442048">August 23, 2013</a></cite>
</blockquote>
<p><cite> Universal Declaration of Human Rights</cite>, UN (United Nations),
December 1948, adopted by General Assembly Resolution 217A (III).</p>
<p>Who is the best doctor? (<cite>Doctor Who</cite> Drama)</p>
<article id="comment-1">
  Comment by <cite><a href="https://oli.jp">Oli Studholme</a></cite>
  <time datetime="2013-08-19T16:01">August 19th, 2013 at 4:01 pm</time>
  <p>Unfortunately I don’t think adding names back into the definition of <code>cite</code>
  solves the problem: of the 12 blockquote examples in
  <a href="https://oli.jp/example/blockquote-metadata/">Examples of block quote metadata</a>,
  there’s not even one that’s <em>just</em> a person’s name.</p>
  <p>A subset of the problem, maybe…</p>
</article>
<div id="resultStats">About 416,000,000 results 0.33 seconds) </div>
...
<p><a href="https://www.w3.org/html/wg/">W3C <i>HTML Working Group</i></a></p>
<p><cite>www.w3.org/<b>html</b>/wg/</cite></p>
<p>15 Apr 2013 - The <i>HTML Working Group</i> is currently chartered to continue its
work through 31 December 2014. A Plan 2014 document published by the...</p>
...

Ibid is an abbreviation of the Latin word "ibideem" when re-quoting the same literature in the Americas or footnotes in succession It's a term used. It is also used as a Korean expression for the above book, Sanggeseo, and the same book. Source: Wikipedia

<article>
   <h2>Book Information</h2>
   ...
   ...
  <blockquote>
     "Money is the real cause of poverty"
     <footer>
       <citeid="baseref">Atypical Charitable People, p.89</cite>
     </ footer>
   </ blockquote>
   ...
   ...
   <blockquote>
    "Money is the cause of poverty. Because I was too lazy to work, I asked the workers 
     It took away the fruits of labor," he said.
     <a href="#baseref"><cite>Ibid.</cite></a>
   </ blockquote>
   ...
</ article>

NOTE The cite element is not a quoted element (q). If you have the meaning of a quote, you must use the <q> element.

The following markup is invalid.

Because what Hillary said was "wrong" is a quote. The q element should be used, not the cite element.

<p>
  <cite>This is wrong!, said Hillary.</cite> is a quote from 
  the popular daytime TV drama When Ian became Hillary.
</p>

The markup must be completed as follows to ensure that the markup is correct.

In the hit TV drama "When Ian became Hillary" (source) Because Hillary said "wrong."

<p>
  <q>This is correct, said Hillary.</q> is a quote from 
  the popular daytime TV drama <cite>When Ian became Hillary</cite>.
</p>

Use the figure capture element to add a description inside the figure element that structures the figure (image, table, chart, etc.). On the other hand, if you want to give a source, reference information meaning, use the cite element. :-D

FIN.


2022-09-22 18:39

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.