HTML Head and Meta Elements

Head Element

The head element contains general information, also called metainformation, about a document. Meta means “information about”. You can say that
meta-data means information about data, or meta-information means information about information. The head element includes important information such as the document’s title, style instructions, and more.
What’s Inside the Head Element?

  • <base>
  • <title>
  • <meta>
  • <link>
  • <style>
  • <script>

The elements inside the element are not intended to be displayed by a browser.

base Tag

The following example demonstrates how to use the tag to let all the links on a page open in a new window

<html>
<head>
<base target="_blank">
</head>
<body>
<p>
<a href="http://www.loopandbreak.com" 
target="_blank">This link</a>
will load in a new window. 
</p>
</body>
</html>

Title Tag

The title tag shows the text in tab (browser tab) or windows tab about the document.

<html>
<head>
<title> The Page Title </title>
</head>
<body>
the remaining body
</body>
</html>

Meta Element

HTML also includes a meta element <meta> that goes inside the head element. The purpose of the meta element is to provide meta-information about the document. Most often the meta element is used to provide information that is relevant to browsers or search engines, like describing the content of your document. The meta attributes in the following example identify the document’s author, editor, and the software used to create the page.
Keywords for Search Engines
Information inside a meta element can also describe the document’s keywords, which are used by search engines to find your page when a user conducts a search on the keyword.

<html>
<head>
<meta name="description" content="HTML examples">
<meta name="keywords" 
content="Java, HTML, css">

<meta name="author"
content="ayunor">
</head>
<body>
<p>
<a href="http://www.loopandbreak.com" 
target="_blank">This link</a>
will load in a new window. 
</p>
</body>
</html>

link

link attribute is used to link various style sheets with current html page

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head> 

Style

style is used to define internal style sheet elements

<head> 
<style type="text/css"> 
body {background-color: gray} 
</style> 
</head> 
<body> 
this background will be gray 
</body> 
</html> 

script

script tag is used to define JavaScript code, or to link to an external JavaScript File

<html>
<head>
<title> script tag</title>
<script>
function myFunction()
{
alert("Hello JavaScript");
}
</script>
</head>
<body>

<input type="button" onclick="myFunction()" value="Click Me">

</body>
</html>