html phrase tags

7/02/2021

Hacker

The HTML phrase tags are special purpose tags, which defines the structural meaning of a block of text or semantics of text.

phrase tag indicates that a block of text has structural meaning.

Phrase tags are used for special purpose like to display text in the middle of the paragraph.

list of HTML phrase tags

HTML supports various phrase tags. Following is the list of html phrase tags, some of which we have already discussed in our HTML formatting chapter.

Abbreviation tag : <abbr>
Acronym tag: <acronym>
Marked tag:
Strong tag:
Emphasized tag :
Definition tag: <dfn>
Quoting tag: <blockquote>
Short quote tag : <q>
<code> and <pre>
Keyboard tag: <kbd>
Address tag: <address>
Text Direction: <bdo>
Text Citations: <cite>
Program Output: <samp>
variable tag: <var>

Abbreviation tag

<abbr> tag is used for text abbreviation.

The content written between <abbr> and </abbr> tag will show dots in text bottom on browser.

This tag is used to shorten the text. To collapse text, type text between the <abbr> and </abbr> tags.

This is useful when you want to shorten a word or phrase and give extra full information to the visitors in short.

Example

<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
This site is <abbr title = "W3Code Designer">W3C Designer</abbr>.
</body>
</html>

This will produce the following result −

Output

This site is W3C Designer.

Acronym tag

acronym term is used for acronym tag.

The <abbreviation> tag is not supported in HTML5. <acronym> tag used to define an acronym. An acronym that is used to pronounce another word.

Creating acronyms will provide useful information to browsers, translation systems, and search engines. The title attribute will display the full version of the acronym when the mouse is hovered over it.

<abbr> is a replacement for <abbreviation> in HTML5.

Its output is same as abbreviation tag (<abbr>) Because this is older of abbreviation tag.

Syntax -

Example -

<!DOCTYPE html>
<html>
<head>
<title> acronym example</title>
</head>
<body>
<acronym title="TutorialsCampus">TC</acronym> is a best online library in the world
</body>
</html>

Output -

w3cdesigner is a best Computer Programming Platform in the world

Marked tag

tag is used for marked tag. The tag was introduced in HTML 5. Marked tag is used to display the text as highlighted text in html.

The content written between and tag will show as yellow mark on browser.

This tag is used to highlight a particular text.

Syntax -

.. text here..

Example

<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
The following word has been marked with yellow
</body>
</html>

Output

The following word has been marked with yellow

Any text in between .. displays as highlighted text. It means text background is yellow But, its text color is black default.

Strong tag

This tag is used to display the important text of the content. The text written between and will be displayed as bolder text.

strong tag is same as bold tag

Strong Tag is used for making the appearance of a word strong or bolder for giving more importance.

The tag used to represent the strong importance, seriousness or urgency of its contents.

Syntax -

.. text here..

Example

<!DOCTYPE html>
<html>
<head>
<title>Strong text example.. </title>
</head>
<body>
This is Strong text
</body>
</html>

output

This is Strong text

Emphasis Tag

It is same as italic tag.

Emphasized text is used to display the text as in emphasized text, with added semantic importance. Emphasized text uses tag. is also called as pharse tag.

This tag is used to emphasize the text, and displayed the text in italic form. The text written between and tag will italicized the text.

Syntax -

.. text here..

Example

<!DOCTYPE html>
<html>
<head>
<title>Emphasized text example.. </title>
</head>
<body>
This is Emphasized text
</body>
</html>

Output

This is Emphasized text

Definition tag

The <dfn>....</dfn> HTML Definition Element allows to specify that we are introducing a especial term in web page. It's usage is similar to italic words in the midst of a paragraph.

Definition tag specify the term is special term for browser.

Used to defining instance of a term. The <dfn> tag used to represent the defining instance of term. The tag can be represented like <dfn></dfn> with the term inserted between the opening and closing tags.

This is used when HTML user introduce a especial term and display it differently on webpage.

Syntax -

Example

<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
The following word is a <dfn>special</dfn> term.
</body>
</html>

Output

The following word is a special term.

Quoting tag

Quoting tags are used when HTML developers want to add quot to passages from a different source.

When you want to quote a passage from another source, you should place it in the middle of <blockquote>...</blockquote> tags.

Syntax -

Example

<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
The following description of XHTML is taken from the W3C Web site:
<blockquote>W3C - Html Phrase Tags.</blockquote>
</body>
</html>

Output

The following description of XHTML is taken from the W3C Web site:

W3C - Html Phrase Tags.

Short Quotations tag

Short Quote Tag is used for adding a double quote to your statement on your web page.

The <q>...</q> element is used when you want to add a double quote within a sentence.

it will enclose the text in double quotes that means the content written between <q> will show on double quots in Browser screen.

Syntax -

Example

<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
Amit is in Spain, <q>I think I am wrong</q>.
</body>
</html>

Output

You are in W3Code Designer.

Code tags

The HTML <code> </code> element is used to display the part of computer code. It will display the content in monospaced font.

Used to define the computer code. Code formatting is used to define the programming code. Code formatting uses <code> tag. Any text in between <code>..</code> defines it as programming code to browsers.

Syntax -

Example

<!DOCTYPE html>
<html>
<head>
<title> Code formatting element example.. </title>
</head>
<body>
<code>Var a = b + c</code>
</body>
</html>

Output

Var a = b + c

Pre tag

The <pre> tag defines preformatted text.

Text inside a <pre> element is visibled in a fixed-width font, and the text preserves both line breaks and spaces. The text will be displayed exactly as written in the HTML source code.

This will show output as you write content such as it display spaces, line breaks and so more.

Syntax -

Example

<!DOCTYPE html>
<html>
<head>
<title>Strong text example.. </title>
</head>
<body>
<pre> Text inside pre element is visibled in a fixed-width font, and it preserves both line breaks and spaces. </pre>
</body>
</html>

Output

Text inside pre element
is visibled in a fixed-width
font, and it preserves
both line breaks and spaces.

Keyboard Tag

Keyboard formatting is used to define the keyboard input. Keyboard input means the input/text entered by the user in any means.

Defaultly its background color is black.

Keyboard formatting uses <kbd> tag. Any text in between <kbd>..</kbd> defines it as keyboard input to browsers. <kbd> element is nested element.

At that time, you can use the keyboard tag when asking readers to enter some text.

Syntax -

Example

<!DOCTYPE html>
<html>
<head>
<title> Keyboard formatting element example.. </title>
</head>
<body>
<kbd> File > Open > type > save</kbd>
</body>
</html>

Output

File > Open > type > save

Address tag

An HTML <address> tag defines the contact information about the author of the content. The content written middle of <address> and </address> tag, will be displayed in italic font .

Address Tags are used for specifying as well as emphasize which group of text is an address.

Syntax -

<address>..content text here.. </address>

Example

<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>

Output

388A, Road No 22, Jubilee Hills - Madhya Pradesh

Text Direction

BDO stands for Bi-Directional Override.

The <bdo> tag is used to override the current text direction.

Syntax -

Example

<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
This text will go left to right.
<bdo dir = "rtl">This text will go right to left.</bdo>
</body>
</html>

Output

This text will go left to right.

This text will go right to left.

Text Citations

The <cite> tag defines the title of a creative work example as a book, a poem, a painting and a sculpture, and so more.

Text in the <cite> element usually renders in italic.

Syntax -

Example

<!DOCTYPE html>
<html>
<head>
<title>Strong text example.. </title>
</head>
<body>
<cite>The Scream</cite> by Edward Munch. Painted in 1893.
</body>
</html>

Output

The Scream by Edward Munch. Painted in 1893.

Program Output

The <samp> tag is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.

Syntax -

Example

<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
Result produced by the program is <samp>Hello World!</samp>
</body>
</html>

Output

Result produced by the program is Hello World!

Var tag

Any text in between <var>..</var> defines it as mathematical variable to browsers. <var> element is nested element. Mostly <var> used in mathematical expressions.

Defines a variable or Variable formatting in HTML document. Variable formatting is used to define the mathematical variable. Variable formatting uses <var> tag.

Syntax -

Example

<!DOCTYPE html>
<html>
<head>
<title>Sample formatting element example..</title>
</head>
<body>
<var>a = b * c</var>
</body>
</html>

Output

a = b * c

Html Tutorial

html phrase tags

7/02/2021

Hacker

list of HTML phrase tags

Abbreviation tag

Example

Output

Acronym tag

Example -

Output -

Marked tag

Example

Output

Strong tag

Example

output

Emphasis Tag

Example

Output

Definition tag

Example

Output

Quoting tag

Example

Output

Short Quotations tag

Example

Output

Code tags

Example

Output

Pre tag

Example

Output

Keyboard Tag

Example

Output

Address tag

Example

Output

Text Direction

Example

Output

Text Citations

Example

Output

Program Output

Example

Output

Var tag

Example

Output

1 comment: