Students Empire

Learn Something New
Home

meta tag




title


The title element sets the document's title.


Browsers usually display the contents of this element at the top of the browser window or tab.


Every HTML document should have exactly one title element. The title text should be meaningful to the user.


			        <!DOCTYPE HTML>
			    <html>
			    <head>
			       <title>website title here</title>
			    </head>
			    <body>
			        <p>This is a test.</p>
			        <a href="http://www.studentsempire.com">click</a>
			    </body>
			    </html>
			      

HTML Base


The base element sets a base URL for relative links.


A relative link is one that omits the protocol, host, and port parts of the URL and is evaluated against some other URL-either one specified by the base element or the URL used to load the current document.


The base element also specifies how links are opened when a user clicks them, and how the browser acts after a form has been submitted.


base element has two local Attributes


  • href
  • target

An HTML document should contain, at most, one base element.


href Attribute


The href attribute specifies the base URL against which relative URLs in the document will be resolved.


			        <!DOCTYPE HTML>
			    <html>
			    <head>
			       <title>Example</title>
			       <base  href="http://www.studentsempire.com"/>
			    </head>
			    <body>
			       <p>example</p>
			       <a href="http://www.studentsempire.com">click</a>
			    </body>
			    </html>
			      

target Attribute


The target attribute tells the browser how to open URLs.


The values you specify for this attribute represent a browsing context.


HTML meta data


The meta element defines metadata for your document.


You can use this element in different ways, and an HTML document can contain multiple meta elements.


meta element has local Attributes, including name, content, charset, http-equiv.


The charset attribute is new in HTML5.


Each instance of the meta element can be used for only one of these purposes.


Name/Value Metadata Pairs


The first use for the meta element is to define metadata in name/value pairs, for which you use the name and content attributes.


The following code uses the meta Element to Define Metadata in Name/Value Pairs.


			          <!DOCTYPE HTML>
			      <html>
			      <head>
			          <meta name="author" content="studentsempire.com"/>
			          <meta name="description"  content="A simple example"/>
			      </head>
			      <body>
			          <a href="http://www.studentsempire.com">click
			      </body>
			      </html>
			        

You use the name attribute to specify which type of metadata the element refers to, and the content attribute to provide a value.


Name Description
application name The name of the web application that the current page is part of
author The name of the author of the current page
description A description of the current page
generator The name of the software that generated the HTML
keywords A set of comma-separated strings that describe the content

The robots metadata type is very widely used. It allows the author of an HTML document to specify how the document should be treated by search engines.


<meta name="robots" content="noindex">

The three values that most search engines will recognize are


  • noindex - don't index this page
  • noarchive - don't create archives or cached versions of this page
  • nofollow - don't follow links from this page

HTML Charset


To display an HTML page correctly, we have to set the character set (character encoding).


Another use for the meta element is to declare the character encoding.


			            <!DOCTYPE HTML>
			      <html>
			      <head>
			          <title>Example</title>
			          <meta name="author" content="studentsempire.com"/>
			          <meta name="description"  content="A simple  example"/>
			          <meta charset="utf-8"/>
			      </head>
			      <body>
			         <p>This is a test.</p>
			         <a href="http://www.studentsempire.com">click</a>
			      </body>
			      </html>
			           

The charset is set to UTF-8 encoding. UTF-8 is a common character encoding.



Character Encoding


  • ASCII is the first character encoding standard. It defines 127 alphanumeric characters. ASCII supported numbers (0-9), English letters (A-Z), and some special characters like ! $ + - ( ) @ < >.
  • ANSI (Windows-1252) is the original Windows character set. It supported 256 different character codes.
  • ISO-8859-1 is the default character set for HTML 4. It supported 256 different character codes.
  • UTF-8 (Unicode) covers almost all of the characters and symbols in the world. The default character encoding for HTML5 is UTF-8.

http-equiv


The final use for the meta element is to override the value of one of the HTTP (Hypertext Transfer Protocol) headers.


HTTP is what you usually use to transport HTML data between the server and the browser.


Each HTTP response from the server contains a series of headers that describe the content, and you can use the meta element to simulate or replace three of those headers.


			            <!DOCTYPE HTML>
			      <html>
			      <head>
			          <meta http-equiv="refresh"  content="5"/>
			      </head>
			      <body>
			          <p>This is a test</p>
			          <a href="http://www.studentsempire.com">click</a>
			      </body>
			      </html>
			           

You use the http-equiv attribute to specify which header you want to simulate, and the content attribute to provide the value you want to use.


In the code above, refresh header is set to 5, which has asked the browser to reload the page every five seconds.


If you follow the refresh interval with a semicolon and a URL, the browser will load the specified URL after the interval has passed.


			            <!DOCTYPE HTML>
			      <html>
			      <head>
			          <meta http-equiv="refresh"  content="3; http://www.studentsempire.com"/>
			      </head>
			      <body>
			          <p>This is a test</p>
			          <a href="http://www.studentsempire.com">click</a>
			      </body>
			      </html>
			           

  • Attribute Value:refresh set a period, in seconds, after which the current page should reload from the server. You can also specify a different URL to be loaded. For example: <meta http-equiv="refresh" content="5;
  • Attribute Value:default-style set preferred stylesheet that should be used with this page. The value of the content attribute must match the title attribute on a script or link element in the same document.
  • Attribute Value:content-type This is an alternative way of specifying the character encoding of the HTML page. For example: <meta http-equiv="content-type" content="text/html charset=UTF-8"/>