HTML Phrase Elements

Rumman Ansari   Software Engineer   2023-03-27   7423 Share
☰ Table of Contents

Table of Content:

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> &lt;h1 &gt;This is a primary heading &lt;/h1 &gt; </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

‹ Previous -   Presentational Elements
Next › -   HTML Comments