Table of Contents
In this tutorial, we will talk about <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> tags.
Quotation Using <blockquote> Tag
The <blockquote> element is used to indicate a section of quoted content. It is commonly used to display a long HTML quotation or a section of text that has been taken from another source.
<!DOCTYPE html>
<html>
<body>
<!--visible-start-->
<blockquote>
How far you go in life depends on your being tender with the young, compassionate with the aged, sympathetic with the striving and tolerant of the weak and strong. Because someday in your life you will have been all of these.
<cite>-- George Washington Carver</cite>
</blockquote>
<!--visible-end-->
</body>
</html>
HTML Short Quotations
The <q> tag is another HTML element used to mark up short quotations within a document. It is similar to the <blockquote> element, but it is used to indicate that the enclosed text is a short quotation, usually just a few words or a single sentence.
Here’s an example of how the <q> tag could be used:
<!DOCTYPE html>
<html>
<body>
<p>
The author wrote, <q>Don't go through life, grow through life.</q>
</p>
</body>
</html>HTML Abbreviations
HTML provides the <abbr> element for marking up abbreviations and acronyms within a document. The <abbr> element is used to specify an abbreviation or acronym and provides additional information about the term being abbreviated.
Here’s an example of how the <abbr> tag could be used:
<!DOCTYPE html>
<html>
<body>
<p>
The <abbr title="Hyper Text Markup Language">HTML</abbr> is used to create web pages.
</p>
</body>
</html>HTML Address Tag
The HTML address tag, <address>, is used to indicate contact information for its parent container, such as an article or section. This tag is typically used to provide the contact details of the author, owner, or publisher of the webpage or document.
The <address> element should be placed within the <body> section of the HTML document and can contain any combination of the following elements:
- Text
- Inline elements (such as <a>, <em>, <strong>, etc.)
- Block-level elements (such as <p>, <h1>, <ul>, etc.)
Here’s an example of how the <address> tag might be used in HTML:
<!DOCTYPE html>
<html>
<body>
<!--visible-start-->
<p>The HTML address element defines contact information (author/owner) of a document or article.</p>
<address>
Written by John Doe.<br>
Visit us at: <a href="https://stagging.codecarryon.com">codecarryon.com</a><br>
Box 564, Disneyland<br>
USA
</address>
<!--visible-end-->
</body>
</html>HTML <cite> for Work Title
The HTML <cite> tag is used to mark up a reference to a creative work, such as a book, movie, song, or article.
Here’s an example of how the <cite> tag might be used to indicate the title of a book:
<!DOCTYPE html>
<html>
<body>
<!--visible-start-->
<p>My favorite novel is <cite>The Great Gatsby</cite> by F. Scott Fitzgerald.</p>
<!--visible-end-->
</body>
</html>In this example, the <cite> tag is used to indicate the title of the book “The Great Gatsby”. The use of the <cite> tag is semantic, indicating that the text within the tag is the title of a work and should be given special meaning by web browsers and assistive technologies.
Note that the <cite> tag should not be used to indicate formattings, such as italicizing or underlining text. Instead, use CSS to style the <cite> tag as desired.
HTML <bdo> Bi-directional Override Tag
The HTML <bdo> tag stands for “Bidirectional Override”. It is used to override the default directionality of text in HTML, which is determined by the document language and the user’s reading direction.
The <bdo> tag is commonly used to display text in a different direction than the surrounding text. For example, if the surrounding text is in English and reads from left to right, the <bdo> tag can be used to display a single word or phrase in a different direction, such as Arabic, which is read from right to left.
Here’s an example of how the <bdo> tag might be used to display the word “hello”:
<!DOCTYPE html>
<html>
<body>
<!--visible-start-->
<p>English: <bdo dir="rtl">hello</bdo></p>
<!--visible-end-->
</body>
</html>In this example, the dir attribute is set to “rtl” to indicate that the text should be displayed right-to-left, and the word “hello” is enclosed within the <bdo> tags.
Note that the <bdo> tag should be used with caution, as it can affect the overall layout and readability of the document. It is generally recommended to use CSS to control the layout and directionality of text, rather than relying on the <bdo> tag.