HTML Academy
The q tag for inline quotations
Text markup12/21
Back to the list of tasks
  • 1. Let’s start the diary
  • 2. The ul tag, which is used to indicate an unordered list
  • 3. The ol tag, which is used to provide an ordered list
  • 4. The start and reversed attributes
  • 5. Nested lists
  • 6. The dl, dt and dd tags for description lists
  • 7. The pre tag, which is used to designate preformatted text
  • 8. HTML entities
  • 9. The code tag for code snippets
  • 10. Combining pre and code tags
  • 11. The q tag for inline quotations
  • 12. The blockquote tag for block quotations
  • 13. The br tag, which is used to create a line break
  • 14. The sub and sup tags, which are used to indicate subscript and superscript
  • 15. The time tag, which is used to specify the date and time
  • 16. The em and i tags, which are used to attract the user’s attention
  • 17. The strong and b tags, which are used to strengthen or highlight text
  • 18. The del and ins tags, which are used to highlight changes
  • 19. The div and span tags, style containers
  • 20. Summary of “Text markup”
  • 21. Test: Marking up an article
The br tag, which is used to create a line break
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The blockquote tag for block quotations

We expanded the entry to include a whole poem. And this is not just some short quote that is contained within a paragraph, so the <q> tag will not help.

The <blockquote> tag is intended to highlight long quotes, which may consist of several paragraphs. It highlights a quote not simply as a segment of text within a sentence. Rather, it formats the quote as a separate block of text with indents.

Just like <q>, <blockquote> may have an attribute cite containing a link to the source of the quote. And you can use the <cite> tag together with <blockquote>. The former is usually placed inside the quote. Example:

<blockquote>
  <p>Wits gain value when strength loses it.</p>
  <cite>Jason Statham</cite>
</blockquote>

Horizontal margins are usually added to the <blockquote> tag by the browser.

We added a few styles (spacing, a border and text color) to make the contents of <blockquote> look prettier. You can explore the styles in the style.css tab.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> Return to home </nav> </header> <main> <article> <h1>It is still Day Seven. Muffin gave me an assignment</h1> <p>Today Muffin came and gave me a bit of an unusual assignment. A certain female cat has moved in next door, and Muffin does not know how to write songs. Therefore, he asked me to find some sort of great composition that he could perform for her.</p> <p>Like they say, <q>there is no time like the present</q> (<cite>popular wisdom</cite>).</p> <p>I found a lyrical ballad for Muffin:</p> <!-- Start the quote here --> Meow meow meow meahh meow meeeow meow meow meow from the Collected Works of W. Furspeare. <p>I hope Muffin’s neighbour likes this ballad.</p> </article> <aside> Your ad could go here </aside> </main> <footer> Website footer </footer> </body> </html>
CSS
body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; } blockquote { padding-left: 14px; border-left: 2px solid #6a2cce; color: #6a2cce; } cite { color: #222222; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Let’s enclose the text on lines 24–29 using the <blockquote> tag.
    2. Then enclose the text of the poem inside the quote using the <p> tag,
    3. and mark up the source of the quote using the <cite> tag.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2026

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.