Quotations

Home > Programming > HTML > Quotation Tags

Test of Quotation Tags...And...

Updated 2025-03-03

These notes are linked to my participation in the P2PU activity called "Webmaking 101." As a part of that peer-supported online course, the 4th activity asks us to do some research on html tags so that we can look around us to find examples of their use in our lives (on or off the Web). I decided to focus on a subset of the list from the exercise. I had used some of the others, and wanted to focus on those which I didn't know so I would widen my choices for the future. I initially chose the tags related to quotations in an html document.

Since then, I've expanded to include others. Some day, I may revise this into several individually-cohesive pages.

<q>...</q>

This is a short inline quote: Open Source - Open Education - Open Minds.

<q cite="http://runeman.org/">Open Source - Open Education - Open Minds</q>

On my computer, the quotation marks are added by the Firefox browser, but the Mozilla Developer tag description says that isn't always true, depending on the browser.

While having the quotation marks show is nice, there is no link back to the citation that is an attribute/element of the tag. That seems a bit illogical. While the citation is just like the content of an address tag, <a>, but a person needs to examine the source to see it. One reference indicated that the tag was intended for use by the site developers rather than readers of the document on the Web.

This is the same short inline quote from before, but the cite element is not included...as a test): Open Source - Open Education - Open Minds. The quote still works for me in Firefox, but the value of the citation is obviously lost.

<cite>...</cite>

The cite tag pair is also inline and is intended to show the title of a source. The Count of Monte Cristo by Alexandre Dumas was the most recent book in our book club on Internet Book Database of Fiction (IBDoF) On my computer in the Firefox browser, the book's title is put into italics. <cite> pair is commonly used with a link to the source, especially if it is an online post in social media. It is also appropriate to use when mentioning information from brochures, emails, etc.

<cite><a href="https://standardebooks.org/ebooks/alexandre-dumas/the-count-of-monte-cristo/chapman-and-hall">The Count of Monte Cristo</a></cite>

<blockquote>...</blockquote>

The intent of this tag pair appears to be for long quotations which the browser will typically put into a paragraph with a different margin from the standard paragraphs of the rest of the document.

This text is intended to be the quotation extracted from another source and placed into this document within the blockquote element. The longer the text, the more impressive the quotation will appear. Some blogging themes add fancy opening quotation marks to help the blockquote to stand out from the surrounding text.

<abbr>...</abbr>

The first time you use an abbreviation like HTML, especially an uncommon one, it is a good idea to expand it out to the full text version. The <abbr> tag can partially automate that. When used with the title attribute as part of the opening tag, Firefox adds a dotted underline to show HTML as an abbreviation and uses the title as the expanded text when the pointer is over the abbreviation.

<abbr title="HyperText Markup Language">HTML</abbr>

The more I think about it, the more I think that these tags are useful, in part, as a segment of the "semantic web" effort. These tags don't so much impact the look of the text which could be done in other ways. They help to identify parts of the document which are quotations from some other source.

<figure>...</figure>

Commonly used for images, diagrams and quotations which can appear anywhere in a web page, somewhat breaking the flow of the text, and which might also be collected into a separate section of figures. It is also used with citations, block quotes, etc.

In this example, I added a id="fig1" attribute so it's possible to get to it from a list of figures, as used in technical papers. (<figure id=fig1"> so we can use <a href="quotation_tags.html#fig1">)

barometric pressure — [Figure 1] Natick, MA Barometric Pressure on the day of writing this note

<menu>

This is going to be something I still need to explore more. The code makes buttons with labels and the code has "functions" to do something. I don't have the functions going anywhere, though. I'll need to set up some scripts (Javascript?) that do a popup dialog or something.
I need to do more study for this tag

File functions (with script?) Editing functions (with script?)

<time>

The <time> tag is not for your direct human benefit. It is intended, I think, to enhance the usability of Web pages for automation of the "meaning" of the page's content.

As I write this, it is 18:40 on Wednesday, May the 15th, 2013. In the preceding sentence, 18:40 is enclosed in the <time> tag for the semantic web, I think.

If the "datetime" attribute is used the contents of the attribute don't show. Instead the enclosed human-readable time is more accurately represented for scripts to read. Wednesday evening "Wednesday evening" is the text enclosed while the date is encoded in the datetime format: YYYY-MM-DDThh:mm:ssTZD to give a machine (script) readable version that corresponds to "Wednesday evening."