How To: Webpage Creation

HTML Quotations

HTML Quotation and Citation Elements
         

In this section we will go through the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML elements.

Example:

Here's a sample quote from my Autobiography:

Under skies of a quiet May evening in 1993, I was born in Naghalin, Novallas, Tanjay, Philippines. Today, at 30, I'm more than what you'll find on my birth record. I'm a dreamer, a writer, a designer, an artist, a coder – a dabbler in many worlds. I weave words, conjure landscapes, and breathe life into pixels. HTML is my second language, and creativity, my constant companion.

HTML <blockquote> for Quotations
         

The HTML <blockquote> element defines a section that is quoted from another source. Browsers usually indent <blockquote> elements.

Example:

<p>Here is a quote from my Autobiography:</p>
<blockquote cite="https://www.writing.com/main/view_item/item_id/2244849-Gervics-Autobiography">
Under skies of a quiet May evening in 1993, I was born in Naghalin, Novallas, Tanjay, Philippines. Today, at 30, I'm more than what you'll find on my birth record. I'm a dreamer, a writer, a designer, an artist, a coder – a dabbler in many worlds. I weave words, conjure landscapes, and breathe life into pixels. HTML is my second language, and creativity, my constant companion.
</blockquote>

HTML <q> for Short Quotations
         

The HTML <q> tag defines a short quotation. Browsers normally insert quotation marks around the quotation.

Example:

<p>I am always guided by the words of Milton Berle: <q>If opportunity doesn't knock, build a door.</q></p>

yields: I am always guided by the words of Milton Berle: "If opportunity doesn't knock, build a door."

HTML <abbr> for Abbreviations
         

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM". Marking abbreviations can give useful information to browsers, translation systems and search-engines.

TIP: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.

Example:

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

HTML <address> for Contact Information
         

The HTML <address> tag defines the contact information for the author/owner of a document or an article. The contact information can be an email address, URL, physical address, phone number, social media handle, etc. The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.

Example:

<p>The HTML address element defines contact information (author/owner) of a document or article.</p>

<address>
Written by Jose Gervic Labe< br >
Visit us at:< br >
Gervic.InkSpot.Com < br >
Dumaguete City, Negros Oriental< br >
PH, 6200
</address>

yields:

The HTML address element defines contact information (author/owner) of a document or article.

Written by Jose Gervic Labe
Visit us at:
Gervic.InkSpot.Com
Dumaguete City, Negros Oriental
PH, 6200

HTML <cite> for Work Title
         

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).

IMPORTANT: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

Example:

<p>The HTML cite element defines the title of a work.</p>
<p>Browsers usually display cite elements in italic.</p>

<img src="https://www.writing.com/main/images/action/display/ver/1650359756/item_id/2271610.png" alt="Reviewer of the Month">
<p><cite>Poetry Review Garden Reviewer of the Month</cite> designed by Gervic.</p>

yields:

The HTML cite element defines the title of a work.

Browsers usually display cite elements in italic.



Poetry Review Garden Reviewer of the Month designed by Gervic.

HTML <bdo> for Bi-Directional Override
         

BDO stands for Bi-Directional Override. The HTML <bdo> tag is used to override the current text direction.

Example:

<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>

<bdo dir="rtl">This line will be written from right to left</bdo>

yields:

If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):

tfel ot thgir morf nettirw eb lliw enil sihT