HTML - Phrase Tags ~ GoogleTech786

The expression labels have been desicolgned for particular purposes, however they are shown comparably as other essential labels like , , <pre>, and <tt>, you have seen in past section. This part will take you through all the vital expression labels, so we should begin seeing them one by one.

Underlined Text

Anything that shows up inside ... component is shown as underlined content.

Case

<!DOCTYPE html>
<html>

   <head>
      <title>Emphasized Text Example</title>
   </head>
 
   <body>
      <p>The following word uses an <em>emphasized</em> typeface.</p>
   </body>
 
</html>

Checked Text

Anything that shows up with-in ... component, is shown as set apart with yellow ink.

Case

<!DOCTYPE html>
<html>

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

Solid Text

Anything that shows up inside ... component is shown as vital content.

Case

<!DOCTYPE html>
<html>

   <head>
      <title>Strong Text Example</title>
   </head>
 
   <body>
      <p>The following word uses a <strong>strong</strong> typeface.</p>
   </body>
 
</html>

Content Abbreviation

You can curtail a content by putting it inside opening <abbr> and shutting </abbr> labels. In the event that present, the title trait must contain this full portrayal and that's it.

Case

<!DOCTYPE html>
<html>

   <head>
      <title>Text Abbreviation</title>
   </head>
 
   <body>
      <p>My best friend's name is  <abbr title = "Abhishek">Abhy</abbr>.</p>
   </body>
 
</html>

Acronym Element

The <acronym> component enables you to demonstrate that the content amongst <acronym> and </acronym> labels is an acronym.

At show, the significant programs don't change the presence of the substance of the <acronym> component.

Illustration

<!DOCTYPE html>
<html>

   <head>
      <title>Acronym Example</title>
   </head>
 
   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>
 
</html>

Content Direction

The <bdo>...</bdo> component remains for Bi-Directional Override and it is utilized to abrogate the present content heading.

Illustration

<!DOCTYPE html>
<html>

   <head>
      <title>Text Direction Example</title>
   </head>

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

</html>

Uncommon Terms

The <dfn>...</dfn> component (or HTML Definition Element) enables you to indicate that you are presenting an extraordinary term. It's use is like italic words amidst a section.

Normally, you would utilize the <dfn> component the first occasion when you present a key term. Latest programs render the substance of a <dfn> component in an italic text style.

Case

<!DOCTYPE html>
<html>

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

Citing Text

When you need to cite a section from another source, you should place it in the middle of <blockquote>...</blockquote> labels.

Content inside a <blockquote> component is normally indented from the left and right edges of the encompassing content, and here and there utilizes a stressed text style.

Illustration

<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>
 
   <body>
      <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 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
   </body>
 
</html>

Short Quotations

The <q>...</q> component is utilized when you need to include a twofold quote inside a sentence.

Illustration

<!DOCTYPE html>
<html>

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

Content Citations

On the off chance that you are citing a content, you can demonstrate the source setting it between an opening <cite> tag and shutting </cite> tag

As you would expect in a print production, the substance of the <cite> component is rendered in stressed content naturally.

Case

<!DOCTYPE html>
<html>
   
   <head>
      <title>Citations Example</title>
   </head>
   
   <body>
      <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
   </body>
   
</html>

PC Code

Any programming code to show up on a Web page ought to be put inside <code>...</code> labels. Normally the substance of the <code> component is introduced in a monospaced textual style, much the same as the code in most programming books.

Illustration

<!DOCTYPE html>
<html>
   
   <head>
      <title>Computer Code Example</title>
   </head>
   
   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>
   
</html>

Console Text

When you are discussing PCs, on the off chance that you need to advise a peruser to enter some content, you can utilize the <kbd>...</kbd> component to demonstrate what ought to be written in, as in this illustration.

Illustration

<!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 Variables

This component is generally utilized as a part of conjunction with the <pre> and <code> components to show that the substance of that component is a variable.

Illustration

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

Program Output

The <samp>...</samp> component shows test yield from a program, and content and so forth. Once more, it is for the most part utilized while reporting programming or coding ideas.

Illustration

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

Address Text

The <address>...</address> component is utilized to contain any address.

Illustration

<!DOCTYPE html>
<html>
   
   <head>
      <title>Address Example</title>
   </head>
   
   <body>
      <address>Muslim town lahore</address>
   </body>
   
</html>

Sunday 15 October 2017

HTML - Phrase Tags

0 comments:

Translate

Subscribe Youtube

Our Facebook Page

Wikipedia

Popular Posts

Adsense

Contact us

Earn Now