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