Website Design with HTML | Phrase Elements

The following elements are not used as widely as the elements you have met so far. As the element names
indicate, they are designed to describe their content:

• <em>and <strong>for emphasis
• <blockquote>, <cite>, and <q>for quotations and citations
• <abbr>, <acronym>, and <dfn>for abbreviations, acronyms, and key terms
• <code>, <kbd>, <var>, and <samp>for computer code and information
• <address>for addresses

<em>and <strong>for emphasis:

The <strong>element is intended to show strong emphasis for its content—stronger emphasis than the <em>element. As with the <em>element, the <strong>element should be used only when you want to add strong emphasis to part of a document. Rather than being rendered in an italic font, most visual browsers display the strong emphasis in a bold font.
Try this Example:

<p><em>Always</em> look at burning magnesium through protective colored glass as it <strong>can cause blindness</strong>.</p>

The <abbr> Element Is for Abbreviations:

You can indicate when you are using an abbreviated form by placing the abbreviation between opening <abbr>and closing </abbr>tags.
For example, if you want to indicate that ECE is an abbreviation for Electronics & Communication Engineering, you can use the <abbr> element like so:

I like <abbr title="Electronics & Communication Engineering">ECE</abbr>.

The <acronym> Element Is for Acronym Use:

The <acronym>element allows you to indicate that the text between an opening <acronym>and closing </acronym>tags is an acronym.
For example, if you want to indicate that HTML was an acronym, you can use the <acronym>element like so:

This chapter covers marking up text in <acronym title="Hypertext Markup Language">HTML</acronym> 

The <dfn> Element Is for Special Terms:

The <dfn>element allows you to specify that you are introducing a special term. Its use is similar to the words that are in italics in the midst of paragraphs in this book when new key concepts are introduced.
For example, you can indicate that the term "XHTML" in the following sentence is important and should be marked as such:

This website teaches you how mark up your documents for the Web using <dfn>HTML</dfn>.

The <blockquote> Element Is for Quoting Text:

When you want to quote a passage from another source, you should use the <blockquote>element. Note that there is a separate <q>element for use with smaller quotations.
Try this Example:

<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 5, HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0. </blockquote>

The <q> Element Is for Short Quotations:

The <q>element is intended to be used when you want to add a quote within a sentence rather than as an indented block on its own:

<p>As Tom said, <q>Somebody's boring me. I think it's me</q>.</p>

The <code> Element Is for Code:

If your pages include any programming code (which is not uncommon on the Web), the following four elements will be of particular use to you. Any code to appear on a web page should be placed inside a <code>element. Here you can see an example of using the <code>element to represent an <h1>element and its content in HTML:

<p><code>&lt;h1&gt;This is a primary heading&lt;/h1&gt;</code></p>

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

If, when talking about computers, you want to tell a reader to enter some text, you can use the <kbd> element to indicate what should be typed in, as in this example:

<p>Type in the following: <kbd>This is the kbd element</kbd>.</p>

The <var> Element Is for Programming Variables:

The <var>element is another of the elements added to help programmers. It is usually used in conjunctionwith the <pre>and <code>elements to indicate that the content of that element is a variable that can be supplied by a user:

<p><code>document.write("<var>user-name</var>")</code></p>

The <samp> Element Is for a Program Output:

The <samp>element indicates sample output from a program, script, or the like. Again, it is mainly used when documenting programming concepts. For example:

<p>If everything worked you should see the result <samp>Test completed OK</samp>.</p>

The <address> Element Is for Addresses:

Many documents need to contain a mail address, and there is a special <address>element that is used to contain addresses. For example, here is the address for KUET, inside an <address>element:

<address>KUET, Khulna-920300, Bangladesh</address>