HTML Academy
Combining pre and code tags
Text markup11/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 as well as description list
  • 7. The pre tag, which is used to designate preformatted text
  • 8. HTML entities
  • 9. The tag code, or code snippet
  • 10. Combining pre and code tags
  • 11. The tag q, which is used to format inline quotes
  • 12. The blockquote tag, which is used for calling out quotes
  • 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 blockquote tag, which is used for calling out quotes
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The tag q, which is used to format inline quotes

The pevious task’s blog entry described tags that are used for marking up quotes. And this is great, because now in the text you need to quote the boss’s direct speech.

HTML has two tags for marking up quotes. The simplest is the <q> tag (which is short for “quote”). It is designed to call out quotes within a sentence. The browser automatically frames the text inside the tag with quotation marks. Therefore, you don’t need to add quotation marks manually.

If you know the Internet address of the quote, you can specify it in the attribute cite:

The specification states: <q cite="https://www.w3.org/TR/html52/">The q element represents some phrasal content that is quoted from another source.</q>.

But do not confuse the cite attribute with the tag of the same name <cite>, which can also be applied to quotes. The tag <cite> is the “extended version” of the attribute cite. In addition to providing the address of the quotation source, you can also use this tag to indicate the name of the work that the text is quoted from as well as the name of the author or organization to which the text can be attributed. By default, the contents of the <cite> tag are formatted in italics in the browser.

When the tags <q> and <cite> are used together, they are placed next to each other:

<p>According to <cite>Charles Bukowski</cite>, <q>An intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.</q></p>

The <cite> tag can be used independently, and it does not have to be used with a quote:

<p>Who is your favorite doctor? (In the series <cite>Doctor Who</cite>)</p>

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>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, there is no time like the present (popular wisdom).</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; }

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. Enclose the text There is no time like the present using the <q> tag.

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

    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.