HTML text phrases (Strong, Acronym, Quotation, block quote, Mark, Computer code, keyboard text etc.)

Strong, Acronym, Quotation, block quote, Mark, Computer code, keyboard text and programming variable

In HTML, phrase tag is used to indicate the structural meaning of a block of text. For example, abbr tag indicates that the phrase contained the abbreviation word.

In HTML there are predefined tags which are utilised to perform particular operation which is similar like text format tags. There are some circumstances to highlight the words, adding quotations, showing code in various structure and so on to highlight the content in web page. This can be done with the help of phrase tags.

Following are few Phrase tags.

Tag nameDescription
StrongUsed to give importance to the text.
AcronymUsed to highlight the text in a web page.
QuotationsUsed quote a sentence.
block QuoteUsed to quote a block of sentance
MarkUsed to mark the background of a sentence
Computer CodeUsed to give a programming code effect
Keyboard TextUsed to indicate the text entered by the user
Programming VariableUsed to highlight the variable text in a web page

Strong text tag

Any text that appears within <strong>…</strong> element is displayed as important text. This tag makes text to look bolg.

<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>HTML is a beautiful <strong>language</strong> to work with.</p>
</body>
</html>

It results as : The following word uses a strong typeface.

Acronym tag

Acronym tag is used to display the highlighted text. The tag highlights the text present in between <acronym>…<acronym> tags, but some browsers shows normal text only. The <acronym> element allows you to indicate that the text between <acronym> and </acronym> tags is an acronym.

<!DOCTYPE html>
<html>
<head>
      <title>Acronym Example</title>
</head>
<body>
<p>HTML is a beautiful <acronym>language</acronym> to work with.</p>
</body>
</html>

Quotation

User can get the quotation marks to the simple text by using the <q> element which gives quotation marks around the <q> element. The code below demonstrates the use of quotations tags.

<!DOCTYPE html>
<html>
<head>
      <title>Double Quote Example</title>
</head>
<body>
<p>It is raining outside<q>We should go outside with umbrella</q>.</p>
</body>
</html>

It results as: It is raining outside. “We should go outside with umbrella”

block quote

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 italicised font. <blockquote> is used for a block of sentences i.e for long quotations and are usually indent by the browsers. The code below demonstrates the <blockquote> elements.

<!DOCTYPE html>
<html>
<head>
      <title>Blockquote Example</title>
</head>
<body>
<p>HTML is Hypertext markup language</p>
<blockquote>It is used to develop web pages. It is easy to learn and 
widely used all over world.</blockquote>
</body>
</html>

Results as: HTML is Hypertext markup language. It is used to develop web pages. It is easy to learn and widely used all over world.

Mark

Anything that appears with-in <mark>…</mark> element, is displayed as marked with yellow ink.

<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>One word of paragraph is <mark>marked</mark> with yellow</p>
</body>
</html>

To insert computer code

If we want to show any programming code to appear on a Web page then it 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.

<!DOCTYPE html>
<html>
<head>
      <title>Computer Code Example</title>
</head>
<body>
<p>Inserting code on web page<code>The coding part will be placed here</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.

<!DOCTYPE html>
<html>
<head>
      <title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text. </p>
</body>
</html>

Programming variable

This element is usually used in conjunction with the <pre> and <code> elements to indicate that the content of that element is a variable.

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

Results as: document.write(“user-name“)