Pages

9/07/2018

HTML Quotation and Citation Elements

Quotation

Here is a quote from WWF's website:
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

HTML <q> for Short Quotations

The HTML <q> element defines a short quotation.
Browsers usually insert quotation marks around the <q> element.

Example

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
 

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 WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
 

HTML <abbr> for Abbreviations

The HTML <abbr> element defines an abbreviation or an acronym.
Marking abbreviations can give useful information to browsers, translation systems and search-engines.

Example

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

HTML <address> for Contact Information

The HTML <address> element defines contact information (author/owner) of a document or an article.
The <address> element is usually displayed in italic. Most browsers will add a line break before and after the element.

Example

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
 

HTML <cite> for Work Title

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

Example

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
 

HTML <bdo> for Bi-Directional Override

The HTML <bdo> element defines bi-directional override.
The <bdo> element is used to override the current text direction:

Example

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

HTML Quotation and Citation Elements

Tag Description
<abbr>              Defines an abbreviation or acronym
<address>              Defines contact information for the author/owner of a document
<bdo>              Defines the text direction
<blockquote>              Defines a section that is quoted from another source
<cite>              Defines the title of a work
<q>              Defines a short inline quotation
 
Read More »

HTML Text Formatting

Text Formatting




This text is bold
This text is italic
This is subscript and superscript

HTML Formatting Elements

In the previous chapter, you learned about the HTML style attribute.
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Small text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

Example

<b>This text is bold</b>
The HTML <strong> element defines strong text, with added semantic "strong" importance.

Example

<strong>This text is strong</strong>

HTML <i> and <em> Elements

The HTML <i> element defines italic text, without any extra importance.

Example

<i>This text is italic</i>
 
 

The HTML <em> element defines emphasized text, with added semantic importance.

Example

<em>This text is emphasized</em>
Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is "important".

HTML <small> Element

The HTML <small> element defines smaller text:

Example

<h2>HTML <small>Small</small> Formatting</h2> 

HTML <del> Element

The HTML <del> element defines
deleted(removed) text.

Example

<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element

The HTML <ins> element defines
inserted(added) text.

Example

<p>My favorite <ins>color</ins> is red.</p>

HTML <sub> Element

The HTML <sub> element defines subscripted text.

Example

<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> Element

The HTML <sup> element defines superscripted text.

Example

<p>This is <sup>superscripted</sup> text.</p    

HTML Text Formatting Elements

Tag Description
<b>               Defines bold text
<em>               Defines emphasized text 
<i>               Defines italic text
<small>               Defines smaller text
<strong>              Defines important text
<sub>              Defines subscripted text
<sup>              Defines superscripted text
<ins>             Defines inserted text
<del>             Defines deleted text
<mark>             Defines marked/highlighted text
 
Read More »