HTML Head
<head> tag is used to enclose header part of HTML document which will contain other meta tags like <title>, <meta> and also to include other files using <link> and <script>. Content enclosed withing <head> are not visible in the HTML document body.
<!DOCTYPE html>
<html>
<head>
<!-- HTML head part -->
</head>
<body>
<!-- HTML document body -->
</body>
</html>
Following are the tags that can be enclosed within the <head> tag, let us learn about them in detail.
HTML <title> Tag
<title> tag is used to display the title of the HTML document. Title is displayed in the browsers title bar.
<!DOCTYPE html>
<html>
<head>
<!-- HTML head part -->
<title>HTML Document Title Example</title>
</head>
<body>
<!-- HTML document body -->
</body>
</html>
HTML <meta> Tag
<meta> tag is used to add meta information about the HTML document. Meta information means, information about the document like
- who is the author of the document
- description about the document
- keywords about the document
- content type of the document
and so on. General format of the meta tag is,
<meta name="attribute-name" value="attribute-value">
HTML meta tag example
Following is an example HTML with most often used meta tags.
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="description" content="Example HTML document for learning meta tags">
<meta name="keywords" content="HTML, Meta, Example ">
<meta name="author" content="TutorialWalk">
<meta http-equiv="expires" content="Fri, 1 July 2016 11:00:00 GMT">
<meta name="robots" content="index, follow">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
http-equivprovides HTTP header name and value. In the above examplecontent-typeis specified as UTF-8. Similarly it is used to specify the HTML document expiry.description,keywordsandauthorare information about the HTML document.robotsis instruction to the search engine robots. It can be instructed whether to index or not index and follow or not follow the links present in the HTML page.
HTML <link> Tag
<link> tag is to link an external document with the current HTML document. Generally used to link CSS files to use the styles in the document.
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<link rel="stylesheet" href="/css/style.css">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
In the above example we have linked a CSS document with the current HTML page and a favicon is also linked. Favicons are displayed in the web browser title bar.
HTML <style> Tag
<style> tag is used to add CSS styles to the HTML page. Instead of linking a CSS file, the styles can be directly added in the HTML head and used in the HTML body.
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<style>
.stylize {background-color: #CCC;font-style:italic;}
</style>
</head>
<body>
<p> Text without style.</p> <p class="stylize">Hello, World!</p>
</body> </html>
Example Output
Text without style.
Hello, World!
HTML <script> Tag
<script> tag is used to add script to the HTML page. Following example shows how we have linked a JavaScript file to the current HTML page. If we specify the src attribute then the script file will be include.
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<script type="text/javascript" src="/js/script.js"></script>
<script type="text/javascript">
function helloScript(){
alert("Hello, World");
}
</script>
</head>
<body>
<p>Click button to say hello!</p>
<input type="button" onclick="helloScript();" name="hello" value="hello" />
</body>
</html>
Example Output
Click button to say hello!
