HTML Head

Bookmark
Learn about the importance of head tag and the tags that can be used within 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-equiv provides HTTP header name and value. In the above example content-type is specified as UTF-8. Similarly it is used to specify the HTML document expiry.
  • description, keywords and author are information about the HTML document.
  • robots is 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

HTML Meta Tag Example

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

HTML Meta Tag Example

Click button to say hello!

Exception Occured:

TypeErrorException
Messageerror_log(app.log): Failed to open stream: Permission denied
File/home/dh_czz6eb/tutorialwalk.com/common/error.php
Line36
Trace#0 (): log_error(2, 'error_log(app.log): Failed to open stream: Permission denied', '/home/dh_czz6eb/tutorialwalk.com/common/error.php', 36)
#1 /home/dh_czz6eb/tutorialwalk.com/common/error.php(36): error_log('09-10-2024 12:19:03 pm (IST),/home/dh_czz6eb/tutorialwalk.com/common/common.php,193,0,ErrorException,Optional parameter $per_page declared before required parameter $href is implicitly treated as a required parameter,/html/html-head.html,#0 /home/dh_czz6eb/tutorialwalk.com/common/error.php(115): log_error(8192, 'Optional parame...', '/home/dh_czz6eb...', 193)
#1 [internal function]: check_for_fatal()
#2 {main}
', 3, 'app.log')
#2 /home/dh_czz6eb/tutorialwalk.com/common/error.php(8): log_exception(ErrorException)
#3 /home/dh_czz6eb/tutorialwalk.com/common/error.php(115): log_error(8192, 'Optional parameter $per_page declared before required parameter $href is implicitly treated as a required parameter', '/home/dh_czz6eb/tutorialwalk.com/common/common.php', 193)
#4 (): check_for_fatal()
REQUEST_URI/html/html-head.html