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 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 <mark> Element

The HTML <mark> element defines marked or highlighted text:

Example :

<h2>HTML <mark>Marked</mark> 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 _subscripted text.</p> 

HTML <sup> Element

The HTML <sup> element defines superscripted text.

Example :

<p>This is ^{superscripted} text.</p> 

HTML Styles

Example :

I am Red

I am Blue

I am Big

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

You will learn more about CSS later in this tutorial.

HTML Background Color

The background-color property defines the background color for an HTML element.

This example sets the background color for a page to powderblue:

Example :

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

HTML Text Color

The color property defines the text color for an HTML element:

Example :

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

HTML Fonts

The font-family property defines the font to be used for an HTML element:

Example :

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

HTML Text Size

The font-size property defines the text size for an HTML element:

Example :

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

Example :

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

Chapter Summary 

• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment

HTML Paragraphs

HTML Paragraphs

The HTML <p> element defines a paragraph:

Example :

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Note: Browsers automatically add some white space (a margin) before and after a paragraph.

HTML Display

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.

The browser will remove any extra spaces and extra lines when the page is displayed:

Example :

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser 
ignores it.
</p>

Don't Forget the End Tag 

Most browsers will display HTML correctly even if you forget the end tag: 

Example :

<p>This is a paragraph.
<p>This is another paragraph. 

The example above will work in most browsers, but do not rely on it. 

Note: Dropping the end tag can produce unexpected results or errors.

HTML Line Breaks 

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

Example :

<p>This is<br>a paragraph<br>with line breaks.</p> 

The <br> tag is an empty tag, which means that it has no end tag. 

The Poem Problem

This poem will display on a single line:

Example :

<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p> 

The HTML <pre> Element 

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

Example :

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre> 

HTML Tag Reference

Tag	Description
<p>	Defines a paragraph
<br>	Inserts a single line break
<pre>	Defines pre-formatted text