Javascript AJAX jQuery HTML PHP Example MORE

HTML head Tutorial with Example

❮ Previous Next ❯

In HTML <head> element is the container for all the other HTML element that contain metadata(Data about the data).

Such as:

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

Most of the metadata are not displayed in the browser (although the title usually appears in the browser's title bar) but it can be useful for the functionality of the page.

The <title> Element

The <title> element specify the title of the document.

Why it is need ?

  1. Show a title in the browser tab
  2. To show a title for the page when it is added to favorites or bookmarked.
  3. Shows a title for the page in search engine results

Syntax:

<head>
<title>Title of the document</title>
</head>

Run it yourself

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title of the page</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

Run it yourself

<meta> Element

The element provides metadata about the HTML document. It is generally used to describe the page and important keyword in this page. Adding meta description and meta keyword help web browser to search eaisly. Some common use of meta

Define the character set used:

<meta charset="UTF-8">

Define a description of your web page:

<meta name="description" content="Students tutorial is a online tutorial.">

Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, PHP">

Define the author of a page:

<meta name="author" content="John Doe">

Refresh document every 50 seconds:

<meta http-equiv="refresh" content="50">

Example

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
<meta name="description" content="Students tutorial is a online tutorial for HTML,CSS,PHP.">
  <meta name="keywords" content="HTML,CSS,PHP">
  <meta name="author" content="John Doe">
</head>
<body>
 
<p>Page Content goes here.</p>
 
</body>
</html>

Run it yourself

<style> Element

The <style> tag is used to specify style information for a perticular HTML page:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title of the page</title>
    <style>
       P{
          Color: red;
       }
    </style>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

Run it yourself

<link> Element

The <link> element is generally used to load the css file for both internal and external file.

Example

Style.css
      P{
          Color: red;
       }
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="style.css">
 </head>
<body>

<p>Hello World!</p>

  
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
    <link rel="stylesheet" href="https://studentstutorial.com/style.css">
</head>
<body>

<p>Hello World!</p>

  
</body>
</html>

Run it yourself

<base> Element

The HTML <base> element is used to specify a base URL for all relative links contained in the document, e.g. you can set the base URL once at the top of your page.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
   <base href="https://www.studentstutorial.com/">
</head>
<body>

<p>Hello World!</p>

  
</body>
</html>

Run it yourself

<script> Element

The <script> element is used to specify client-side script, such as JavaScript in HTML documents.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page Title</title>
    <script>
        document.write("<p>Hello World!</p>") 
    </script>
</head>
<body>
	<p>Script element example</p>
</body>
</html>

Run it yourself

❮ Previous Next ❯