HTML Quotation and Citation Elements

Introduction :-

HTML (Hypertext Markup Language) provides specific elements to represent quotations and citations within a webpage. These elements allow web developers to structure and format textual content to indicate quoted or cited information. Two commonly used elements for this purpose are the <blockquote> and <cite> elements.

<blockquote> Element:
The <blockquote> element is used to mark up sections of quoted content. It indicates that the enclosed text is a longer quotation, typically taken from another source. The <blockquote> element can be used to attribute the quoted content to its original author or source.

<blockquote>
  <p>This is a quoted text from another source.</p>
  <cite>Author or Source</cite>
</blockquote>

<cite> Element:
The <cite> element is used to mark up the title of a work, such as a book, article, or any other creative work, that is referenced or cited within the content. It helps to indicate the source or origin of the cited content. The <cite> element can be used within the <blockquote> element or independently.

<p>This paragraph contains a <cite>book title</cite> that is being referenced.</p>

Example:-

<!DOCTYPE html>
<html>
<head>
    <title>Quotation and Citation Elements</title>
    <style>
        .quotation {
            font-style: italic;
        }

        .citation {
            color: gray;
        }
    </style>
</head>
<body>
    <h1>HTML Quotation and Citation Elements</h1>

    <h2>Quotation Element</h2>
    <blockquote class="quotation">
        <p>This is a quotation.</p>
        <footer>- Author</footer>
    </blockquote>

    <h2>Citation Element</h2>
    <p>
        According to <cite class="citation">source</cite>, this is some information.
    </p>
</body>
</html>

The <blockquote> element is used for marking up quoted content, while the <cite> element is used for marking up the title or source of a referenced work. These elements provide semantic meaning to the content and can be styled to enhance the visual representation on a webpage.