HTML Phrase Tags and Meta Tags: Welcome to Ushanand Academy, Now we will discuss about Learn HTML Phrase Tags and Meta Tags. In This Article will take you through all the important HTML Phrase Tags and Meta Tags, so let’s start looking at them one by one.

Learn HTML Phrase Tags

Phrase tags have been removed for specific purposes, although phrase tags display in a similar way to other parent tags such as , , <pre>, and <tt>, which you have seen in the previous Articles. Please Read & Learn All Articles of HTML Tutorial Series.

Emphasized Text

Everything that appears within the …  element is displayed as a literal force.

For Example:

<!DOCTYPE html>
<html>

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

Results:
The following word uses an emphasized typeface.

Marked Text

Anything that appears with the  …  element is marked with yellow ink.

For Example:

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

Results:
The following word has been marked with yellow

Strong Text

Anything that appears within the  …  element is displayed as an important text.

For Example:

<!DOCTYPE html>
<html>

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

Results:
The following word uses a strong typeface.

Text Abbreviation

You can collapse a text by opening <abbr> and closing the </abbr> tag. If present, the title attribute should contain this complete description and nothing else.

For Example:

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

Results:
My best friend’s name is Abhy.

Acronym Element

The <acronym> element allows you to indicate that the text between the <acronym> and </acronym> tags is an abbreviation.

Currently, major browsers do not change the appearance of the contents of the <acronym> element.

For Example:

<!DOCTYPE html>
<html>

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

Results:
This chapter covers marking up text in XHTML.

Text Direction

The <bdo> … </bdo> element stands for bi-directional override and is used to override the current text direction.

For Example:

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

Results:
This text will go left to right.
This text will go right to left.

Special Terms

The <dfn> … </dfn> element (or HTML definition element) allows you to specify that you are presenting a particular word. This usage is similar to italic words in the middle of a paragraph.

When you first introduce a key word, usually, you will use the <dfn> element. Most recent browsers present the content of the <dfn> element in italic font.

For Example:

<!DOCTYPE html>
<html>

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

Results:
The following word is a special term.

Quoting Text

When you want to quote a passage from another source, you should put it between the <blockquote> … </blockquote> tags.

The text inside the <blockquote> element is usually inspired by the left and right edges of the surrounding text, and sometimes uses an italicized font.

For Example:

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

Results:
The following description of XHTML is taken from the W3C Web site:
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.

Short Quotations

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

For Example:

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

Results:
Amit is in Spain, I think I am wrong.

Text Citations

If you are quoting a text, you can indicate the source to be placed between the opening <cite> tag and the closing </cite> tag, As you would expect in a print publication, by default the content of the <cite> element is provided in italicized text.

For Example:

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

Results:
This HTML tutorial is derived from W3 Standard for HTML.

Computer Code

Any programming code appearing on the web page must be placed inside the <code> … </code> tag. The content of the <code> element is usually presented in a moonscape font, such as the code in most programming books.

For Example:

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

Results:
Regular text. This is code. Regular text.

Keyboard Text

When you are talking about computers, if you want a reader to enter a text, you can use <kbd> … </ kbd> element, as described in this example whether typing should be done.

For 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>

Results:
Regular text. This is inside kbd element Regular text.

Programming variables

This element is commonly used in combination with <pre> and <code> elements to inform that the content of that element is a variable.

For Example:

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

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

Program Output

The <samp> … </samp> element indicates sample output from programs, and scripts, etc. Again, it is mainly used when documenting programming or coding concepts.

For Example:

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

Results:
Result produced by the program is Hello World!

Learn HTML Phrase Tags and Meta Tags

Learn HTML Meta Tags

HTML Meta Tags: Lets specify HTML metadata – additional important information about a document in various ways. META elements can be used to name/value pairs describing properties of an HTML document, such as author, expiration date, list of keywords, document author and so on.

The <meta> tag is used to provide such additional information. This tag is an empty element and therefore does not contain a closing tag but it holds information about its properties.

You can include one or more meta tags in your document as to what information you want to keep in your document, but in general, meta tags do not affect the physical appearance of the document, so from the appearance point of view, it does not It happens. It does not matter whether you are involved in it or not.

How to Add Meta Tags to Your Documents

You can add metadata to your web pages by placing the <meta> tag inside the header of the document represented by the <head> and </head> tags.

A meta tag can have the following attributes in addition to core attributes-

Sr.No	Attribute & Description
1	NameName for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
2	contentSpecifies the property’s value.
3	schemeSpecifies a scheme to interpret the property’s value (as declared in the content attribute).
4	http-equivUsed for http response message headers. For example, http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

Specifying Keywords

You can use the <meta> tag to specify important keywords related to the document and these keywords are later used by search engines to index your web page for search purposes.

For Examples: The following is an example where we are adding HTML, meta tags, metadata as important keywords of a document.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

Results:
Hello HTML5!

Document description

You can use the <meta> tag to give a brief description about the document. This can again be used by various search engines when indexing your web page for search purposes.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

Document revision date

You can use the <meta> tag to indicate when the document was last updated. This information can be used by various web browsers while refreshing your web page.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "InfinityGyan, 3/7/2014" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Document Refreshing

A <meta> tag can be used to specify the duration after which your web page will automatically refresh.

For Example: If you want your page to stay fresh after every 5 seconds, use the following syntax.

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "InfinityGyan, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Page redirection

You can use the <meta> tag to redirect your page to another web page. If you want to redirect the page after a few seconds, you can also specify a duration.

For Examples: An example is to redirect the current page to another page after 5 seconds. If you want to redirect the page immediately, do not specify a content attribute.

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "InfinityGyan, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5; url = http://www.InfinityGyan.com" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Setting cookies

Cookies are data, stored in small text files on your computer and exchanged between web browsers and web servers so that various information can be tracked depending on the needs of your web application.

You can use the <meta> tag to store cookies on the client side and later this information can be used by the web server to track site visitors.

For Examples: An example is to redirect the current page to another page after 5 seconds. If you want to redirect the page immediately, do not specify a content attribute.

<!DOCTYPE html>
<html>
   <head>
      <title>Meta Tags Example</title>
      <meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
         
   </head>
   <body>
      <p>Hello HTML5!</p>
   </body>
</html>

If you do not include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser.

Note: You can see the PHP and Cookies tutorial for complete details on cookies.

Author Name Settings

You can set the name of an author in a web page using a meta tag.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Specify character set

You can use the <meta> tag to specify the character set used within the web page.

For Examples: By default, web servers and web browsers use ISO-8859-1 (Latin 1) encoding to process web pages. The following is an example for setting UTF-8 encoding-

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

To serve a static page with traditional Chinese characters, the webpage must have a <meta> tag to set Big5 encoding –

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Learn HTML Phrase Tags

Emphasized Text

Marked Text

Strong Text

Text Abbreviation

Acronym Element

Text Direction

Special Terms

Quoting Text

Short Quotations

Text Citations

Computer Code

Keyboard Text

Programming variables

Program Output

Learn HTML Phrase Tags and Meta Tags

Learn HTML Meta Tags

How to Add Meta Tags to Your Documents

Specifying Keywords

Document description

Document revision date

Document Refreshing

Page redirection

Setting cookies

Author Name Settings

Specify character set

You Might Also Like

Learn HTML Tables and Lists

HTML Basic Tags and Elements

Introduction to HTML

Leave a Reply Cancel reply