HTML Quotation and Citation Elements
HTML Quotation and Citation Elements are
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation
<abbr> - Defines an abbreviation or acronym
The HTML 'abbr' element is used to define an abbreviation or acronym within an HTML document. It can be used to specify the full version of an abbreviation or acronym, which can be helpful for users who may not be familiar with the term.
To use the 'abbr' element, you need to include the abbreviation or acronym within the opening tag, and then use the 'title' attribute to specify the full version of the term. For example:
<abbr title="World Health Organization">WHO</abbr>
In this example, the 'abbr' element is used to define the abbreviation 'WHO', and the 'title' attribute is used to specify that it stands for 'World Health Organization'.
The 'abbr' element can be used with any abbreviation or acronym, including those that are commonly used in a particular field or industry. It is also useful for accessibility purposes, as it can provide additional information to users who may be using assistive technology to access the content on your site.
<address> - Defines contact information for the author/owner of a document
The HTML 'address' element is used to provide contact information for the author or owner of a document or article, such as a physical or email address. It is typically used in the footer or at the end of an article or document.
To use the 'address' element, simply wrap the contact information in the opening and closing 'address' tags, like this:
<address>
John Doe<br>
123 Main St.<br>
Anytown, USA<br>
Email: john@example.com
</address>
In this example, the 'address' element is used to provide contact information for John Doe, including his name, address, and email address. The 'br' tag is used to create line breaks between each line of text.
The 'address' element can contain any type of content that is allowed within a block-level element, including text, images, and other HTML elements. However, it is typically used only for contact information and not for other types of content.
It's important to note that the 'address' element should not be used to mark up addresses or contact information that are not related to the author or owner of the document or article. For example, it should not be used to mark up the address of a business or organization that is mentioned in the article. In these cases, it is better to use appropriate markup such as the 'p' element or a 'div' element with appropriate class names.
Also, keep in mind that the 'address' element is often styled with italic or bold text by default in browsers, so you may want to override these styles using CSS if you want to customize the appearance of the element on your site.
<bdo> Defines the text direction
The HTML 'bdo' element is used to override the default text direction of an HTML document, which is usually left-to-right. It can be used to specify that text should be displayed in a right-to-left direction, such as when writing in languages like Arabic or Hebrew.
To use the 'bdo' element, you need to include the text that should be displayed in a different direction within the opening and closing 'bdo' tags, and then use the 'dir' attribute to specify the direction in which the text should be displayed. For example:
<bdo dir="rtl">This text should be displayed from right to left.</bdo>
In this example, the 'bdo' element is used to specify that the text should be displayed in a right-to-left direction, and the 'dir' attribute is used to specify the directionality.
The 'bdo' element can also be used to display text in a left-to-right direction, which can be useful when writing in languages that use both left-to-right and right-to-left text. To display text in a left-to-right direction, you can use the 'dir' attribute with the value 'ltr', like this:
<bdo dir="ltr">This text should be displayed from left to right.</bdo>
It's worth noting that the 'bdo' element should be used sparingly, as changing the text direction can be confusing for users who are used to reading text in a specific direction. It's also important to keep in mind that the 'bdo' element does not translate text into a different language - it only changes the directionality of the text. If you need to translate text into a different language, you should use appropriate markup such as the 'lang' attribute or other tools for language translation.
<blockquote> - Defines a section that is quoted from another source
The HTML 'blockquote' element is used to indicate a section of quoted text in an HTML document. It is typically used when you want to quote text from another source, such as a book, article, or speech, and attribute the quotation to a specific source or author.
The 'blockquote' element is a block-level element, which means it takes up an entire line on the page and creates a new line after it. It should be used when you want to set apart a block of quoted text and distinguish it from the rest of the content on the page.
To use the 'blockquote' element, you simply wrap the quoted text in the opening and closing 'blockquote' tags, like this:
<blockquote>
Here is the quoted text.
</blockquote>
You can also use the 'cite' attribute within the 'blockquote' element to provide a citation for the quoted text. The 'cite' attribute should contain a URL, a reference to a book or other source, or a description of the source, like this:
<blockquote cite="https://www.example.com/source">
Here is the quoted text.
</blockquote>
The 'blockquote' element can contain any type of content that is allowed within a block-level element, including text, images, and other HTML elements. You can also style the 'blockquote' element using CSS to customize its appearance, such as changing the font size, color, or background color.
It is important to note that the 'blockquote' element should not be used to create a visual style for text, such as indenting or using quotation marks. Instead, it should be used to convey the meaning of a quoted section of text within the context of an HTML document.
<cite> - Defines the title of a work
The HTML 'cite' element is used to mark up a reference to a creative work, such as a book, article, or song. It is typically used to provide information about the source of a quote or other information that is referenced within a document or article.
To use the 'cite' element, you need to include the reference within the opening and closing 'cite' tags. For example:
<blockquote>
<p>"A room without books is like a body without a soul."</p>
<cite>Attributed to Cicero</cite>
</blockquote>
In this example, the 'blockquote' element is used to quote a well-known saying, and the 'cite' element is used to attribute the quote to Cicero.
The 'cite' element can be used with any type of reference, including books, articles, movies, songs, and more. It can also be used to mark up references to websites or other online content.
It's worth noting that the 'cite' element should not be used to mark up the title of a work, as this should be marked up with appropriate heading elements such as 'h1', 'h2', and so on. Instead, the 'cite' element should be used to provide information about the source of the work, such as the author, publisher, or date of publication.
Also, keep in mind that the 'cite' element does not provide any visual styling by default, so you will need to use CSS to style it appropriately on your website.
<q> - Defines a short inline quotation
The HTML 'q' element is used to mark up a short quotation that is integrated into the text of a document or article. It is typically used to provide a brief quote that supports or illustrates a point that is being made in the surrounding text.
To use the 'q' element, you need to include the quotation within the opening and closing 'q' tags. For example:
<p>In the words of <q>Albert Einstein</q>, "Imagination is more important than knowledge."</p>
In this example, the 'p' element is used to introduce a quote by Albert Einstein, and the 'q' element is used to mark up the quotation itself.
It's worth noting that the 'q' element is intended for short quotations that are integrated into the text of a document. If you need to quote a longer passage, you should use the 'blockquote' element instead.
Also, keep in mind that the 'q' element does not provide any visual styling by default, so you will need to use CSS to style it appropriately on your website. By default, browsers will often add quotation marks around the text marked up with the 'q' element, but you can use CSS to customize the appearance of the quotation marks or to hide them altogether.
