❮ Previous Next ❯

HTML Head

The HTML <head> element provides metadata about the page. This element is contained between the <html> start tag and <body> start tag. Inside the heading section, the following tags can be used.

  1. <title> tag
  2. <style> tag
  3. <meta> tag
  4. <link> tag
  5. <script> tag
  6. <base> tag

1. <title> tag

The <title> tag defines the title of a document or a webpage. It can be seen on the browser's tab bar and in search engine result.

Full code example

<!DOCTYPE html>
<html>
<head>
<title>
Title of the page
</title>
</head>
<body>
Website  Content
</body>
</html>
Run The code »

There must be only one <title> element for an HTML webpage.

2. <style> tag

It defines the style of an individual HTML Page. All styles are designed using CSS properies.

Full code example

<!DOCTYPE html>
<html>
<head>
<style>
 p {
  text-decoration: underline;
  color: red;
 }
</style>
<title>
Title of the page
</title>
</head>
<body>
<p> Red color and underlined text para. </p>
</body>
</html>
Run The code »

3. <meta> tag

It provides information about a webpage. The metadata is not visible on the webpage but helps in screen readers.

Full code example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<meta name="description" content="Learncodinghub is a professional website for learning HTML Tutorials.">

<meta name="keywords" content="HTML5, HTML">

<meta name="author" content="Kayniz L">
<title>
Title of the page
</title>
</head>
<body>
--- Content ---
</body>
</html>

4. <link> tag

It connects the webpage with external resources like css, fonts or icons. It is self closing tag i.e. it does not need its end tag.

Full code example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<title>
Title of the page
</title>
</head>
<body>
--- Content ---
</body>
</html>

5. <script> tag

It is used to define JavaScript code which is used to show the behavior of webpage.

Full code example

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction( ) {
alert(" I am an Alert Box!");
}
</script>

<title> HTML Heading Learning </title>
</head>

<body>
<button onclick="myFunction( )"> Click Me </button>
</body>
</html>
Run The code »

6. <base> tag

It defines the base URL/target value for all relative URLs in a web-page or document. The base URL is valid only when you have not assigned the specific href value for an HTML <a> element.

Full code example

<!DOCTYPE html>
<html>
<head>
<base
 href="/html_a_tag.html"
 target="_blank">
</head>
<body>
<p><a href=" "> HyperLink </a> allows you to move from one page to another. All the links in this document will open in the /html_a_tag.html page and also in a new tab.
<br>
But, <a href="html_b_tag.html">this link</a> will not open in the base URL ("/html_a_tag.html") because a specific URL is defined for this link.
</p>
</body>
</html>
Run The code »
❮ Previous Next ❯