HTML Quotations

Learn how to represent short quotations, long quotations, and quoted titles or references using HTML elements.

Introduction to HTML Quotations

HTML provides specific elements for marking quoted content. These elements help communicate the structure and meaning of quotation content.

The <q> Element

The <q> element is used for a short inline quotation.

Syntax

<q>Quoted text</q>

Example

<p>
    The instructor said
    <q>Practice HTML every day.</q>
</p>

Output

The <blockquote> Element

The <blockquote> element is used for longer quotations that are separated from the surrounding content.

Syntax

<blockquote>
    Quoted content goes here.
</blockquote>

Example

<blockquote>
    Learning to write programs expands
    your ability to solve problems.
</blockquote>

Output

<q> vs <blockquote>

The <cite> Element

The <cite> element is used to identify the title of a creative work or a reference to a source.

<p>
    I am reading
    <cite>The Web Development Guide</cite>.
</p>

Using <blockquote> with <cite>

<blockquote>

    Learning is a continuous process.

    <cite>
        Web Development Guide
    </cite>

</blockquote>

The cite Attribute

The cite attribute can provide a URL that identifies the source of quoted information.

<blockquote cite="https://example.com/source">

    Quoted information goes here.

</blockquote>

Short Quotation Examples

<p>
    She said
    <q>Learn HTML first.</q>
</p>

<p>
    The teacher said
    <q>Practice regularly.</q>
</p>

Long Quotation Example

<blockquote>

    HTML provides the structure of a web page.
    CSS controls its visual presentation.
    JavaScript can add interaction and behavior.

</blockquote>

Quotations Inside Paragraphs

<p>

    Our instructor said
    <q>HTML is the foundation of web development.</q>

    We followed the advice.

</p>

Styling Quotations with CSS

CSS can be used to control the appearance of quotation blocks without changing their semantic meaning.

<blockquote class="custom-quote">
    Learn something new every day.
</blockquote>

<style>

    .custom-quote {
        border-left: 4px solid blue;
        padding-left: 15px;
        font-style: italic;
    }

</style>

Example 🤓🌍

<h2>
    Student Feedback
</h2>

<blockquote>

    The HTML course helped me understand
    the fundamentals of web development.

    <cite>
        Student Feedback
    </cite>

</blockquote>

<p>

    The instructor said
    <q>Practice by building projects.</q>

</p>

Important Points

• Use <q> for short inline quotations.
• Use <blockquote> for longer quotations.
• Use <cite> for the title of a creative work or source reference.
• The cite attribute can identify the source of quoted information.
• Use CSS when you need to change the visual appearance of quotation elements.

Common Mistakes

• Using <blockquote> for every short sentence.
• Using quotation elements only for visual indentation.
• Forgetting to identify the source when the source information is available.
• Using quotation tags where normal text formatting would be more appropriate.

Practice Exercise

1. Create a short quotation using <q>.
2. Create a long quotation using <blockquote>.
3. Add a source title using <cite>.
4. Add a cite attribute to a blockquote.
5. Use CSS to style your blockquote.