HTML - Head Elements

Previous
Quiz
Next

HTML head elements define metadata like the title, character set, links to external stylesheets, and other details. This information does not display on the webpage but is helpful for the search engines and browsers. The head elements are placed inside the <head> tag.

The following are the commonly used head elements:

Let's understand each element in detail with the help of examples.

HTML <title> Element

The HTML <title> tag is used for specifying the title of the HTML document. The title must describe the content of the web page, and its format should be text only. It appears in the title bar of the browser's tab.

Example

Following is an example that shows how to give a title to an HTML document using the <title> tag:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Title Tag Example</title>
</head>
<body>
   <p>Describing the use of title tag</p>
</body>
</html>

HTML <meta> Element

The HTML <meta> tag is used to provide metadata about an HTML document. The metadata is nothing but additional information about the web page, including page expiry, page author, list of keywords, page description, and so forth. This information is further used for the purpose of search engine optimization. Remember, the metadata specified by the <meta> tag is not displayed on the web page, but it is machine-readable. Its most commonly used attributes are name, content, charset, and http-equiv.

Read More: HTML Meta Tags

Example

The following example describes a few of the important usages of the <meta> tag inside an HTML document:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Meta Tag Example</title>
   <!-- Provide list of keywords -->
   <meta name="keywords" content="C, C++, Java, PHP, Perl, Python">
   <!-- Provide description of the page -->
   <meta name="description" content="Simply Easy Learning by Tutorials Point">
   <!-- Author information -->
   <meta name="author" content="Tutorials Point">
   <!-- Page content type -->
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <!-- Page refreshing delay -->
   <meta http-equiv="refresh" content="30">
   <!-- Page expiry -->
   <meta http-equiv="expires" content="Wed, 21 June 2006 14:25:27 GMT">
   <!-- Tag to tell robots not to index the content of a page -->
   <meta name="robots" content="noindex, nofollow">
</head>
<body>
   <p>Describing the use of HTML meta tag</p>
</body>
</html>

HTML <base> Element

The HTML <base> tag is used for specifying the base URL for all relative URLs in a page, which means all the other URLs will be concatenated into the base URL while locating the given item. We are allowed to use only one base element in our HTML document. The most frequently used attributes of the tag are hrefandtarget.

Example

In this example, all the given pages and images will be searched after prefixing the given URLs with the base URL http://www.tutorialspoint.com/ directory:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Base Tag Example</title>
   <base href = "index.htm/" />
</head>
<body>
   <img src="/images/logo.png" alt="Logo Image"/>
   <a href="/html/index.htm" title="HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>

On running the above code, the tutorialspoint logo along with a link will be displayed. If we click on that link, it will redirect us to the index page of the HTML tutorial.

In HTML, the <link> tag is used to specify relationships between the current webpage and another external resource. The source of external resources is placed inside thehref attribute. The other attributes of the tag are rel, type, and media. Its most common use is to embed stylesheets into the HTML document.

Example

Following is an example of linking an external style sheet file available in the "css" subdirectory within the web root:

<!DOCTYPE html>
<html>
<head>
   <title>HTML link Tag Example</title>
   <link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
  <p>It is an example of linking stysheet to the current HTML document.</p>
</body>
</html>

HTML <style> Element

The HTML <style> tag is used to specify styles either for the whole HTML document or for a particular element. Its most common attributes are title and media.

Example

In the following example, we are defining a style for the <p> tag using the <style> tag.

<!DOCTYPE html>
<html>
<head>
   <title>HTML style Tag Example</title>
   <base href="http://www.tutorialspoint.com/" />
   <style>
      .myclass{
        background-color: #aaa;
        padding: 10px;
      }
   </style>
</head>
<body>
   <p class="myclass">Hello, World!</p>
</body>
</html>

Note − To learn about how Cascading Style Sheets work, kindly check a separate tutorial available at CSS Tutorial.

HTML <script> Element

The HTML <script> tag is used to include either an external script file or to define an internal script for the HTML document. The script is an executable code that performs some action.

Example

Following is an example where we are using a script tag to define a simple JavaScript function. When the user clicks on the OK button, an alert box will pop up with a Hello, Worldmessage.

<!DOCTYPE html>
<html>
<head>
   <title>HTML script Tag Example</title>
   <base href="http://www.tutorialspoint.com/" />
   <script type="text/JavaScript">
      function Hello(){
         alert("Hello, World");
      }
   </script>
</head>
<body>
   <input type="button" onclick="Hello();" name="ok" value="OK"  />
</body>
</html>
Print Page
Previous
Next
Advertisements