Lesson 4: Quotations

Overview

In this HTML lesson, we use various quotation elements to demonstrate the differences between block-level and inline elements. In our first example, we show that we can use either quotation characters or quotation elements to display quotation marks in our document. However, the elements provide greater context to the content. Then we demonstrate that nested quotation elements can be used to automatically put single quote marks on inner quotes. Finally, we demonstrate the difference between block-level elements and inline elements by putting quotation elements inside a blockquote element.

Characters versus Elements

We can put quotations inside an HTML document by using quotation characters, but it is advantageous to use quotation elements instead. Quotation elements provide the document with additional context about which portions lie within a quote. This allows us to do things like set the quoted text red via styling, as shown below. Quotation or g elements are inline elements, in contrast to the block elements that we have seen before. To see the difference between the inline and block elements, we have set the background of the inline quotation elements to gray and we have put a border box around the block-level paragraph element.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>Now when Jesus came into the district of Caesare'a Philippi, he asked his disciples, "Who do
    men say that the Son of man is?" And they said, "Some say John the Baptist, others say Eli'jah,
    and others Jeremiah or one of the prophets." He said to them, "But who do you say that I am?"
    Simon Peter replied, "You are the Christ, the Son of the living God." And Jesus answered him,
    "Blessed are you, Simon Bar-Jona! For flesh and blood has not revealed this to you, but my
    Father who is in heaven. And I tell you, you are Peter, and on this rock I will build my church,
    and the powers of death shall not prevail against it. I will give you the keys of the kingdom of
    heaven, and whatever you bind on earth shall be bound in heaven, and whatever you loose on earth
    shall be loosed in heaven." Then he strictly charged the disciples to tell no one that he was
    the Christ.</p>
  </body>
</html>

Output

Output with Red Text

Output with Block and Inline Elements

Nested Quotations

Sometimes, we need to represent a quote within a quote. To do this, the inner quote is set within single quote marks. This can be done with characters, but quotation elements provide us with a more elegant solution, since the automatically set the inner quotation in single quotes as shown below.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>And the Pharisees and Sad'ducees came, and to test him they asked him to show them a sign
    from heaven. He answered them, "When it is evening, you say, 'It will be fair weather; for the
    sky is red.' And in the morning, 'It will be stormy today, for the sky is red and threatening.'
    You know how to interpret the appearance of the sky, but you cannot interpret the signs of the
    times. An evil and adulterous generation seeks for a sign, but no sign shall be given to it
    except the sign of Jonah." So he left them and departed.</p>
  </body>
</html>

Output

Output with Gray Backgrounds

Block Quotes

Block quotes are used when a large quote that spans several lines is included in the text. In this case, a block quote is used instead of an inline quote, and the block quote forms something like a new paragraph. Block quotes are formed automatically by using the blockquote element, which is, as the name suggests, as block-level element. This element signals to the browser that the contained text should be put in its own block and indented.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>The Revised Standard Version Catholic Edition translates the Gospel of Matthew 16:1-4 as
    follows:</p>
    <blockquote>And the Pharisees and Sad'ducees came, and to test him they asked him to show them a
    sign from heaven. He answered them, <q>When it is evening, you say, <q>It will be fair weather;
    for the sky is red.</q> And in the morning, <q>It will be stormy today, for the sky is red and
    threatening.</q> You know how to interpret the appearance of the sky, but you cannot interpret
    the signs of the times. An evil and adulterous generation seeks for a sign, but no sign shall be
    given to it except the sign of Jonah.</q> So he left them and departed.</blockquote>
  </body>
</html>