Basics
HTML Quotations
Adding Quotations
HTML quotations use <blockquote> and <q> for citing content semantically.
Introduction to HTML Quotations
HTML provides semantic elements for quoting text: the <blockquote> tag for block-level quotations and the <q> tag for inline quotations. These tags help in emphasizing content that is being cited from another source, contributing to better semantics and accessibility of web pages.
Using the <blockquote> Tag
The <blockquote> tag is used for longer quotations that require a block-level element. It often renders with indentation or other distinctive styling by default in browsers, making it clear that the content is a quote.
Here's an example of how to use the <blockquote> tag:
Using the <q> Tag
The <q> tag is used for short, inline quotations. Browsers typically render the <q> element with quotation marks around the text.
Example of an inline quotation with the <q> tag:
Adding Citation Information
Both <blockquote> and <q> tags can include a cite attribute to specify the source URL of the quoted text. This provides additional context and credibility for the citation.
Example using the cite attribute with <blockquote>:
Example using the cite attribute with <q>:
Styling Quotations with CSS
Although browsers provide default styles for <blockquote> and <q>, you can customize their appearance using CSS. For example, you can change the indentation or add a border to <blockquote> elements.
Here's a simple CSS example:
Basics
- Previous
- Formatting
- Next
- Entities
