Hello dear readers! welcome back to another section of my tutorial on Html. In this tutorial guide, am going to be discussing about the Html phrase tags. I hope you guys have learnt alot from my previous tutorials? Without wasting much time lets get started.
The phrase tags are meant for specific purposes, although they are displayed in similar way as other basic tags like <b>, <i>, <pre> and <tt> you have seen in the previous tutorials, this tutorial guide will talk about the important phrase tags so lets start by taking them one after the other.
Emphasized Text
When working on a HTML project, any thing that comes in between the <em>....</em> element will be displayed as an emphasized text, let take a look at a simple example below.
Example
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text</title>
</head>
<body>
<p>the following is an <em>emphasized</em>text example</p>
</body>
</html>
<html>
<head>
<title>Emphasized Text</title>
</head>
<body>
<p>the following is an <em>emphasized</em>text example</p>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding.
Marked Text
when working with Html, any thing that appears within the <mark>....</mark> element is displayed as marked with yellow ink. Below is a simple example.
Example
<!DOCTYPE html>
<html>
<head>
<title>Marked Text</title>
</head>
<body>
<p>the following words has a <marked>marked</marked>text with yellow ink</p>
</body>
</html>
<html>
<head>
<title>Marked Text</title>
</head>
<body>
<p>the following words has a <marked>marked</marked>text with yellow ink</p>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box, they will be attended to.
Strong Text
when working with Html, any thing that falls within the <strong>......</strong> element is displayed as bold or important text. An example goes below.
Example
<!DOCTYPE html>
<html>
<head>
<title>Strong Text</title>
</head>
<body>
<p>the following words has a <strong>Strong</strong>text</p>
</body>
</html>
<html>
<head>
<title>Strong Text</title>
</head>
<body>
<p>the following words has a <strong>Strong</strong>text</p>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box, they will be attended to.
Text Abbreviation
when working with Html, you can abbreviate a text by placing the text inside the opening <abbr> and the closing </abbr> tags. Note - the title attribute must contain this full description and nothing else, example goes below.
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation Example</title>
</head>
<body>
<p>The name of my class teacher is <abbr title="kennedy">Kenny</abbr></p>
</body>
</html>
<html>
<head>
<title>Text Abbreviation Example</title>
</head>
<body>
<p>The name of my class teacher is <abbr title="kennedy">Kenny</abbr></p>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding. You can drop your questions via the comment box, they will be attended to.
Acronym Element
The <acronym> element lets one to indicate that the text within the <acronym>....</acronym> element is an acronym.
Currently the major browsers do not change the appearance of the content of an <acronym> element.
Example
<!DOCTYPE html>
<html>
<head>
<title>Acronym Element</title>
</head>
<body>
<p>This tutorial covers marking up text in <acronym>HTML</acronym>.</p>
</body>
</html>
<html>
<head>
<title>Acronym Element</title>
</head>
<body>
<p>This tutorial covers marking up text in <acronym>HTML</acronym>.</p>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding. You can drop your questions via the comment box, they will be attended to.
Text Direction
The <bdo>.........</bdo> element stands for Bi-Directional Override and it is used to override the current text direction, an example goes below.
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right which is the default direction</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body>
</html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right which is the default direction</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding. Your can also drop your questions via the comment box, they will be attended to.
Special Terms
The Html <dfn>....</dfn> element allows you to specify that you are introducing a special term into the Html document. Its usage is quite similar to italic word in the midst of a paragraph.
Typically, you use a <dfn> element the first time you introduce a key term, most recent browsers render the content of <dfn> element in an italic font.
Example
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following is a <dfn>Special</dfn>term.</p>
</body>
</html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following is a <dfn>Special</dfn>term.</p>
</body>
</html>
Feel free to try the above code out using your text editor for better understanding. You can also drop your questions via the comment box, they will be attended to.
Quoting Text
Whenever you working with Html and you want to quote a passage from another source, you should put it inside the <blockquote>.....</blockquote> element.
The Html text that is inside the <blockquote> element is usually indented from left to right edges of the surrounding text, and some times uses and italiced font, here is an example below.
Example
<!DOCTYPE html>
<html>
<head>
<title>Quoting Text Example</title>
</head>
<body>
<p>The following description of XHTM is taken from the w3c school website:</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>
<html>
<head>
<title>Quoting Text Example</title>
</head>
<body>
<p>The following description of XHTM is taken from the w3c school website:</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>
Feel free to try the above code out using your text editor for a better understanding.
Thats it for this tutorial, the rest of the Html phrase tags is going to be treated in the next tutorial, bye for now and goodluck!!!