To start practicing this, first understand what exactly it is: HTML5: Understanding Elements.
Continuation of Understanding Elements
Citations, Quotations, and Definitions:
How to Use Definitions, Quotations, and Citations: To show content in an HTML format that differs from the standard text, use citations. Normally, the text that is inserted into the citation element is shown in italics. Quoting an author’s words or comments usually requires a citation. An opening <CITE> tag and a closing </CITE> tag define the citation element.
To cite a specific passage inside quotation marks, use the quotation tag. You should be aware that when you quote someone else’s words in your writing, you must enclose the quote marks. The quotation tag starts with an opening <Q> tag and ends with a closing </Q> tag.
A list of terms definitions can be found in the definition element. The following three tags make up the definition tag:
- DL: Stands for definition list, which is used to indicate how many definitions there are.
- DT: Defines terms within a definition.
- DD: Indicates the terms’ definitions.
The attributes for the definition, quotation, and citation tags are listed in the table below:
| Attribute | Purpose |
| class | specifies the name of the element |
| dir | specifies the direction of the paragraph written from left to right or from right to left |
| id | specifies the value of the id |
| lang | specifies the language in which the paragraph is written |
| style | specifies the inline style of the element |
| title | provides extra information about the element |
| Onclick | acts on a mouse click |
| Ondblclick | acts on a double-click |
| Onmousedown | acts by pressing a mouse button |
| Onmousemove | acts on the movement of the mouse pointer |
| Onmouseout | performs an action when the mouse pointer moves out of the element |
| Onmouseover | performs an action when the mouse pointer moves over the element |
| Onmouseup | performs an action when the mouse button is released |
| Onkeydown | acts on pressing a key |
| Onkeypress | performs an action when the mouse is clicked and released |
| Onkeyup | performs an action when a key id released |
Working with Citation, Quotation and Definition
HTML includes a variety of components that allow you to display text in the form of citations, quotations, and definitions. To further understand how to use the citation element, let us construct an HTML file called CQD.html file. The code for this file is shown below:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Citation</TITLE>
</HEAD>
<BODY>
<P>In HTML syntax creation, alpha-numeric characters
like '<', '>', and '&' are employed. They
are known as <CITE> Special Characters </CITE>. </P>.
</BODY>
</HTML>
Figure 1 – Displaying the Output of CQD.html file
To further understand how to utilize the Quotation element, create an HTML file called CQD1.html. The code for this preceding file is shown below:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Citation</TITLE>
</HEAD>
<BODY>
<P>In HTML syntax creation, alpha-numeric characters
like '<', '>', and '&' are employed. They
are known as <Q> Special Characters </Q>. </P>.
</BODY>
</HTML>
Figure 2 – Displaying the Output of CQD1.html file
To further understand how to utilize the Definition element, create an HTML file called CQD2.html. The code for this preceding file is shown below:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Definition</TITLE>
</HEAD>
<BODY>
<DL>
<DT>Herbs</DT>
<DD>Herbs are short plants with soft, green, fragile stems that lack woody structures.</DD>
<DT>Shrubs</DT>
<DD>Shrubs are medium-sized woody plants that grow taller than herbs but shorter than trees.</DD>
<DT>Trees</DT>
<DD>Trees are big and tall plants. They have very thick, woody and hard stems called the trunk.</DD>
</DL>
</BODY>
</HTML>
Figure 3 – Displaying the Output of CQD2.html file