Command Palette

Search for a command to run...

Hectal
PHASE 2Beginner ~25 min· topic 4 of 7

Topic 2.4

Quotes, Code, Time and Other Meaningful Text

In one line

HTML has small elements that say exactly what a piece of text is: a quotation (blockquote, q, cite), an abbreviation (abbr), contact details (address), a date (time), or computer text (code, pre, kbd, samp, var).

0/7 · 0%

Think of it like this

Highlighter pens in different colours. A student marks quotes in blue, dates in green and formulas in pink, so later they can find every date at a glance. These elements are the colours: they don't just change the look, they label the kind of text, so browsers, search engines and screen readers can find and treat each kind correctly.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

blockquote
A long quotation shown as its own block, usually indented.
q
A short quotation inside a sentence. The browser adds the quote marks.
cite (element)
The title of a creative work, like a book or film. Not a person's name.
abbr
An abbreviation like HTML or km, with the full form in its title attribute.
address
Contact details for the author of an article or the owner of the page.
time / datetime
A date or time. The datetime attribute holds a machine-readable version like 2026-03-14.
pre
Preformatted text: spaces and line breaks are shown exactly as typed, in a monospace font.
code, kbd, samp, var
Computer text: code, keys the user presses, program output, and a variable name.
Monospace
A font where every letter is the same width, like on a typewriter. Good for code.

Step by step

01Quote a long passage

Use blockquote for a quotation that stands on its own. Put the source after it, usually in a figcaption (Topic 2.5) or a paragraph, and put the work's title in cite.

index.htmlwhole filehtml
<blockquote cite="https://www.w3.org/standards/webdesign/accessibility">
  <p>The Web is fundamentally designed to work for all people.</p>
</blockquote>
<p>— W3C, <cite>Accessibility</cite></p>

02Quote inside a sentence

Use q for short quotes. Don't type the quote marks yourself: the browser adds them, and nested q elements switch to single marks automatically. With lang="fr" they become « guillemets ».

index.htmlwhole filehtml
<p>My teacher always said <q>read the error message first</q>.</p>

03Mark abbreviations and contact details

Spell out the first use, then mark the short form. Put the author's contact details in address inside their article.

index.htmlwhole filehtml
<p>Cascading Style Sheets (<abbr title="Cascading Style Sheets">CSS</abbr>) control the look.</p>
<article>
  ...
  <address>Written by <a href="mailto:asha@example.com">Asha</a></address>
</article>

04Give dates a machine-readable value

Humans read the text; programs read datetime. The format follows a fixed standard (based on ISO 8601): year-month-day, 24-hour times, Z or +05:30 for the zone, P… for durations.

index.htmlwhole filehtml
<p>Published <time datetime="2026-03-14">14 March 2026</time>.</p>
<p>The sale starts at <time datetime="2026-03-14T09:00+05:30">9 am IST</time>.</p>
<p>Baking time: <time datetime="PT45M">45 minutes</time>.</p>

05Show code and keys

Inline code goes in code. A block of code goes in pre + code, with < escaped. Keys go in kbd, output in samp.

index.htmlwhole filehtml
<p>Press <kbd>Ctrl</kbd>+<kbd>S</kbd> to save.</p>
<pre><code>&lt;h1&gt;Hello&lt;/h1&gt;
&lt;p&gt;World&lt;/p&gt;</code></pre>
<p>The console prints <samp>Saved!</samp></p>
<p>The area is <var>w</var> × <var>h</var>.</p>

06Pick the right element

When you're not sure, follow the question chain below. If nothing fits, plain text or a span is fine: not every word needs an element.

Pick the right elementdiagram
Rendering diagram…

Try it yourself

  1. 1

    Change the quote language

    In the first example, predict what happens if you change lang="fr" to lang="de". Run it: German quotes look like „this“.

  2. 2

    Try a duration

    Change the time to <time datetime="PT1H30M">an hour and a half</time>. The console's As a Date line now prints Uncaught RangeError: Invalid time value: a duration is valid for time, but it's not a date, so new Date can't read it. Delete that console line afterwards.

  3. 3

    Unescape the code

    In the second example, replace &lt;p&gt; with a real <p>. Predict the element count, then run. The tag becomes an element and disappears from view.

Code & diagrams

Quotes, abbreviations and dates New tab

No quote marks were typed: the browser added them, nested ones in single quotes, and French ones as guillemets. Hover HTML to see its tooltip.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Shown: Pi Day 2026
Machine value: 2026-03-14
As a Date: 2026-03-14T00:00:00.000Z
Quote source: https://www.w3.org/standards/webdesign/accessibility
pre keeps whitespace, code shows tags safely New tab

The newline right after <pre> was dropped. The escaped tags became text, not elements.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

"Preformatted   text\n    keeps   every space\n"
<p>Hello & welcome</p>
Elements inside the code: 0

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Type quote marks around a q

Write <q>"Hello"</q>.

terminal
$ the page shows
── what you'll see ──
“"Hello"” (double quote marks)

Break #2

Paste HTML into a pre without escaping

Write <pre><code><button>Buy</button></code></pre> to show the code of a button.

terminal
$ the page shows
── what you'll see ──
A real, clickable button instead of the text <button>Buy</button>

Myth vs fact

Myth

<cite> marks the person who said a quote.

Fact

cite marks the title of a work (a book, article, film). A speaker's name is plain text, or can be in a caption.

Myth

<blockquote> is for indenting text.

Fact

It means "this is a quotation". To indent text, use CSS margin or padding.

Myth

<address> is for any postal address.

Fact

It's for contact information of the page owner or article author. Addresses elsewhere in content are ordinary text.

Myth

The title on abbr is accessible to everyone.

Fact

Tooltips appear only on mouse hover; touch and keyboard users miss them, and screen readers don't announce them reliably. Spell the term out in the text on first use.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

  • ▸

    q quote marks come from the CSS quotes property and content: open-quote / close-quote in the user-agent stylesheet; the browser picks marks per lang and tracks nesting depth. Copying the text often leaves the marks out because they are generated content.

  • ▸

    time's datetime accepts a set of fixed microsyntaxes: dates, month strings (2026-03), week strings (2026-W11), times, local and global date-times, time-zone offsets and durations. Search engines and schema.org tools use it for article dates.

  • ▸

    The parser drops one leading newline in pre, textarea and listing so authors can start content on its own line; a second newline is kept.

  • ▸

    Screen readers mostly ignore these elements' meaning by default (few announce code or q), but browsers, search engines, translators (which skip code), reader modes and copy-paste tools use it. Write the meaning anyway: it's correct and free.

Remember this

  1. 1

    Quotations. <blockquote> is a long quotation that stands as its own block (browsers indent it). <q> is a short quotation inside a sentence; the browser adds the quote marks for you, in the right style for the page's lang. Both can take a cite attribute with the URL of the source; it isn't shown, but tools can read it. The element <cite> is different: it marks the title of a work (a book, film, article, song), not a person's name.

  2. 2

    **<abbr>** marks an abbreviation or acronym, like <abbr title="HyperText Markup Language">HTML</abbr>. The title shows as a tooltip on mouse hover, but touch and keyboard users can't see tooltips, so the clearest pattern is to spell the term out in the text the first time and wrap the short form in abbr.

  3. 3

    **<address>** is contact information for the nearest article or for the whole page (body): an author's email, a company's contact link. It is not for any postal address that happens to appear in text, such as a shop location in a story.

  4. 4

    **<time>** marks a date, time or duration, with a datetime attribute in a machine-readable format: 2026-03-14 (date), 14:30 (time), 2026-03-14T14:30+05:30 (date and time with time zone) or PT2H30M (a duration of 2 hours 30 minutes). The visible text can be anything readable, like "Pi Day" or "yesterday". Search engines and scripts read the datetime value.

  5. 5

    Computer text. <code> is a piece of code (<code>console.log</code>). <pre> is preformatted text: whitespace and line breaks are kept exactly, shown in a monospace font, so code blocks are written <pre><code>…</code></pre>. <kbd> is something the user types or presses (<kbd>Ctrl</kbd>+<kbd>C</kbd>), <samp> is output from a program, and <var> is a variable in maths or code.

  6. 6

    Inside <code> and <pre>, HTML is still HTML: to show a tag literally you must escape < as &lt; and & as &amp; (Topic 1.4). One parsing detail: a newline directly after <pre> is ignored, so you can start the content on the next line without adding a blank line.

Explain it without notes

01

What's the difference between the cite attribute and the cite element?

02

Why does time have a datetime attribute when the date is already written in the text?

03

Explain how to show a block of HTML code on a web page so it displays as text.

04

When would you use kbd versus samp versus code?

Practice

01

Mark up this sentence: "In the book Clean Code, the author writes: functions should do one thing." (a short in-line quote and a book title).

02

Write a line that shows an event at 6:30 pm on 1 May 2026 in India (UTC+05:30), shown to humans as "May Day evening".

03

Show the instruction "Press Ctrl+Shift+I to open DevTools" and a code block showing <h1>Hi</h1>.

Trade-offs

  • ↔

    Marking every abbreviation and date takes time; mark the ones that matter (first use of a term, publication dates, event times) rather than every occurrence.

  • ↔

    pre keeps long lines from wrapping, which can cause horizontal scrolling on phones; add overflow-x: auto (or white-space: pre-wrap if wrapping is acceptable) in CSS.

Done when you can

  • I can mark long and short quotations and a work's title correctly.

  • I can write a time with a valid datetime for a date, a date-time and a duration.

  • I can show HTML code on a page with pre, code and escaped characters.

  • I know what kbd, samp and var are for.

  • I know when address is the right element and when it isn't.