[whatwg] Should a <figure> element require a reference? (was: use cases for <figure> without <figcaption>?)

[Xaxio Brandish]

Steve,

Please permit me to change the subject line since the topic no longer
answers the subject question?

The next sentence in the WHATWG spec [1] states

The element can thus be used to annotate illustrations, diagrams, photos,
> code listings, etc, that are *referred to from the main content of the
> document*
>
(italics mine)

It's true that there is no text saying that the <figure> element MUST be
used a certain way, but there are two sentences saying how it "typically"
or "can" be used, both implying a reference from a document.

One part of the ambiguity in the WHATWG spec comes from the examples given:

1) The first example uses <figure> as referenced from a document.
2) The second example is not referenced from a document.
3) The third example shows an image that is not a figure, followed by two
pieces of media content that are within <figure> tags.  The non-figure
image could not be removed from its position in the document flow without
changing the meaning of the document, so it is not used as a <figure>
element.
4) The fourth example is not referenced from a document.
5) The final two examples are implied to be referenced from a document, and
are semantically equivalent.

Since we cannot know the surrounding document for examples 2 and 4, it
seems that those examples take advantage of the open-ended adaptability of
the unreferenced version of the <figure> element.

Part of the semantics of HTML come from *author intent* and *reasonable
expectation*.  If we see a <table> element, we can expect tabular data.  If
we see an <li> element, we can expect that it is one of multiple.

This leaves us with the question at hand: if we see a <figure> element, can
we expect to find a part of the document from which it is referenced?
Consider the following scenario:

One is reading an online newspaper article.  The article references Figure
1, located at the end of the article (and near the bottom of the page) due
to readability constraints.  We look at the end of the article, and see a
figure with a caption "Figure 1".  The article then references "Figure 2",
so we look at the end of the article and see a figure with a caption,
"Figure 2".  We arrive at the end of the article and see another figure
with a caption, "Figure 3".

In the above scenario, Figure 3 is unreferenced.  The first instinct when
looking at an unreferenced figure (as used in the scenario) is to examine
the figure to attempt to establish a context for it.  Whether or not
context is established, the second instinct is almost invariably to go back
to the part of the article after Figure 2 was referenced in order to find
out where we missed the reference to Figure 3.  A third, slightly lesser
instinct may even prompt a review of the entire article in an effort to
find the missing reference.

It is possible that the author of the fabled online newspaper article
needed to use a visible caption, and could not find a better element for
the job than <figure> and <figcaption>.  It is not obvious whether the
article was edited incorrectly, whether there was a printing error, or
whether the unreferenced figure was intended to stand alone.

I propose that unreferenced figures set unreasonable expectation, as just
described, and that either

1) more generic grouping content should be used to group unreferenced data
with captions, or
2) a new element be created similar to <label> with an attribute similar to
the "for" attribute that is not required to be located within a user
interface such as form, or
3) a new set of elements similar to <figure> and <figcaption> be created to
group unreferenced data.

--Xaxio

References:
[1]
http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-figure-element

On Fri, Jun 21, 2013 at 3:00 AM, Steve Faulkner <faulkner.steve at gmail.com>wrote:

> Hi Xaxio, (and martin)
>
> i get why figure on its own is OK.
>
> I think that it's OK to use the figure/figcaption pattern on any image
> (for example) that the author wants to provide a caption for.
>
> The use case being: I want to provide some text as a caption for some
> other content.
>
> It is unclear to me (at least) whether the whatwg spec says that is OK or
> not.
>
> the latest (single page) whatwg spec says:
>
> "The figure element represents some flow content, optionally with a
> caption, that is self-contained (like a complete sentence) and is typically
> referenced as a single unit from the main flow of the document."
>
> There is no normative text that says it MUST be referenced, only a non
> normative phrase "typically referenced"
>
> so that suggests to me that it is OK to use figure/figcaption for the use
> case i described and the one you described, but then the there is a lot of
> other descriptive text about figure that serves to befuddle my
> understanding.
>
> note: the whatwg spec and the w3c html spec which you referenced currently
> differ on figure, the proposed changes in the whatwg spec are under
> discussion in the html wg.
>
> --
>
> Regards
>
> SteveF
> HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>
>
>
> On 21 June 2013 08:38, Xaxio Brandish <xaxiobrandish at gmail.com> wrote:
>
>> Steve,
>>
>> One *could* use <div> elements in place of the <figure> elements; but
>> then again, one could use <div> elements in place of many elements in order
>> to remove their semantical meaning and send us back into the dark ages ;)
>>
>> I believe that <figure> is possibly the best element for the job, in
>> agreement what Martin said regarding the spec specifying a figure being
>> something that is *typically* referenced in the document [1].  I also
>> believe that <figcaption> is necessary for exact specification (such as in
>> medical documents or legal documents), but may be completely unnecessary
>> for certain other documents (such as the font document example we are
>> discussing).
>>
>> The reason I brought up placement and relevance of the figures in the
>> first place is because of this sentence in the specification:
>>
>>>  This includes, but is not restricted to, content referred to from the
>>> main part of the document, but that could, without affecting the flow of
>>> the document, be moved away from that primary content, e.g. to the side of
>>> the page, to dedicated pages, or to an appendix.
>>>
>> However, all of this does leave me wondering about an instance of fluff
>> in an HTML document and how to appropriately define it.
>>
>> Consider a web page that is devoid of color or motion, and is thus less
>> interesting to people who *must* read it.  An example of this can be an
>> online driving education course.  Now imagine that the author of the page
>> wanted to seem less boring, and so adds a piece of barely related clip art
>> to the page, and said clip art is not referenced anywhere in the main
>> document material.  The author wants to add a humorous comment to the image
>> to lighten the mood of the page, and considers using <figure> and
>> <figcaption>.
>>
>> Would it be appropriate to caption the aforementioned clip art using
>> <figcaption> if it is contained in an <aside> element, claiming that the
>> figure is self-referential yet only tangentially related to the document?
>> If not, is there an element better suited to this purpose, or we can we
>> redefine the <figcaption> element to encompass a purpose such as this?
>>
>> --Xaxio
>>
>> References:
>> [1] http://www.w3.org/TR/html51/single-page.html#the-figure-element
>>
>>
>> On Thu, Jun 20, 2013 at 3:34 PM, Martin Janecke <whatwg.org at prlbr.com>wrote:
>>
>>> Hi Steve,
>>>
>>>
>>> >> The fact that they are enclosed in the <figure> elements means that
>>> they
>>> > are referenced somewhere, I believe.
>>> >
>>> > so if not referenced somewhere, they should not be in a figure?
>>>
>>>
>>> Probably they should not, as figures are "typically referenced as a
>>> single unit from the main flow of the document"^[1]. I'd like to add that
>>> the reference can be implicit, though. A short car magazine article about a
>>> particular model might be a good example. Readers who are likely to have
>>> seen some cars in their lives will identify a car's front section on a
>>> photograph by themselves and make the connection to what the articles
>>> writes about it.
>>>
>>> Here is such an article:
>>> http://www.caranddriver.com/news/2014-bmw-4-series-photos-and-info-news
>>> Although the webpage does not actually use figure elements, it would be
>>> appropriate for the photographs that are embedded in the main article. The
>>> photographs illustrate and enhance the article's content by providing more
>>> design details than the text, are self-contained, not part of the main flow
>>> and implicitly referenced from it. (The photos should have alt-texts
>>> though.)
>>>
>>> Regards
>>> Martin
>>>
>>> [1]: WHATWG HTML spec 4.5.11 The figure element
>>>
>>> Am 20.06.2013 um 23:27 schrieb Steve Faulkner:
>>>
>>>
>>> > Hi Xaxio,
>>> >
>>> > <p>Fonts come in many different varieties. The Arial font, for example,
>>> > does not have serifs.</p> <div>arial</div>
>>> > <p>However, font varieties go beyond simple serif and sans-serif
>>> > distinctions. The Old English font is neither of these, instead being
>>> > considered a "decorative" font.</p><div>Old English</div>
>>> >
>>> > The above example has meaning with or without the divs, and the
>>> placement
>>> > of the divs doesn't matter. They could be in a font index at the end
>>> of the
>>> > document, as long as the data consumer knows to look there if example
>>> are
>>> > needed.  right?
>>> >
>>> >> The fact that they are enclosed in the <figure> elements means that
>>> they
>>> > are referenced somewhere, I believe.
>>> >
>>> > so if not referenced somewhere, they should not be in a figure?
>>> >
>>> > --
>>> >
>>> > Regards
>>> >
>>> > SteveF
>>> > HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>
>>>
>>> >
>>> >
>>> > On 20 June 2013 20:46, Xaxio Brandish <xaxiobrandish at gmail.com> wrote:
>>> >
>>> >> <p>Fonts come in many different varieties. The Arial font, for
>>> example,
>>> >> does not have serifs.</p> <figure>arial</figure>
>>> >> <p>However, font varieties go beyond simple serif and sans-serif
>>> >> distinctions. The Old English font is neither of these, instead being
>>> >> considered a "decorative" font.</p><figure>Old English</figure>
>>> >>
>>> >> The above example has meaning with or without the figures, and the
>>> >> placement of the figures doesn't matter. They could be in a font
>>> index at
>>> >> the end of the document, as long as the data consumer knows to look
>>> there
>>> >> if example are needed.  The fact that they are enclosed in the
>>> <figure>
>>> >> elements means that they are referenced somewhere, I believe.
>>> >>
>>> >> When referring to multiple figures containing graphs or tables with
>>> really
>>> >> long names such as "Number of Children With Orange Dreadlocks With
>>> Respect
>>> >> to Decade" and "Periods of Time During Which Dreadlocks Are Popular,
>>> Where
>>> >> Orange Is Popular, and Where They Overlap", it's so much easier just
>>> to
>>> >> give them a <figcaption> and refer to "Table 1" and "Table 2" in the
>>> >> document.
>>> >>
>>> >> --Xaxio
>>> >> On Jun 20, 2013 12:20 PM, "Steve Faulkner" <faulkner.steve at gmail.com>
>>> >> wrote:
>>> >>
>>> >>> OK so how do you reference
>>> >>>
>>> >>> <figure>
>>> >>> arial
>>> >>> </figure>
>>> >>>
>>> >>> for example?
>>> >>>
>>> >>> --
>>> >>>
>>> >>> Regards
>>> >>>
>>> >>> SteveF
>>> >>> HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>
>>>
>>> >>>
>>> >>>
>>> >>> On 20 June 2013 20:16, Xaxio Brandish <xaxiobrandish at gmail.com>
>>> wrote:
>>> >>>
>>> >>>> The figures could be in a document talking about fonts, yet easily
>>> moved
>>> >>>> to the side of the page and still maintain relevance if referenced
>>> within
>>> >>>> the document.  I think something important about figures is
>>> placement
>>> >>>> irrelevance as long as they can be referenced, whereas paragraphs
>>> don't
>>> >>>> have the added semantic of "this will be referenced at some point."
>>> >>>>
>>> >>>> --Xaxio
>>> >>>> On Jun 20, 2013 12:10 PM, "Steve Faulkner" <
>>> faulkner.steve at gmail.com>
>>> >>>> wrote:
>>> >>>>
>>> >>>>>> An illustration of a font name, in its respective font?
>>> >>>>>
>>> >>>>> why is <figure> better in this case than <p> (for example) ?
>>> >>>>>
>>> >>>>> --
>>> >>>>>
>>> >>>>> Regards
>>> >>>>>
>>> >>>>> SteveF
>>> >>>>> HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>
>>>
>>> >>>>>
>>> >>>>>
>>> >>>>> On 20 June 2013 19:27, Xaxio Brandish <xaxiobrandish at gmail.com>
>>> wrote:
>>> >>>>>
>>> >>>>>> An illustration of a font name, in its respective font?
>>> >>>>>>
>>> >>>>>> --Xaxio
>>> >>>>>> On Jun 20, 2013 11:24 AM, "Steve Faulkner" <
>>> faulkner.steve at gmail.com>
>>> >>>>>> wrote:
>>> >>>>>>
>>> >>>>>>> What are the use cases for a <figure> without a <figcaption> ?
>>> >>>>>>> --
>>> >>>>>>>
>>> >>>>>>> Regards
>>> >>>>>>>
>>> >>>>>>> SteveF
>>> >>>>>>> HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>
>>> >>>>>>>
>>> >>>>>>
>>> >>>>>
>>> >>>
>>>
>>>
>>
>