HTML5 Suggestions for Marking up Conversations and Footnotes

Common Idioms without Dedicated Elements – Part 2

Foreword: In this part of the series I give you HTML5 suggestions for marking up conversations and footnotes.

By: Chrysanthus Date Published: 5 Aug 2015

Introduction

This is part 2 of my series, Common Idioms without Dedicated Elements. In this part of the series I give you HTML5 suggestions for marking up conversations and footnotes. You should have read the previous part of the series before reaching here, as this is a continuation.

Conversation for a web page refers to meeting minutes, chat transcripts, dialogues in screenplays, instant message logs, and other situations where different players take turns in discourse.

Footnote means an extra piece of information that is printed at the bottom of a page in a book. It also means, something that is not important but may be remembered.

Conversation
HTML5 suggests you mark up conversations using p elements and punctuation. Authors who need to mark the speaker for styling purposes are encouraged to use the span or b elements. Paragraphs with their text wrapped in the i element can be used for marking up stage directions.

The following code is dialogue between John and Peter:

 John: Look, you gotta first baseman?
 Peter: Certainly.
 John: Who's playing first?
 Peter: That's right.
 John becomes exasperated.
 John: When you pay off the first baseman every month, who gets the money?
 Peter: Every dollar of it.

Note that quotation marks have not been used. The name of the speaker and his sentence have been separated by a colon. The fifth paragraph is of the narrator (author).

All the following text and example code is copied from the HTML5 specification:

The following extract shows how an IM conversation log could be marked up, using the data element to provide Unix timestamps for each line. Note that the timestamps are provided in a format that the time element does not support, so the data element is used instead (namely, Unix time_t timestamps). Had the author wished to mark up the data using one of the date and time formats supported by the time element, that element could have been used instead of data. This could be advantageous as it would allow data analysis tools to detect the timestamps unambiguously, without coordination with the page author.

 <data value="1319898155">14:22</data> egof I'm not that nerdy, I've only seen 30% of the star trek episodes
 <data value="1319898192">14:23</data> kaj if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
 <data value="1319898200">14:23</data> egof it's unarguably
 <data value="1319898228">14:23</data> * kaj blinks
 <data value="1319898260">14:24</data> kaj you are not helping your case

The fourth paragraph is of the narrator.

All the following text and example code is copied from the HTML5 specification:

HTML does not have a good way to mark up graphs, so descriptions of interactive conversations from games are more difficult to mark up. This example shows one possible convention using dl elements to list the possible responses at each point in the conversation. Another option to consider is describing the conversation in the form of a DOT file, and outputting the result as an SVG image to place in the document.

 Next, you meet a fisherman. You can say one of several greetings:
<dl>
<dt> "Hello there!"
<dd>
 He responds with "Hello, how may I help you?"; you can respond with:
 <dl>
 <dt> "I would like to buy a fish."
 <dd> He sells you a fish and the conversation finishes.
 <dt> "Can I borrow your boat?"
 <dd>
 He is surprised and asks "What are you offering in return?".
 <dl>
 <dt> "Five gold." (if you have enough)
 <dt> "Ten gold." (if you have enough)
 <dt> "Fifteen gold." (if you have enough)
 <dd> He lends you his boat. The conversation ends.
 <dt> "A fish." (if you have one)
 <dt> "A newspaper." (if you have one)
 <dt> "A pebble." (if you have one)
 <dd> "No thanks", he replies. Your conversation options
 at this point are the same as they were after asking to borrow
 his boat, minus any options you've suggested before.
 </dl>
 </dd>
 </dl>
</dd>
<dt> "Vote for me in the next election!"
<dd> He turns away. The conversation finishes.
<dt> "Sir, are you aware that your fish are running away?"
<dd>
 He looks at you skeptically and says "Fish cannot run, sir".
 <dl>
 <dt> "You got me!"
 <dd> The fisherman sighs and the conversation ends.
 <dt> "Only kidding."
 <dd> "Good one!" he retorts. Your conversation options at this
 point are the same as those following "Hello there!" above.
 <dt> "Oh, then what are they doing?"
 <dd> He looks at his fish, giving you an opportunity to steal
 his boat, which you do. The conversation ends.
 </dl>
</dd>
</dl>

All the following text and example code is copied from the HTML5 specification:

In some games, conversations are simpler: each character merely has a fixed set of lines that they say. In this example, a game FAQ/walkthrough lists some of the known possible responses for each character:

<section>
<h1>Dialogue</h1>
Some characters repeat their lines in order each time you interact
with them, others randomly pick from amongst their lines. Those who respond in
order have numbered entries in the lists below.
<h2>The Shopkeeper</h2>
<ul>
 <li>How may I help you?
 <li>Fresh apples!
 <li>A loaf of bread for madam?
</ul>
<h2>The pilot</h2>
Before the accident:
<ul>
 </li>I'm about to fly out, sorry!
 </li>Sorry, I'm just waiting for flight clearance and then I'll be off!
</ul>
After the accident:
<ol>
 <li>I'm about to fly out, sorry!
 <li>Ok, I'm not leaving right now, my plane is being cleaned.
 <li>Ok, it's not being cleaned, it needs a minor repair first.
 <li>Ok, ok, stop bothering me! Truth is, I had a crash.
</ol>
<h2>Clan Leader</h2>
During the first clan meeting:
<ul>
 <li>Hey, have you seen my daughter? I bet she's up to something nefarious again...
 <li>Nice weather we're having today, eh?
 <li>The name is Bailey, Jeff Bailey. How can I help you today?
 <li>A glass of water? Fresh from the well!
</ul>
After the earthquake:
<ol>
 <li>Everyone is safe in the shelter, we just have to put out the fire!
 <li>I'll go and tell the fire brigade, you keep hosing it down!
</ol>
</section>

Footnote
Annotate means to add notes to a book or text, giving explanations and comments. For annotations, the a element should be used, pointing to an element later in the document. The convention is that the contents of the link be a number in square brackets. The following text and example are copied from the HTML5 specification:

In this example, a footnote in the dialogue links to a paragraph below the dialogue. The paragraph then reciprocally links back to the dialogue, allowing the user to return to the location of the footnote.

 Announcer: Number 16: The hand.
 Interviewer: Good evening. I have with me in the studio tonight
Mr Norman St John Polevaulter, who for the past few years has been
contradicting people. Mr Polevaulter, why do you
contradict people?
 Norman: I don't. <a href="#fn1" id="r1">[1]</a>
 Interviewer: You told me you did!
...
<section>
<a href="#r1">[1]</a> This is, naturally, a lie,
but paradoxically if it were true he could not say so without
contradicting the interviewer and thus making it false.
</section>

For side notes, longer annotations that apply to entire sections of the text rather than just specific words or sentences, the aside element should be used. The following text and example code are copied from theHTML5 manual:

In this example, a sidebar is given after a dialogue, giving it some context.

 Customer: I will not buy this record, it is scratched.
 Shopkeeper: I'm sorry?
 Customer: I will not buy this record, it is scratched.
 Shopkeeper: No no no, this's'a tobacconist's.
<aside>
In 1970, the British Empire lay in ruins, and foreign
nationalists frequented the streets — many of them Hungarians
(not the streets — the foreign nationals). Sadly, Alexander
Yalt has been publishing incompetently-written phrase books.
</aside>

For figures or tables, footnotes can be included in the relevant figcaption or caption element, or in surrounding prose. The following text and example code are copied from the HTML5 specification:

In this example, a table has cells with footnotes that are given in prose. A figure element is used to give a single legend to the combination of the table and its footnotes.

<figure>
<figcaption>Table 1. Alternative activities for knights.</figcaption>
<table>
 <tr>
 <th> Activity
 <th> Location
 <th> Cost
 <tr>
 <td> Dance
 <td> Wherever possible
 <td> £0<a href="#fn1">1</a>
 <tr>
 <td> Routines, chorus scenes<a href="#fn2">2</a>
 <td> Undisclosed
 <td> Undisclosed
 <tr>
 <td> Dining<a href="#fn3">3</a>
 <td> Camelot
 <td> Cost of ham, jam, and spam<a href="#fn4">4</a>
</table>
1. Assumed.
2. Footwork impeccable.
3. Quality described as "well".
4. A lot.
</figure>

That is it for this part of the series.

Chrys

Broad Network

Related Articles

HTML5 Suggestions for Marking up Conversations and Footnotes

Common Idioms without Dedicated Elements – Part 2

Introduction

Related Links

Comments