HTML Quotation code | HTML Tutorial

HTML Quotation code

In this tutorial, we will learn about HTML quotation code. There are few number of HTML elements those help us to add different information on a web page.

You will be able to introduce HTML quotation marks in a page after learning these elements.


HTML <blockquote> Element

The HTML <blockquote> element represents a section that is quoted from outside source.

Most web browsers add some indentation (about 5 spaces) to both sides of a blockquote to make it stand out from the surrounding text.

This is a block-level element. It creates a separate section for the text available within this element.

You can design this section further with CSS to make it more good looking.

<blockquote>
  <p>Don’t compare yourself with anyone in this world…if you do so, you are insulting yourself.</p>
  <p>-Bill Gates</p>
</blockquote>

The output shows in a web browser:

Don’t compare yourself with anyone in this world…if you do so, you are insulting yourself.

-Bill Gates


HTML <q> Element

The HTML <q> element defines an inline quote inside a block of text.

Normally, browsers place quotation marks around the quote.

<q> is an inline-level element. It does not create any separate section or line.

This HTML element is useful for short quotations that don’t require line breaks; for long quotations you can use the <blockquote> element.

<p>Oprah Winfrey once said, <q>You can have it all. Just not all at once.</p>

The output shows in a web browser:

Oprah Winfrey once said, You can have it all. Just not all at once.


HTML <abbr> Element

The HTML <abbr> element represents an abbreviation or an acronym.

This element contains an attribute title to provide an expansion or description for the abbreviation.

This element shows the full form as a pop-up text when you hover the mouse over the abbreviation.

<p>This is the complete <abbr title="HyperText Markup Language">HTML</abbr> course for learning web development.</p>

The output shows in a web browser:

This is the complete HTML course for learning web development.


HTML <address> Element

The HTML <address> element is used to indicate an address or contact information.

This is a block-level element. It creates a separate section for the text available within this element.

The text within this element usually renders in italic.

<address>
CHRIS NISWANDEE<br>
SMALLSYS INC<br>
795 E DRAGRAM<br>
TUCSON AZ 85705<br>
USA
</address>

The output shows in a web browser:

CHRIS NISWANDEE
SMALLSYS INC
795 E DRAGRAM
TUCSON AZ 85705
USA

HTML <cite> Element

The HTML <cite> element can be defined as title of a work (e.g. a book, a poem, a film, a TV show, a painting, a play etc.)

This is an inline-level element. You can use it in a block of text.

Web browsers usually display <cite> elements in italic.

<p>This HTML tutorial always follow <cite>W3 Standard for Web Development</cite>.</p>

The output shows in a web browser:

This HTML tutorial always follow W3 Standard for Web Development.


HTML <bdo> Element

The HTML <bdo> element (bi-directional override) is used override the default direction of text.

This element has dir attribute to indicate the text direction. The value of this attribute must be either rtl (right to left) or ltr(left-to-right).

Note: Default value of this element is ltr (left-to-right).

This element is useful when dealing with languages that are written from right to left, such as Hebrew and Arabic.

<p>This paragraph will go left-to-right.</p>  
<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>

The output shows in a web browser:

This paragraph will go left-to-right.

This paragraph will go right-to-left.


HTML <kbd> Element

The HTML <kbd> element represents an inline text that will go as a user input from a keyboard.

The content within this element is displayed in monospaced font (all characters have the same width) in the browser.

You can use CSS to give more style.

<p>Please press <kbd>Ctrl + S</kbd> to save the document.</p>

The output shows in a web browser:

Please press Ctrl + S to save the document.


Time to practice

OUTPUT

Learn more about basic HTML tags, our tutorial – HTML Basic Tags