HTML Tutorial - HTML Meta Data








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.

The following code shows the title element in use. 

<!DOCTYPE HTML>
<html>
<head>
   <title>Example from java2s.com</title>
</head><!--from   w  w  w.  j  a  va2s .com-->
<body>
    <p>This is a test.</p>
    <a href="http://java2s.com">Visit  java2s.com</a>
</body>
</html>

Click to view the demo





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.

The following code shows the base element and href attribute in use. 

<!DOCTYPE HTML>
<html>
<head>
   <title>Example</title>
   <base  href="http://java2s.com/listings/"/>
</head><!--from w ww  .j  a va 2 s.  co m-->
<body>
   <p>This is a test.</p>
   <a href="http://java2s.com">Visit java2s.com</a>
   <a href="page2.html">Page 2</a>
</body>
</html>

Click to view the demo

The code above sets the base URL to http://java2s.com/listings/.

java2s.com is the name of the server, and listings is the directory on the server.

Later in the document, it creates a hyperlink using the relative URL page2.html.

When the user clicks the hyperlink, the browser combines the base URL and the relative URL to create the combined URL http://java2s.com/listings/page2.html.

If you do not use the base element, then the browser will assume that it should resolve any relative links against the URL of the current document.

For example, if you load a document from the URL http://java2s.com/app/mypage.html and it contains a hyperlink with a relative URL of myotherpage.html, then the browser will attempt to load the second page from the fully qualified URL http://java2s.com/app/myotherpage.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.
The HTML4 scheme attribute is now obsolete.

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="java2s.com"/>
    <meta name="description"  content="A simple example"/>
</head><!--from  w w  w  .  j  av  a  2  s  .c o m-->
<body>
    <a href="http://java2s.com">Visit  java2s.com</a>
</body>
</html>

Click to view the demo

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

The following table lists the predefined metadata types that you can use with the meta element.

Metadata NameDescription
application nameThe name of the web application that the current page is part of
authorThe name of the author of the current page
descriptionA description of the current page
generatorThe name of the software that generated the HTML
keywordsA set of comma-separated strings that describe the content

In addition to the five predefined metadata names, you can also use metadata extensions. Go to http://wiki.whatwg.org/wiki/MetaExtensions to see a list of these extensions.

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. For example: 


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

An example of this is shown in the following code. 

<!DOCTYPE HTML>
<html>
<head>
    <title>Example</title>
    <meta name="author" content="java2s.com"/>
    <meta name="description"  content="A simple  example"/>
    <meta charset="utf-8"/>
</head><!--from ww w . ja  v  a2s  .  c  o  m-->
<body>
   <p>This is a test.</p>
   <a href="http://java2s.com">Visit  java2s.com</a>
</body>
</html>

Click to view the demo

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.

HTML 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.

The following code uses the meta Element to Simulate an HTTP Header 

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="refresh"  content="5"/>
</head><!--from  w w w.  j  a v  a  2 s  .c om-->
<body>
    <p>This is a test</p>
    <a href="http://java2s.com">Visit  java2s.com</a>
</body>
</html>

Click to view the demo

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.

Jump

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.java2s.com"/>
</head><!--from www .ja  v  a 2  s  .  co m-->
<body>
   <p>This is a test.</p>
   <a href="http://java2s.com">java2s.com</a>
</body>
</html>

Click to view the demo

There are three permitted values for the http-equiv attribute listed in the following.

  • 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; http://www.java2s.com"/>
  • 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"/>