HTML Page Structure

HTML Elements
HTML Attributes


HTML Comments

In HTML, there are tags which is used to perform specific operation. It is somewhat similar to text formatting tags. There are some situation where you would like to highlight some word, add quotation, display code in different form etc. to highlight the text in web page.

HTML Phrase Tags List

The below table contains complete phrase tags list and their description which is supported by HTML version.

Tag NameHTML TagTag Description
Mark<mark>..</mark>This is used to marked the textbackground in yellow color.
Emphasis<em>..</em>This is used to emphasis the text.
Strong<strong>..</strong>This is used to give importance to the text in web page.
Text Abbreviation<abbr>..</abbr>This is used to abbreviate text in web page.
Acronym<acronym>..</acronym>This is used to heightlight text in web page.
Text Direction<bdo>..</bdo>This is used to override text direction in web page.
Quoting<blockquote>..</blockquote>This is used to quote a sentence from another text.
Short Quotations<q>..</q>This is used to add double quote within paragraph or sentence.
Text Citations<cite>..</cite>This is used to add italian effect on word or sentence within paragraph.
Computer Code<code>..</code>This is used to give programming code effect.
Keyboard Text<kbd>..</kbd>This is used to give some indication to the user to type some text in web page.
Programming Variables<var>..</var>This is used to highlight variable text in web page.
Address Text<address>..</address>This is used to highlight address text in web page.

Mark Text

This tag is used to marked the textbackground in yellow color in web page. Text in between <mark>...</mark> tags will be highlighted in yellow color.

Example

<p>The appearance of word in <mark>marked</mark>.</p>

Emphasis Text

This tag is used to emphasis the text in web page. Text in between <em>...</em> tags will be emphasized the text.

Example

<p>The appearance of word is <em>emphasized</em>.</p>

Strong Text

This tag is used to give importance to the text in web page. Text in between <strong>...</strong> tags will display text in bold.

Example

<p>The appearance of word is <strong>strong</strong>.</p>

Abbreviation

This tag is used to abbreviate text in web page. Text in between <abbr>...</abbr> tags will display abbreviated text.

Example

<p>The appearance of word is <abbr>abbreviated</abbr>.</p>

Acronym

This tag is used to heightlight text in web page but most browser dosen's show any effect. Text in between <acronym>...</acronym> tags will display acronym text.

Example

<p>The appearance of word is <acronym>acronym</acronym>.</p>

Text Direction

This tag is used to override text direction in web page, this tag stands for Bi-Directional Override. Text in between <bdo>...</bdo> tags will display overrided text direction.

Example

<p><bdo dir="rtl">This text will display from right to left.</bdo>.</p>

Quoting

This tag is used to quote a sentence from another text in web page. Text in between <blockquote>...</blockquote> tags will display overrided text direction.

Example

<p>This is un-quoted text displaying here.</p>
<blockquote>The is quoted text and displaying in center of page.</blockquote>

Short Quotations

This tag is used to add double quote within paragraph or sentence in web page. Text in between <q>...</q> tags will display within double quote.

Example

<p>The example have some <q>short quotations</q> words.</p>

Text Citations

This tag is used to add italian effect on word or sentence within paragraph or sentence in web page. Text in between <cite>...</cite> tags will display italic effect.

Example

<p>This tag give some <cite>italic</cite> effect to word or sentence.</p>

Computer Code

This tag is used to give programming code effect to the word or sentence within paragraph in web page. Text in between <code>...</code> tags will display italic effect.

Example

<p>This tag give programming code effect <code>var $counter = 0; </code>.</p>

Keyboard Text

This tag is used to give some indication to the user to type some text in web page. Text in between <kbd>...</kbd> tags will indicat text to user.

Example

<p>This is some text. <kbd>this is indicated text</kbd>.</p>

Programming Variables

This tag is highlight variable text in web page.This is used in conjunction with the <pre< and <code< elements. Text in between <var>...</var> tags will indicat text as variable.

Example

<code>document.write("<var>customer_id</var>")</code>

Address Text

This tag is display highlight address text in web page. Text in between <address>...</address> tags will display address text in sentence.

Example

<address>0021 Witmer Road. Niagara Falls, NY 321</address>

Complete Example

<!DOCTYPE html>
<html>
<TITLE>HTML Phrase Tag Example Code</TITLE>
<HEAD>
<!-- www.techstrikers.com -->
</HEAD>
<body>

<p>Showing Mark Tag</p>
<p>The appearance of word in <mark>marked</mark>.</p>
<hr>

<p>Showing Emphasis Tag</p>
<p>The appearance of word is <em>emphasized</em>.</p>
<hr>

<p>Showing Strong Tag</p>
<p>The appearance of word is <strong>strong</strong>.</p>
<hr>

<p>Showing Abbreviation Tag</p>
<p>The appearance of word is <abbr>abbreviated</abbr>.</p>
<hr>

<p>Showing Acronym Tag</p>
<p>The appearance of word is <acronym>acronym</acronym>.</p>
<hr>

<p>Showing Text Direction Tag</p>
<p><bdo dir="rtl">This text will display from right to left.</bdo>.</p>
<hr>

<p>Showing Quoting Tag</p>
<p>This is un-quoted text displaying here.</p>
<blockquote>The is quoted text and displaying in center of page.</blockquote>
<hr>

<p>Showing Short Quotations Tag</p>
<p>The example have some <q>short quotations</q> words.</p>
<hr>

<p>Showing Text Citations Tag</p>
<p>This tag give some <cite>italic</cite> effect to word or sentence.</p>
<hr>

<p>Showing Computer Code Tag</p>
<p>This tag give programming code effect <code>var $counter = 0;</code>.</p>
<hr>

<p>Showing Keyboard Text Tag</p>
<p>This is some text. <kbd>this is indicated text</kbd>.</p>
<hr>

<p>Showing Programming Variables Tag</p>
<code>document.write("<var>customer_id</var>")</code>
<hr>

<p>Showing Address Text Tag</p>
<address>0021 Witmer Road. Niagara Falls, NY 321</address>
<hr>

</body>
</html>
See Live Example