Master the semantic HTML elements for quotations, citations, abbreviations, dates, and definitions — the building blocks of well-structured textual content.
HTML provides two elements for quoting text:
<blockquote> — Block quotationUsed for long, standalone quotations that form their own paragraph or section. Browsers typically indent it. Use the cite attribute to provide the source URL.
<blockquote cite="https://example.com/source">
<p>The Web is for everyone.</p>
</blockquote><q> — Inline quotationUsed for short quotes embedded within a sentence. Browsers automatically add quotation marks around the content.
<p>Tim Berners-Lee said <q>The Web is for everyone</q>.</p><cite> — CitationThe <cite> element names the title of a work (a book, article, film, etc.). It is rendered in italics by default.
<p>As described in <cite>HTML: The Living Standard</cite>.</p>Note: <cite> is for the title of a work, not for the person who said it.
<abbr> — AbbreviationWraps an abbreviation or acronym. The title attribute provides the expansion, shown as a tooltip on hover.
<p>The <abbr title="World Wide Web">WWW</abbr> was invented in 1989.</p><dfn> — Definition termMarks the first occurrence of a term being defined. Screen readers and search engines use it to understand that the surrounding text is defining this term.
<p><dfn>HTML</dfn> is a markup language for structuring web content.</p><address> — Contact informationRepresents contact information for the nearest <article> or <body>. It is not for arbitrary postal addresses — it specifically identifies how to contact the author or owner.
<address>
Written by <a href="mailto:jane@example.com">Jane Doe</a>.
</address>The <time> element represents a specific date, time, or duration. The key is the datetime attribute, which provides a machine-readable value.
<p>Published on <time datetime="2025-03-15">March 15, 2025</time>.</p>
<p>The event starts at <time datetime="14:30">2:30 PM</time>.</p>
<p>Duration: <time datetime="PT2H30M">2 hours 30 minutes</time>.</p>The datetime attribute uses the ISO 8601 format. Search engines can parse this to understand when content was published or when events occur.
<article>
<h2>The Birth of the Web</h2>
<p>
<dfn>HTML</dfn> (HyperText Markup Language) was created by
<abbr title="Tim Berners-Lee">TBL</abbr> in
<time datetime="1991">1991</time>.
</p>
<blockquote cite="https://www.w3.org/People/Berners-Lee/">
<p>The Web is more a social creation than a technical one.</p>
</blockquote>
<p>
This quote comes from <cite>Weaving the Web</cite>,
where Berners-Lee also wrote <q>I designed it for a social
effect — to help people work together</q>.
</p>
<address>
Article by <a href="mailto:author@example.com">Author</a>.
</address>
</article>What is the `<cite>` element used for?