29 September, 2018

HTML Quotation and Citation Elements

Programing Coderfunda September 29, 2018 HTML5 No comments

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.

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

Test Yourself with Exercises!

Exercise 1 »Exercise 2 »Exercise 3 »Exercise 4 »

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

HTML Quotation and Citation Elements

Programing Coderfunda September 29, 2018 HTML5 No comments

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.

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

Test Yourself with Exercises!

Exercise 1 »Exercise 2 »Exercise 3 »Exercise 4 »

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

HTML Text Formatting

Programing Coderfunda September 29, 2018 HTML5 No comments

HTML Text Formatting

❮ PreviousNext ❯

Text Formatting

This text is bold
This text is italic
This is subscript and superscript
Try it Yourself »

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>
Try it Yourself »
The HTML `<strong>` element defines strong text, with added semantic "strong" importance.

Example

<strong>This text is strong</strong>
Try it Yourself »

HTML <i> and <em> Elements

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

Example

<i>This text is italic</i>
Try it Yourself »
The HTML `<em>` element defines emphasized text, with added semantic importance.

Example

<em>This text is emphasized</em>
Try it Yourself »
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>
Try it Yourself »

HTML <mark> Element

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

Example

<h2>HTML <mark>Marked</mark> Formatting</h2>
Try it Yourself »

HTML <del> Element

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

Example

<p>My favorite color is <del>blue</del> red.</p>
Try it Yourself »

HTML <ins> Element

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

Example

<p>My favorite <ins>color</ins> is red.</p>
Try it Yourself »

HTML <sub> Element

The HTML `<sub>` element defines subscripted text.

Example

<p>This is <sub>subscripted</sub> text.</p>
Try it Yourself »

HTML <sup> Element

The HTML `<sup>` element defines superscripted text.

Example

<p>This is <sup>superscripted</sup> text.</p>
Try it Yourself »

Test Yourself with Exercises!

Exercise 1 »Exercise 2 »Exercise 3 »Exercise 4 »Exercise 5 »

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