HTML Phrase Formatting

The phrase tags have been designed for specific purposes. This chapter will take you through all the important phrase tags, so let's start seeing them one by one.

Text Abbreviation

You can abbreviate a text by putting it inside opening <abbr> and closing </abbr> tags. If present, the title attribute must contain this full description and nothing else.

Example

<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>You can easily find me at  <abbr title="Facebook">FB</abbr>.</p>
</body>
</html>

 

Text Direction

The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to override the current text direction.

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) allows you to specify that you are introducing a special term. You may 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>HTML Special Terms</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>

Quoting Text

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

Text inside a <blockquote> element is usually indented from the left and right edges of the surrounding text, and sometimes uses an italicized font.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Blockquote</title>
</head>
<body>
<p>The following text is taken from einstein inspirational quotes :</p>

<blockquote>Imagination is more important than knowledge.</blockquote>
</body>
</html>

Text Citations

If you are quoting a text, you can indicate the source 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>HTML Citations</title>
</head>
<body>
<p>Imagination is more important than knowledge. <cite>Albert Einstein</cite>.</p>
</body>
</html>

 

 

Computer Code

Any programming code to appear on a Web page should be placed inside <code>...</code> tags. 

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Computer Code </title>
</head>
<body>
<p>Regular text. <code> <?php echo 'Hello World'; ?> .</code> </p>
</body>
</html>

Keyboard Text

When you are talking about computers, if you want to tell a reader to enter some text, you can use the <kbd>...</kbd> element to indicate what should be typed in, as in this example.

Example

<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Format</title>
</head>
<body>
<p>This is Regular Text. Now Press <kbd>CTRL</kbd> + <kbd>C</kbd>.</p>
</body>
</html>

Programming Variables

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</title>
</head>
<body>
<p>This is how you write programming variable text <code><pre>var x = 10; var name='w3clan';</pre></code></p>
</body>
</html>

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>HTML Program Output</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>

Address Text

The <address>...</address> element is used to write any address with markup tags.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Address Markup tag</title>
</head>
<body>
<address>House 65, Kailash Colony, East of Kailash - New Delhi</address>
</body>
</html>

 


Loading ...

Related Results :

  1. HTML Phrase Formatting
Note :
  • Related Posts are generally User Blog posts.
  • or Other tutorials from other networks of w3clan.com.
  • Any registered user can create related posts based on search term tags.

About the Author