HTML | Quotations
The Quotation elements in HTML are used to insert quoted texts in a web page, that is portion of texts different from the normal texts in the web page. Below are some of the most used quotation elements of HTML:
- <q> element: The <q> element is used to set a set of text inside the quotation marks. It has both opening and closing tags.
Example:
HTML
<!DOCTYPE html><html><head> <title>Quotations</title></head><body> <h3>GeeksforGeeks</h3> <p>The quick brown fox jumps over the lazy dog<br></p> <!--Inside quotes--> <p><q>The quick brown fox jumps over the lazy dog</q></p></body></html> |
Output:
2. <blockquote> element: The <blockquote> element is also used for quotations in a different way. Instead of putting the text in quotes, it adds space before the start of the sentence, with this tag we can also indent the start of the new paragraph. It has both opening and closing tags.
Example:
HTML
<!DOCTYPE html><html><head> <title>Blockquote</title></head><body> <h3>GeeksforGeeks</h3> <p>The quick brown fox jumps over the lazy dog<br></p> <!--Inside blockquotes--> <p><blockquote>The quick brown fox jumpsover the lazy dog</blockquote></p></body></html> |
Output:
3. <address> element: Using the <address> element, we can define an address in a webpage and the text put inside the address tag will be emphasized. Usually line break is added before and after the address tag and content inside this tag is generally renders in italic format. It helps screen reader also It has both opening and closing tags.
Example:
HTML
<!DOCTYPE html><html><head> <title>Address</title></head><body> <h3>GeeksforGeeks</h3> <address> <p>Address:<br> 710-B, Advant Navis Business Park,<br> Sector-142, Noida Uttar Pradesh – 201305</p> </address></body></html> |
Output:
4. <abbr> element: The <abbr> element is used to define a text as an acronym or abbreviations. The title attribute can be used to show the full version of the abbreviation/acronym when you hover the mouse over the <abbr> element. It has both opening and closing tags. This is useful for browsers and search engines.
Example:
HTML
<!DOCTYPE html><html><head> <title>Abbreviations</title></head><body> <h3>GeeksforGeeks</h3> <!--Here the marked text is the acronym--> <p>Welcome to <abbr title="GeeksforGeeks">GfG</abbr></p></body></html> |
Output:
5. <bdo> element: The <bdo> element is used to define a bidirectional override which means that, the text written from right to left or left to right. It has both opening and closing tags. It is used to over-ride the current text direction. It takes an attribute “rtl” to display the text from right to left.
Example:
HTML
<!DOCTYPE html><html><head> <title>Bidirectional</title></head><body> <h3>GeeksforGeeks</h3> <!--Normal text--> <p>The quick brown fox jumps over the lazy dog<br></p> <!--Inside <bdo> tag--> <p><bdo dir="rtl">The quick brown fox jumps over the lazy dog</bdo></p></body></html> |
Output:
6. <cite> element: This element is used to define a title of a work and emphasizes a text.
Example:
HTML
<!DOCTYPE html><html><head> <title>Cite</title></head><body> <h3>GeeksforGeeks</h3> <!--The title is kept in cite tag--> <p>The <cite>GeeksforGeeks</cite> is the best site to<br> to search for articles and practice problems.</p></body></html> |
Output:
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
Please Login to comment...