codescracker


html

HTML Metadata Tags



« Previous Tutorial Next Tutorial »


The metadata tags are used to set the presentation or the behaviour of the remaining content of the document.

Metadata tags can also be used to set a relationship of a document with other documents.

You can use metadata tags to provide additional information about an HTML document.

Following are the list of metadata tags :

Let's discuss all the above metadata tags one by one.

HTML TITLE Tag

The TITLE tag contains the title of the HTML document that appears in the title bar of the Web browser. This tag is used by search engines to select the document and display it in the search result. Each HEAD tag should contain a TITLE tag.

Note - Remember to keep the title text short because some browsers may find it difficult to handle titles that are longer than 256 characters.

Example

The following code fragment shows the use of the TITLE tag in an HTML document :

<!doctype html>
<html>
<head>
	<title>
		This is the title of the Web page
	</title>
</head>
</html>

Here is an example uses HTML title tag:

<!DOCTYPE html>
<html>
<head>
	<title>This is Title of Document</title>
</head>
<body>

<p>Hello, HTML Metadata Tutorial</p>

</body>
</html>

Here is the sample output produced by the above title tag example in HTML:

HTML Title Tag Example

HTML TITLE Tags Attributes

Following table describes the attributes of the TITLE tag :

Attribute Description
id Specifies a unique alphanumeric identifier for a tag in the document
class Specifies the class of a tag in an HTML document
style Specifies an inline style to render a tag in the document
lang Specifies the language used by a tag

HTML BASE Tag

The BASE tag is used to specify the default URL and the target for all the links in an HTML document. This tag appears within the HEAD tag of the document and should be used as the first tag in the HEAD tag. This enables the other tags in the head section to use the information of the BASE tag.

Example

The following code fragment shows the use of the BASE tag in an HTML document :

<!doctype html>
<html>
<head>
	<base href="url" target="value"/>
</head>
</html>

Here is an example uses HTML base tag:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Base Tag Example</title>
	<base href="http://codescracker.com/" />
</head>
<body>

<img src="/colpic.jpg" alt="color pic" width="150" height="150" />
<a href="/html/html-metadata-elements.htm">HTML Metadata Tags Tutorial</a> 

</body>
</html>

Following is the sample output of the above HTML base tag example code:

HTML Base Tag Example

If you change the base URL to something else, for example, if base URL is http://codescracker.com/home then the image and the other given links will become like http://codescracker.com/home/images/colpic.jpg and http://codescracker.com/home/html/html-metadata-elements.htm

HTML BASE Tag Attributes

Following table describes the attributes of the BASE tag :

Attribute Description
href Specifies a URL in an HTML document
target Specifies the locations where the links of an HTML document open. Following are the four possible values of the target attribute :
  • _blank - Opens the link in a new window
  • _parent - Opens the link in the same frame the link is clicked
  • _self - Opens the link in the present frameset
  • _top - Opens the link in the same window
  • <framename> - Opens the link in the respective frame

HTML LINK Tag

The LINK tag is used to link an HTML document to the other HTML documents. It also defines the relationship between the two different HTML documents. The LINK tag contains the href attribute to specify the destination URL of the link. The href attribute is a required attribute that must have a valid URL. The LINK tag also contains the rel attribute that defines the relationship of the linked documents.

Example

The following code fragment shows the use of the LINK tag :

<head>
	<link href="file_name.html" rel="stylesheet">
</head>

Here is an example uses HTML link tag:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Metadata Tags Example - Link Tag</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Hello, HTML Metadata Tags Tutorial</p>

</body>
</html>

Below is the sample output produced by the above link tag example code in HTML:

HTML Link Tag Example

HTML LINK Tag Attributes

Following table describes the attributes of the LINK tag :

Attribute Value Description
href URL Specifies the target URL you navigate to after clicking the link
hreflang language_code Defines the base language of the target URL
media screen, tty, tv, projection, handheld, print, braille, aural, all Specifies the device on which the HTML document is displayed
rel alternate, archives, author, first, feed, icon, help, index, license, last, next, pingback, prev, prefetch, search, stylesheet, sidebar, tag, up Specifies the relationship between the HTML document and the target URL or another HTML document
type the mime_type
for example : text/javascript text/css
Specifies the Multipurpose Internet Main Extensions (MIME) type of the target URL. The MIME type decides which type of language rules are to be followed in an HTML page, such as JavaScript or CSS.
sizes any number Defines the size of the linked HTML document

HTML COMMAND Tag

The COMMAND tag is a new tag introduced in HTML5, and is used to execute a command when an event is fired by a form control, such as radio button or checkbox. You can use the Command tag with the context menu or toolbar.

Example

Following HTML code fragment shows the use of the COMMAND tag :

<MENU label="Cars">
	<COMMAND type="radio" radiogroup="cars" label="Lamborghini">
	<COMMAND type="radio" radiogroup="cars" label="Ferrari">
</MENU>

HTML COMMAND Tag Attributes

Following table lists the attributes of the COMMAND tag:

Attribute Value Description
type command (default), checkbox, radio Specifies the type of command
label some_text Specifies the name of the command that is to be displayed on an HTML page
icon URL Specifies the location of the image that is to be displayed as the icon of an HTML page
disabled [Empty string], disabled Specifies a value that indicates whether a command is disabled or not
checked [Empty string], checked Specifies a value to indicate whether a command is selected or not
radiogroup some_text Specifies a string value that represents the name of the group of commands whose type attribute has radio as its value
title some_text Specifies the title of the command

HTML SCRIPT Tag

The SCRIPT tag is used to declare a script, such as JavaScript within an HTML document. This tag either contains scripting statements or pointer to an external script file through the src attribute. You can use the SCRIPT tag for validating the Web forms and manipulating the content and images present on these forms. The SCRIPT tag has the following five attributes :

If the value of the async attribute is true, then the script executes asynchronously, In this case the script executes while the document is parsed. And if the value of the async attribute is false but the value of the defer attribute is true, then the script is executed after the document has finished parsing. If the value of the async and defer attributes are false, then the script is executed immediately, and the HTML page waits for the script to finish executing before continuing the parsing

Example

Following HTML code fragment shows how to use the SCRIPT tag in an HTML document :

<HEAD>
	<SCRIPT type="text/javascript">
		Script code here
	</SCRIPT>
</HEAD>

Here is an example uses HTML script tag:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Metadata Tags Example - SCRIPT Tag</title>
	<script type="text/javascript">
		function metadataFun()
		{
			alert("Hello, HTML Metadata Tags Tutorial!");
		}
	</script>
</head>
<body>

<input type="button" onclick="metadataFun();" name="ok" value="OK"  />

</body>
</html>

Here is the output of the above HTML script tag example:

HTML Script Tag1

When you click the OK button, it will display the following in the browser:

HTML Script Tag2

To check how it is working, click on the below OK button:

HTML SCRIPT Tag Attributes

Following table describes the attributes of the SCRIPT tag :

Attribute Value Description
async true, false Specifies whether the script should be executed asynchronously or not
type text/ecmascript
text/javascript
application/ecmascript
application/javascript
text/vbscript
Specifies the MIME type of the script
charset charset Specifies the character encoding used in the script
defer true, false Specifies whether or not the browser can continue parsing the HTML document
src URL Specifies the URL of a file that contains the script

HTML NOSCRIPT Tag

The NOSCRIPT tag is used to display the alternate content on the Web browser that either does not support JavaScript or has JavaScript disabled. And if the JavaScript is enabled or supported by the Web browser, the NOSCRIPT tag is not considered.

Example

The following HTML code fragment shows the use of NOSCRIPT tag :

<SCRIPT type="text/javascript">
	document.write("Have a nice day.")
</SCRIPT>
<NOSCRIPT>
	JavaScript is disabled or not supported on your browser.
</NOSCRIPT>

HTML STYLE Tag

The HTML STYLE tag is used to declare the style sheet within the HTML document. This tag specifies how the HTML tags are rendered in a browser. The STYLE tag has the following three attributes :

Example

The following HTML code fragment shows the use of the STYLE tag :

<HEAD>
	<STYLE type="text/css">
		Style code here
	</STYLE>
</HEAD>

Here is an example uses HTML style tag:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Metadata Tags Example - Style Tag</title>
	<style type="text/css">
		.myclass1
		{
			background-color: green;
			padding: 12px;
			color: white;
		}
	</style>
</head>
<body>

<p class="myclass1">Hello, HTML Metadata Tutorial with Example</p>

</body>
</html>

Following is the output of the above style tag example code in HTML:

HTML Style Tag Example

You are free to change the color of heading tags using the HTML style attributes. Here is an example:

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>HTML Metadata Tags Tutorial and Example</TITLE>
</HEAD>
<BODY>

<h2 style="color:red;">HTML Metadata Tags Tutorial</h2>
<p>This is HTML metadata tags tutorial. 
Here you will find and learn all metadata tags available
in HTML.</p>
<h2 style="color:green;">HTML Metadata Tags Example</h2>
<p>This is HTML metadata tags example.
Here you will practice few examples on metadata tags
available in HTML.</p>
	
</BODY>
</HTML>

Here is the sample output produced by the above HTML style tag example:

html change heading color

Note : To learn about how Cascading Style Sheet works, refer CSS Tutorial

HTML STYLE Tag Attributes

Following table describes the attributes of the STYLE tag:

Attribute Value Description
type text/css Specifies the type of the content, such as simple text or style sheet in an HTML document
media Screen, tty, tv, projection, handheld, print, braille, aural, all Specifies the destination medium where the style is appeared
scoped scoped Specifies the style tags, that is the parent tag and its child tags

HTML Metadata Tags Example

Here is an example of SCRIPT and NOSCRIPT Tags.

<!DOCTYPE HTML>
<html>
<head>
	<title>HTML Metadata Tags Example</title>
	<script type="text/javascript">
		document.write("HTML Metadata Tags Tutorial");
	</script>
</head>
<body>

<noscript>
	Javascript is disabled or not supported in this browser.
</noscript>
	
</body>
</html>

Here is the output produced by the browser (supports Javascript)

html metadata

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test