Table of Contents

    HTML Phrase Elements: Usage and Examples

    Rumman Ansari July 05, 2024 7,841 views
    HTML Phrase Elements: Usage and Examples

    In the previous tutorial we saw some Presentational Elements <b> , <i> , <pre> , and <tt> that you have just read about, but the following elements are not just for presentational purposes; they also describe something about their content. For example, the words written in an <em> element will look just like the words in an <i> element, but the < em> element is supposed to indicate the addition of emphasis.

    This section covers the following elements:

    1. <em>  for emphasis
    2. <strong> for emphasis
    3. < blockquote> for quotations
    4. <cite> for citations
    5. <q>  for quotations
    6. <abbr> for abbreviations
    7. <acronym> for acronyms
    8. <dfn> for key terms
    9. <code> for computer code and information
    10. <kbd> Keyboard Text
    11. <var> for Programming Variables
    12. <samp> for Program Output
    13. <address> for addresses

    Emphasized Text

    Anything that appears within <em>...<em> element is displayed as emphasized 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>

    Live Preview

    Strong Text: The <strong> Element Adds Strong Emphasis

    The <strong> element is intended to show strong emphasis for its content — stronger emphasis than the <em> element.

    Example

    
<!DOCTYPE html>
<html>

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

    Live Preview

    The <address> Element Is for Addresses

    The <address>...</address> element is used to contain any address.

    Example

    
<!DOCTYPE html>
<html>
   
   <head>
      <title>Address Example</title>
   </head>
   
   <body>
      <address>Biswa Bangla Sarani, Kolkata-136 -  West Bengla</address>
   </body>
   
</html>

    Live Preview

    The <abbr> Element Is for Abbreviations

    Consider using a title attribute whose value is the full version of the abbreviations. For example, if you want to indicate that Bev is an abbreviation for Beverly, you can use the < abbr > element like so:

    Example

    
<!DOCTYPE html>
<html>
   
   <head>
      <title>abbr Example</title>
   </head>
   
   <body>
       <p><abbr title = " Asia Pacific Economic Cooperation">APEC</abbr> has how many member countries?</p>  
   </body>
   
</html>

    Live Preview

    The <acronym> Element Is for Acronym Use

    The <acronym> element allows you to indicate that the text between <acronym> and </acronym> tags is an acronym.

    At present, the major browsers do not change the appearance of the content of the <acronym> element.

    Example

    
<!DOCTYPE html>
<html>
   
   <head>
      <title>acronym Example</title>
   </head>
   
   <body>
       This chapter covers marking up text in <acronym title="Hypertext Markup Language"> HTML </acronym>.  
   </body>
   
</html>

    Live Preview

    The <dfn> Element Is for Special Terms

    The <dfn> element allows us to specify that we are introducing a special term.

    Typically, you would use the <dfn> element the first time you introduce a key term. Most recent browsers render the content of a <dfn> element in an italic font.

    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>

    Live Preview

    The <blockquote> Element Is for Quoting Text

    When you want to quote a passage from another source, you should put it in between <blockquote>...</blockquote> tags.

    Example

    
<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>
	
   <body>
      <p>Quote:</p>

      <blockquote>I used to be a hopeless romantic - I fell in love with everyone I went out with.</blockquote>
   </body>
	
</html>

    Live Preview

    <cite> Attribute with the <blockquote> Element

    Example

      
<blockquote cite="/library/java/">Learn java Programming Language</blockquote >

    Live Preview

    The <q> Element Is for Short Quotations

    The <q>...</q> element is used when you want to add a double quote within a sentence.

    Example

    
<!DOCTYPE html>
<html>

   <head>
      <title>Double Quote Example</title>
   </head>
	
   <body>
     <p> As Dylan Thomas said, <q> Somebody's boring me. I think it's me </q> . </p> 
   </body>
	
</html>

    Live Preview

    The <cite> Element Is for Citations

    The HTML <cite> element defines the title of a work.

    Browsers usually display <cite> elements in italic.

    If you are quoting a text, you can indicate the source by placing it between an opening </cite> tag and closing </cite> tag. As you would expect in a print publication, the content of the </cite> element is rendered in italicized text by default

    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>

    Live Preview

    Computer Code

    Note that when trying to display code on a web page (for example, if you were creating a page about web programming), and you wanted to include angled brackets, you cannot just use the opening and closing angle brackets inside these elements, because the browser could mistake these characters for actual markup. Instead you should use &lt ; instead of the left - angle bracket ( < ), and you should use &gt ; instead of the right - angle bracket ( > ).

    The <code> Element Is for Code

    Any programming code to appear on a Web page should be placed inside <code>...</code> tags. Usually the content of the <code> element is presented in a monospaced font, just like 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>
	  <p> <code> <h1 >This is a primary heading </h1 > </code> </p> 
	  
   </body>
   
</html>

    Live Preview

    The <kbd> Element Is for Text Typed on a Keyboard

    If, we are working with computers, we want to enter some text, we can use the <kbd> element to indicate what should be typed in, as in this example

    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>
	  
	  <p> To force quit an application in Windows, hold down the <kbd> ctrl </kbd> ,
<kbd> alt </kbd> and <kbd> delete </kbd> keys together. </p>
   </body>
   
</html>

    The content of a <kbd> element is usually represented in a monospaced font, rather like the content of the <code> element.

    Live Preview

    The <var> Element Is for Programming Variables

    The <var> element is another of the elements added to help programmers. This element is usually used in conjunction with the <pre> and <code> elements to indicate that the content of that element is a variable.

    Example

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

    Live Preview

    The <samp> Element Is for a Program Output

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

    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>

    Live Preview

    Related Questions

    Question 1
    Why are there both numerical and named character entity values?