Quote Tags

4.1 The <blockquote> Element

In HTML, there are special tags for formatting quotes: <blockquote>, <cite>, and <q>. Each of these tags has its specific purpose and is used for different types of quotations and source references.

The <blockquote> tag is used to mark up lengthy blocks of quoted text. Browsers typically display such quotes with an indented margin on the left to distinguish them from the main text.

Usage example:

    
      <blockquote>
        "The only limit to our realization of tomorrow is our doubts of today."
      </blockquote>
    
  

Features:

• It is a block-level element
• Often displayed with an indent on the left
• Can contain other block and inline elements
• Can use the cite attribute to specify the URL of the quote's source

The cite attribute:

The cite attribute in the <blockquote> tag is used to specify the source of the quote. Although this attribute is not displayed visually, it helps retain information about the origin of the quote, which is useful for search engines and other automated text processing systems.

Example with the cite attribute:

    
      <blockquote cite="https://example.com/quote-source">
        "The only limit to our realization of tomorrow is our doubts of today."
      </blockquote>
    
  

4.2 The <cite> Element

The <cite> tag is used to specify the source of a quote or the title of a work, like a book, article, movie, etc. Text within the <cite> tag is usually displayed in italics.

Usage example:

    
      <p>Quote source: <cite>Franklin D. Roosevelt</cite></p>
    
  

Features:

• It is an inline element
• Usually displayed in italics
• Used to indicate sources of quotes or titles of works

Example with <blockquote> and <cite>:

    
      <blockquote  cite="https://example.com/quote-source">
        "The only limit to our realization of tomorrow is our doubts of today."
        <cite>— Franklin D. Roosevelt</cite>
      </blockquote>
    
  

4.3 The <q> Element

The <q> tag is used for marking up short, inline quotes. Browsers automatically add quotation marks around the text enclosed in the <q> tag.

Usage example:

    
      <p>As Albert Einstein said, <q>Imagination is more important than knowledge</q>.</p>
    
  

Features:

• It is an inline element
• Automatically adds quotation marks around the quote
• Used for short quotes embedded in the main text

The cite attribute for <q>:

The cite attribute in the <q> tag is also used to specify the URL of the quote's source.

Example with the cite attribute:

    
      <p>As Albert Einstein said, <q cite="https://example.com/einstein-quote">Imagination is more important than knowledge</q>.</p>
    
  

Combined Use of Quote Tags

These tags can be used together to create more structured and informative content.

    
      <h1>Example of Using Quote Tags</h1>
      <p>
        As Albert Einstein said, <q cite="https://example.com/einstein-quote">Imagination is more important than knowledge</q>.
      </p>
      <blockquote cite="https://example.com/quote-source">
        "The only limit to our realization of tomorrow is our doubts of today."
        <cite>— Franklin D. Roosevelt</cite>
      </blockquote>
    
  

The <blockquote>, <cite>, and <q> tags are important for the proper formatting of quotes in HTML. These tags support both visual distinction of quotes and semantic meaning, which is important for search engines and automated text processing systems.

1

Task

Frontend SELF EN, level 4, lesson 4

Locked

The

Tag

The

Tag

Open

1

Task

Frontend SELF EN, level 4, lesson 4

Locked

Using the Tag

Using the Tag

Open