Learn

HTML – Phrase Tags

Advertisement

The phrase tags have been desicolgned for particular functions, although they’re displayed in the same means as different fundamental tags like <b>, <i>, <pre>, and <tt>, you may have seen in earlier chapter. This chapter will take you thru all of the necessary phrase tags, so let’s begin seeing them one after the other.

Emphasized Text

Something that seems inside <em>…</em> element is displayed as emphasised textual content.

Instance

<!DOCTYPE html>
<html>

   <head>
      <title>Emphasized Example</title>
   </head>
  
   <body>
      <p>My Name is <em>Hamza</em> & age 25 years old.</p>
   </body>
  
</html>

This may produce the next consequence

My Name is Hamza & age 25 years old.

Marked Text

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

Instance

<!DOCTYPE html>
<html>

   <head>
      <title>New Marked Text Example</title>
   </head>
  
   <body>
      <p>My name is <mark>Hamza</mark> & age 35.</p>
   </body>
<footer></footer>	
</html>

This may produce the next consequence

My name is Hamza & age 35.

Strong Textual content

Something that seems inside <strong>…</strong> element is displayed as necessary textual content.

Instance

<!DOCTYPE html>
<html>

   <head>
      <title>New Strong Text</title>
   </head>
  
   <body>
      <p>My name is <strong>Hamza</strong> & age 35.</p>
   </body>
<footer></footer>	
</html>

This may produce the next consequence

My name is Hamza & age 35.

Text Abbreviation

You may abbreviate a textual content by placing it inside opening <abbr> and shutting </abbr> tags. If current, the title attribute should include this full description and nothing else.

Instance

<!DOCTYPE html>
<html>

   <head>
      <title>New Text Abbreviation</title>
   </head>
  
   <body>
      <p>My name is <abbr title = "Abhishek">Hamza</abbr> & age 35.</p>
   </body>
<footer></footer>	
</html>

This may produce the next consequence

My name is Hamza & age 35.

Acronym Element

The <acronym> element means that you can point out that the textual content between <acronym> and </acronym> tags is an acronym.

At current, the most important browsers don’t change the looks of the content material of the <acronym> element.

Instance

<!DOCTYPE html>
<html>

   <head>
      <title>New Acronym Text</title>
   </head>
  
   <body>
      <p>My name is <acronym>Hamza</acronym> & age 35.</p>
   </body>
<footer></footer>	
</html>

This may produce the next consequence

My name is Hamza & age 35.

Textual content Direction

The <bdo>…</bdo> element stands for Bi-Directional Override and it’s used to override the present textual content path.

Instance

<!DOCTYPE html>
<html>

   <head>
      <title>New Direction Example</title>
   </head>
  
   <body>
      <p>My name is Hamza & age 35. Left to Right</p>
      <p><bdo dir = "rtl">My name is Hamza & age 35. Right to Left</bdo></p>

   </body>
<footer></footer>	
</html>

This may produce the next consequence

My name is Hamza & age 35. Left to Right

My name is Hamza & age 35. Right to Left

Special Terms

The <dfn>…</dfn> element (or HTML Definition Element) means that you can specify that you’re introducing a particular time period. It is utilization is just like italic phrases within the midst of a paragraph.

Usually, you’d use the <dfn> element the primary time you introduce a key time period. Most up-to-date browsers render the content material of a <dfn> element in an italic font.

Instance

<!DOCTYPE html>
<html>

   <head>
      <title>New Special Terms Text</title>
   </head>
  
   <body>
      <p>My name is <dfn>Hamza</dfn> & age 35.</p>
   </body>
<footer></footer>	
</html>

This may produce the next consequence

My name is Hamza & age 35.

Quoting Textual content

Whenever you need to quote a passage from one other source, you need to put it in between <blockquote>…</blockquote> tags.

Textual content inside a <blockquote> element is often indented from the left and proper edges of the encircling textual content, and typically makes use of an italicized font.

Instance

<!DOCTYPE html>
<html>

   <head>
      <title>New Blockquote Text</title>
   </head>
  
   <body>
      <p>My name is Hamza & age 35.</p>
<blockquote>dfn tag in html, meta tag in html, html tags, phrasing tags html, object html phrase element, text level formatting tags in html, html table, tag movie phrase</blockquote>
   </body>
<footer></footer>	
</html>

This may produce the next consequence

My name is Hamza & age 35.

dfn tag in html, meta tag in html, html tags, phrasing tags html, object html phrase element, text level formatting tags in html, html table, tag movie phrase

Quick Quotations

The <q>.</q> element is used whenever you need to add a double quote inside a sentence.

Instance

<!DOCTYPE html>
<html>

   <head>
      <title>New Double Quote Text</title>
   </head>
  
   <body>
      <p>My name is <q>Limezeen</q> & age 40.</p>
   </body>
<footer></footer>	
</html>

This may produce the next consequence

My name is Limezeen & age 40.

Text Citations

If you’re quoting a textual content, you may point out the supply inserting it between an opening <cite> tag and shutting </cite> tag

As you’d anticipate in a print publication, the content material of the <cite> element is rendered in italicized textual content by default.

Instance

<!DOCTYPE html>
<html>

   <head>
      <title>New Citations Text</title>
   </head>
  
   <body>
      <p>HTML tutorial from <cite>wopage.org</cite>.</p>
   </body>
<footer></footer>	
</html>

This may produce the next consequence

HTML tutorial from wopage.org.

Computer Code

Any programming code to look on a Internet web page needs to be positioned inside <code>…</code> tags. Often the content material of the <code> factor is offered in a monospaced font, similar to the code in most programming books.

Instance

<!DOCTYPE html>
<html>

   <head>
      <title>New Computer Code Text</title>
   </head>
  
   <body>
      <p>Simple Code <code>This is code.</code> New Regular text.</p>
   </body>
<footer></footer>	
</html>

This may produce the next consequence

Simple Code This is code. New Regular text.

Keyboard Text

When you’re speaking about computer systems, if you wish to inform a reader to enter some textual content, you should utilize the <kbd>…</kbd> element to point what needs to be typed in, as on this instance.

Instance

<!DOCTYPE html>
<html>

   <head>
      <title>New Keyboard Text </title>
   </head>
  
   <body>
      <p>My name is <kbd>Aqil</kbd> & age 45.</p>
   </body>
<footer></footer>	
</html>

This may produce the next consequence

My name is Aqil & age 45.

Programming Variables

This element is often used along with the <pre> and <code>parts to point that the content material of that element is a variable.

Instance

<!DOCTYPE html>
<html>

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

This may produce the next consequence

document.write("user-name")

Program Output

The <samp>…</samp> element signifies pattern output from a program, and script and so forth. Once more, it’s primarily used when documenting programming or coding ideas.

Instance

<!DOCTYPE html>
<html>

   <head>
      <title>New Program Output Text</title>
   </head>
  
   <body>
      <p>Sample output from a computer program <samp>Hello World!</samp></p>
   </body>
<footer></footer>	
</html>

This may produce the next consequence

Sample output from a computer program Hello World!

Address Text

The <address>…</address> element is used to include any handle.

Instance

<!DOCTYPE html>
<html>

   <head>
      <title>New Address Text</title>
   </head>
  
   <body>
      <address>185/186 S Industrial Estate. Kot Lakhpat</address>
   </body>
<footer></footer>	
</html>

This may produce the next consequence

185/186 S Industrial Estate. Kot Lakhpat

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Close
Privacy Policy | DMCA | Contact US
Back to top button
Close