In HTML, when do you use <q> versus <blockquote>, and what do the cite attribute and the <cite> element each do?

## Inline versus block The first decision is structural. `<q>` is phrasing content: it lives inside a sentence, the way a quoted fragment does in prose. `<blockquote>` is flow content: it is its own block, for a quotation long enough to stand apart. ```html <p>She called it <q>the last honest interface</q> and moved on.</p> <blockquote> <p>The best interface is the one you never notice.</p> </blockquote> ``` The rule of thumb interviewers want: if the quotation interrupts a sentence, `<q>`; if it stands between paragraphs, `<blockquote>`. ## The quotation marks come from the browser `<q>` is unusual: the browser's default stylesheet generates the opening and closing quotation marks for you, and which marks it uses follows the language in effect, so the same markup produces English, French or German conventions when `lang` is set correctly. The practical consequence is simple — **do not type quotation marks inside `<q>`**, or you get two sets: ```html <p>He said <q>"hello"</q>.</p> <!-- renders with doubled marks --> <p>He said <q>hello</q>.</p> <!-- correct --> ``` Nested `<q>` elements produce the inner quotation convention (single marks in English), which is the other reason to let the browser handle it. `<blockquote>`, by contrast, gets no generated marks — the default rendering indents it and nothing more. ## The `cite` attribute Both `<q>` and `<blockquote>` accept `cite`, and it is one of the most misunderstood attributes in HTML. Its value is a **URL** identifying the source document: ```html <blockquote cite="https://example.com/interview"> <p>We shipped it in a weekend.</p> </blockquote> ``` What it does for users: nothing. No browser renders it, it is not a link, it does not appear in a tooltip, and it is not exposed to assistive technology. It is a machine-readable annotation that a script or a tool could read. So if you want the reader to be able to reach the source — and usually you do — you must also provide a visible, real link. Treating `cite` as "the way you credit a quote" is the classic wrong answer. ## The `<cite>` element Different element, different job: `<cite>` marks the **title of a work** — a book, a paper, a film, a song, a specification, a blog post. The spec is specific that it is for the title of the work, not for the name of a person. That trips up a lot of candidates, because the traditional print convention is to italicise both, and `<cite>` happens to render italic by default. ```html <p>The pattern is described in <cite>The Design of Everyday Things</cite>.</p> ``` So the person's name is plain text (or a link to their page); the work's title is `<cite>`. ## Where attribution goes The specification states that attribution for a quotation, if any, must be placed **outside** the `<blockquote>` element. The blockquote's contents are the quotation itself, and nothing else. In practice you put the attribution in a following paragraph, or wrap quotation and attribution together in a containing element that carries the credit: ```html <blockquote cite="https://example.com/essay"> <p>The best interface is the one you never notice.</p> </blockquote> <p>— Dana Reyes, <cite><a href="https://example.com/essay">Quiet Software</a></cite></p> ``` The em dash and name are text, the work's title is `<cite>`, the reachable source is a real link, and the machine-readable source URL sits in `cite="…"`. ## Pitfalls to name in an interview Typing quotation marks inside `<q>`. Using `<blockquote>` to indent something that is not a quotation — indentation is a styling decision and does not belong to a semantic element. Putting the attribution inside the `<blockquote>`, which makes the credit part of the quoted words. Using `<cite>` for the speaker's name. And believing the `cite` attribute credits or links the source; it records a URL, and only a visible link actually delivers it.