The phrase tags are added for a particular representation and can be viewed similar as other tags. Let start learning with the different tags with examples. Marked text The <mark>...</mark> tag is useful in displaying the element in yellow color. All the other content appear normal. The tag is used for highlighting the text for the user. Example: Code: <!DOCTYPE html> <html> <head> <title>Marked tags</title> </head> <body> <p>The most <mark>important</mark> text is highlighted</p> </body> </html> Output: Emphasized text The text added inside the <em>...</em> tag is emphasized in the display. Example: Code: <!DOCTYPE html> <html> <head> <title>Emphasized text</title> </head> <body> <p>The most <em>important</em> text is emphasized</p> </body> </html> Output: Strong text The <strong>...</strong> tag is used for displaying the important text in the document. Example: Code: <!DOCTYPE html> <html> <head> <title>Strong text</title> </head> <body> <p>The <strong>difficulty</strong> level is high</p> </body> </html> Output: Acronym element The <acronym>...</acronym> tag is useful for highlighting the text in the document. The text added inside the tags is displayed as it appears. Example: Code: <!DOCTYPE html> <html> <head> <title>Acronym</title> </head> <body> <p>The <acronym>text</acronym> is shown</p> </body> </html> Output: Text abbreviation The <abbr>...</abbr> tag is used for displaying the abbreviated text in the document. The complete description of the tag must be added inside the title attribute. Example: Code: <!DOCTYPE html> <html> <head> <title>Abbreviation</title> </head> <body> <p>He completed degree of <abbr title="Master of Business Administration">M.B.A</p> </body> </html> Output: Special terms The <dfn>...</dfn> element helps user to define a specific term. The display of text is in italic format. Example: Code: <!DOCTYPE html> <html> <head> <title>Special Terms</title> </head> <body> <p>The <dfn>specific</dfn> keyword is used</p> </body> </html> Output: Text direction Using the <bdo>...</bdo> tag user can override the current direction of the text. Example: Code: <!DOCTYPE html> <html> <head> <title>Text Direction</title> </head> <body> <p>Left to right</p> <p><bdo dir="rtl">The text moves from right to left direction</p> </body> </html> Output: Quoting text The <blockquote>...</blockquote> tag is used for quoting a passage from a different source. The text added inside the element is indented from left to right with the edges of text surrounding it. Example: Code: <!DOCTYPE html> <html> <head> <title>Quote text</title> </head> <body> <p>The text to be added inside the document</p> <blockquote>The data added inside the tag defines that the element leaves edges. It is displayed as a block of code</blockquote> </body> </html> Output: Short quotations Using the <q>...</q> tag, user can add short quotations to the code. A double quote is added to the text in the specific sentence. Example: Code: <!DOCTYPE html> <html> <head> <title>Short quotes</title> </head> <body> <p>A famous phrase, <q>An apple a day keeps doctor away<q>.</p> </body> </html> Output: Computer code The <code>...</code> tags contain the programming code that is displayed on the web page. It is displayed in the monospaced font style. Example: Code: <!DOCTYPE html> <html> <head> <title>Computer codes</title> </head> <body> <p>Simple value <code>Added in the coding</code> and can be viewed</p> </body> </html> Output: Text citations The text to be placed inside the source can be quoted using the <cite>...</cite> tags. The data present in the <cite> tag is represented in italic format. Example: Code: <!DOCTYPE html> <html> <head> <title>Text citations</title> </head> <body> <p>The examples can be accessed from any <cite>E-Learning website</cite></p> </body> </html> Output: Programming variables and output The elements present in the <pre> or <code> tags are used for defining they are variables. Example: Code: <!DOCTYPE html> <html> <head> <title>Variables</title> </head> <body> <p><code>document.write("<var>emp-id</var>")</code></p> </body> </html> Output: Keyboard text The <kbd>...</kbd> tags are used for defining the keyboard text. It indicates the user with the content to be added inside the tags. Example: Code: <!DOCTYPE html> <html> <head> <title>Variables</title> </head> <body> <p>New Text<kbd>Text to be added</kbd>New Text</p> </body> </html> Output: Address text Any address can be easily defined inside the <address>...</address> element. Example: Code: <!DOCTYPE html> <html> <head> <title>Address Text</title> </head> <body> <address>184, St. Georges Court - Glasgow</address> </body> </html> Output: