EN

HTML・Polishing your text

Show a quotation

Tags that mark someone's words or a passage from a book as "this is a quote." Use blockquote and q to keep your own words and borrowed words neatly apart.

When you want to put a passage from a book, or something someone said, on your page, the quotation tags clearly show “these aren’t my own words; they’re borrowed.” They don’t blend in with your own writing, which makes things easier for readers too.

Use blockquote for a block of quotation

<blockquote> is for quoting a whole chunk of text at once. In most browsers it’s displayed indented a little on both sides, so you can tell “ah, this is a quote” just by looking.

<blockquote>
  <p>Persistence is power. Take one small step, every day.</p>
</blockquote>
It’s indented a little on both sides, so you can tell “this is a quote” by sight.

Inside <blockquote>, you can put things like <p> as usual. Picture it as “placing your usual paragraph inside the quotation box.”

Use q for a short phrase within a sentence

To slip a short quote into the middle of your text, use <q>. q is short for quote. In most browsers, it automatically adds quotation marks (” ”) for you.

<p>The teacher always said <q>don't rush, do it carefully</q>.</p>
Even though you didn’t type them, quotation marks (”…”) are added automatically before and after <q>.

You don’t have to type the quotation marks yourself — <q> both signals “this is a quote” and adds the marks for you.

Use cite to show where it came from

When you want to add the source (like a book’s title), use <cite>. In most browsers it becomes italic, marking it as “this is a work’s title.”

<blockquote>
  <p>I am a cat. As yet I have no name.</p>
</blockquote>
<p>—— <cite>I Am a Cat</cite></p>
Only the work title wrapped in <cite> turns italic, marking it as “this is a work’s title.”

Quietly attach the source URL (the cite attribute)

Separate from the <cite> tag, <blockquote> and <q> also have an attribute called cite. It’s a bit confusing, but the <cite> tag is the source name that shows on screen, while the cite attribute is the source URL that doesn’t show on screen.

<blockquote cite="https://example.com/meiji-bungaku">
  <p>I am a cat. As yet I have no name.</p>
</blockquote>
What you writeVisible?Role
<cite>work title</cite>VisibleThe source name shown to readers
cite="URL" (attribute)Not visibleThe source address for browsers and search engines

While you’re a beginner, there’s no need to force yourself to use it. “The visible source is the <cite> tag; the invisible source is the cite attribute” — just knowing that there are two things with the same name but different roles means you won’t be puzzled when you come across one later.

Summary of this lesson

  1. A block of quotation is <blockquote> (put a <p> inside)
  2. A short quote within a sentence is <q> (quotation marks are added automatically)
  3. You can show the source with <cite>

Try it: a favorite saying

Let’s add a favorite saying (a personal motto) to Shima’s self-introduction with <blockquote>.

<h2>Self-introduction</h2>
<p>Hi! I'm Shima. I love drawing, and on weekends I often go out for ramen.</p>

<blockquote>
  <p>A little bit every day.</p>
</blockquote>
<p>—— <cite>Shima's favorite saying</cite></p>

The <h2> and the first <p> are from before. What you’re adding this time is the <blockquote> and <cite> parts. The quote is shown indented a little on both sides, so you can see at a glance that these are “borrowed words.”

Browser view. Below the self-introduction, the quote “A little bit every day.” is shown indented on both sides, with its source added underneath
Only the quote part looks slightly indented.

Once you’ve done it, try rewriting it into your own favorite saying. A line from a book or a proverb works just as well. As it happens, the quote in the About section of /goal is exactly this one.

FAQ

What's the difference between blockquote and p?
p is your own ordinary text, while blockquote is a box just for quotes that marks someone else's writing or a passage from a book as 'these are borrowed words.' You choose based on whether the whole content is someone else's words.
Do I always have to write the cite tag?
It isn't required. Showing the source is helpful because it makes it easier for readers to reach the original, so 'write it when you can' is a fine attitude to have.
Can I put a q tag inside another q tag?
Yes. Most browsers automatically tell nested q tags apart and display a different kind of quotation mark for the outer and the inner one.