...

Web Technologies - HTML

Back to Course

Lesson Description


Lession - #143 HTML Phrase Tags


Emphasized Text

Everything that comes within the <em>...</em> element is highlighted text..
Example

<!DOCTYPE html>
<html>

   <head>
      <title>Emphasized Text Example</title>
   </head>
    
   <body>
      <p>The following word uses an <em>emphasized</em> typeface.</p>
   </body>
    
</html>

Marked Text

Anything within the <mark>...</mark> element is marked with yellow ink and presented as such.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>Marked Text Example</title>
   </head>
    
   <body>
      <p>The following word has been <mark>marked</mark> with yellow</p>
   </body>
    
</html>

Strong Text

Everything within the<strong><strong> element is treated as most essential text.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>Strong Text Example</title>
   </head>
    
   <body>
      <p>The following word uses a <strong><strong>strong</strong></strong> typeface.</p>
   </body>
    
</html>

Text Abbreviation

Abbreviating text is achieved by putting it inside opening and closing tags, using the<abbr>and <abbr> tags respectively. When used, the title attribute must contain this full description only.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>Text Abbreviation</title>
   </head>
    
   <body>
      <p>My best friend's name is  <abbr title = "Abhishek">Abhy</abbr>.</p>
   </body>
    
</html>

Acronym Element

At present, browsers do not change the appearance of the content of the *acronym> element.
It is possible to use this element to indicate the text between <acronym> </acronym> tags is an acronym.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>Acronym Example</title>
   </head>
    
   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>
    
</html>

Text Direction

An element beginning with <bdo>...*/bdo> is specified to override the current direction of the text.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>Text Direction Example</title>
   </head>

   <body>
      <p>This text will go left to right.</p>
      <p><bdo dir = "rtl">This text will go right to left.</bdo></p>
   </body>

</html>






Special Terms

The <dfn>...</dfn> element (or HTML Definition Element>
specifies that you are introducing a new term. It is used in the same way that italicised words are used in the middle of a paragraph.
Typically, the dfn> element is used the first time a key term is introduced. Most modern browsers display the content of a dfn> element in italics.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>Special Terms Example</title>
   </head>
    
   <body>
      <p>The following word is a <dfn>special</dfn> term.</p>
   </body>
    
</html>




Quoting Text

When you want to quote something from another source, put it between <blockquote>...</blockquote> tags.
Text within a <blockquote>> element is typically indented from the left and right edges of the surrounding text and may use an italicised font.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>
    
   <body>
      <p>The following description of XHTML is taken from the W3C Web site:</p>

      <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on 
         from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
   </body>
    
</html>





Short Quotations

When you want to insert a double quote within a sentence, use the ... element.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>Double Quote Example</title>
   </head>
    
   <body>
      <p>Amit is in Spain, <q>I think I am wrong</q>.</p>
   </body>
    
</html>




Text Citations

When quoting a text, you can indicate the source by inserting it between an opening cite> tag and a closing </cite>> tag.
The content of the cite> element is rendered in italicised text by default, as would be expected in a print publication.
Example



<!DOCTYPE html>
<html>
   
   <head>
      <title>Citations Example</title>
   </head>
   
   <body>
      <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
   </body>
   
</html>

Computer Code

Any programming code that should appear on a Web page should be enclosed in <code>...</code> tags. The content of the code> element is typically presented in a monospaced font, similar to the code in most programming books.
Example


<!DOCTYPE html>
<html>
   
   <head>
      <title>Computer Code Example</title>
   </head>
   
   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>
   
</html>





Keyboard Text

The <kbd>...<kbd> element can be used in computers to indicate what should be typed in when you are asking your readers to enter some text.
Example

<!DOCTYPE html>
<html>
   
   <head>
      <title>Keyboard Text Example</title>
   </head>
   
   <body>
      <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
   </body>
   
</html>



Programming Variables

To indicate that the content of a given element is variable, it is usually used with the <pre> and <code> elements.
Example


<!DOCTYPE html>
<html>
   
   <head>
      <title>Variable Text Example</title>
   </head>
   
   <body>
      <p><code>document.write("<var>user-name</var>">
</code></p> </body> </html>

Program Output

Again, it is mainly used when documenting programming or coding concepts. The <samp>...</samp> element indicates sample output from a program, and script, etc.
Example

<!DOCTYPE html>
<html>
   
   <head>
      <title>Program Output Example</title>
   </head>
   
   <body>
      <p>Result produced by the program is <samp>Hello World!</samp></p>
   </body>
   
</html>



Address Text

Any address can be contained in the <address>...</address> element.
Example


<!DOCTYPE html>
<html>
   
   <head>
      <title>Address Example</title>
   </head>
   
   <body>
      <address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
   </body>
   
</html>