HTML Text Elements to Precise and give Meanings

Text Elements in HTML – Part 2

Foreword: In this part of the series, I talk about the cite, quote, abbreviation and definition elements.

By: Chrysanthus Date Published: 31 May 2015

Introduction

This is part 2 of my series, Text Elements in HTML. In this part of the series, I talk about the cite, quote, abbreviation and definition elements. You should have read the previous part of the series before reaching here, as this is a continuation.

q
This is a double tag element for quotation. As you produce a web page, you can quote from a different web page (or different source). If you have one word or a phase to quote, you can use quotation marks. If the phrase is long or what you want to quote is up to a paragraphs, you should use the q element. You may also want to give a particular style (using CSS) to all the quotations in an article; in that case, if the quotation is short, you still have to use the q element. An example of the use of the q element is in:

The woman said <q>Things that are impossible just take longer</q>. I agreed with her.

The browser gives the quotation marks for you. For my browser, the quotation marks for this code are “ and ”.

Hey, the quotation element can be nested, allowing you to have a quote within a quote, as in,

In the section, he writes <q>The woman said <q>Things that are impossible just take longer</q>. I agreed with her</q>. Well, he disagreed completely!

You may want to cite the web page that you got the quotation from! No problem; the quotation element has the cite attribute for that. Just type the URL as string value for the attribute as in:

The woman said <q cite="http://www.rules.com/womaning.htm">Things that are impossible just take longer</q>. I agreed with her.

With this attribute, the browser does not turn the quotation into a hyperlink. Such an attribute is for software that wants to analyze the web page.

cite
This is a double tag element that 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 a URL reference. Creative works include a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, a web site, a web page, a blog post or comment, a forum post or comment, a tweet, a written or oral statement, etc.

If you write an article, at the bottom of the article you may want to cite the reference; that is where you can use the cite element.

The cite element is different from the cite attribute. The cite attribute is a property of the q element. The cite element is an entity on its own, to refer the reader somewhere else. An example of the use of the site element is in,

In the words of <cite>Charles Dikinson</cite> - <q>An intellectual says an easy thing in a hard way. An artist says a hard thing in an easy way.</q>

The browser may give a particular style to the cited text. Now, this particular citation (cite element with its text content) is good if the reader already knows Charles Dikinson and knows where to get more information on the topic.

Well, the title of the work or author’s name or URL of the web page for more information goes as content of the cite element. If you want the reader to be able to click for more information, then you should place the hyperlink as content or part of the content of the cite element, as in the following code:

<q>An intellectual says an easy thing in a hard way. An artist says a hard thing in an easy way.</q><cite> - Charles Dikinson <a href='http://www.somesite.com/charles.htm'>July 4, 2015</a></cite>

The title Attribute
All HTML elements have the title attribute. The title attribute is for a tooltip. It presents advisory information. When the mouse pointer goes over an element, which has the title attribute, the value of the title attribute appears.

abbr
This is a double tag element for abbreviation. It typically works with its title attribute, so that when the reader’s mouse pointer goes over the abbreviation, the expansion appears. You may also want to give all the abbreviations of the article, a particular style (CSS); in that case, some or all the abbr elements may not have the title attribute. The following code shows the abbr element is use:

The <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> began working on HTML5 in 2004.

I tried the code in my browser and the abbreviation was underlined with dash line; the tooltip appeared on mouse over.

dfn
This is a double tag element for definition term. Assume that you have an article, and at the top of the article you have a definition term (word or phrase) with the definition (explanation) of the term. In places down the article, the definition term may reoccur without the definition (explanation). You may want to identify all the definition terms for styling purpose; in that case, use the dfn element for all the definition terms. The following two paragraphs show the use of the dfn element:

<dfn>Garage Door Opener</dfn>: This is a device that allows off-world teams to open the iris.

John activated his <dfn>Garage Door Opener</dfn> and so Peter ordered the iris to be opened.

I tried the code and my browser displayed the term in italic.

You definition term may actually be an abbreviation. No problem: just let the content of the dfn element be the abbr element, and the abbr element title attribute should have the expansion. The following two paragraphs illustrates this:

<dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>: This is a device that allows off-world teams to open the iris.

John activated his <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn> and so Peter ordered the iris to be opened.

You may want the definition term to be clickable, so that when the reader clicks it, the page should jump to the definition (explanation). No problem: just place the definition term in a hyperlink as in the following code:

<dfn id="gdo"><abbr title="Garage Door Opener">GDO</abbr></dfn>: This is a device that allows off-world teams to open the iris.

John activated his <a href=#gdo><dfn><abbr title="Garage Door Opener">GDO</abbr></dfn></a>and so Peter ordered the iris to be opened.

HTML5 has come with a coding convention, compared to HTML4. The convention is that every entity you can thing of, should have its own element.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

HTML Text Elements to Precise and give Meanings

Text Elements in HTML – Part 2

Introduction

Related Links

Comments