Crus4

logo

HTML Head Element


The HTML head Element is the container of lots of elements like <title>, <style>, <link>, <script>, <meta> and <base>. The <head> element is placed between the <html> and <body> tags. The <head> element is the container for metadata (information about the document). Metadata defines the document title, style, character set, scripts, and other meta information.

The HTML <title> Element

The <title> element defines the document title. The title element must contain only text, and it is displayed in the browser’s title bar. The <title> element is a required element and we must include it in all html documents.

The title element is used to:

  • display a title in the browser’s title bar.
  • provide a title for the page when it is bookmarked.
  • highlights a title for the page in Search engine results.

In an Example below let’s see how a title is placed in an HTML document.

Example

<!DOCTYPE html>
<html>
<head>
  <title> Your Title </title>
</head>
<body>

<p> Your main content/ article it is displayed in the browser window.</p>

</body>
</html>

The HTML <style> Element

The <style> element is used to define a style for an HTML Page. By adding the <style> element between the <head> tags, we can change the style of a whole HTML Page and the text color of an HTML page. In an Example below let’s see how to add <style> element between the <head> tags.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Your Title </title>
  <style>
    body {background-color: green;}
    h1 {color: orange;}
    p {color: blue;}
  </style>
</head>  
<body>

<h1>This is a Heading</h1>
</br> 
<p>This is a paragraph.</p>
  
</body>
</html>

The HTML <meta> Element

The <meta> element provides the extra information about an HTML document. Such as character set, keywords, page description, author name and viewport settings.

Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Web development tutorials">
  <meta name="keywords" content="HTML">
  <meta name="author" content="William Paul">
</head>
<body>

<p>All meta information inside the head section.</p>

</body>
</html>

Example Explained

<meta charset="UTF-8">

It defines the character set used.

<meta name="description" content="Web development tutorials">

It defines the description of a web page.

<meta name="keywords" content="Web Development">

Defines the keywords, for search engines to rank on google.

<meta name="author" content="William Paul">

Defines the author of the web page.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Setting of viewport, it makes your web page to look good on all devices.

The HTML <link> Element

The HTML <link> element defines the relationship between the current web page and an external resource. We mostly use <link> element to link to external style sheets.

Below in an Example let’s see how to link an external style sheet file to our HTML document.

Example

<!DOCTYPE html>
<html>
<head>
  <title> Your Title </title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
</body>
</html>

The HTML <base> Element

The HTML <base> element specifies the base URL for all relative links present in the document.

We can only add only one <base> element in a document.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title> base element </title>
    <base href="https://crus4.com/">
</head>
<body>
    <p><a href="web-development/webdevelopment-head.php">HTML Head</a>.</p>
</body>
</html>

The HTML <script> Element

The <script> element is used to define a scripting language like JavaScript in an HTML documents.

Example

<!DOCTYPE html>
<html>
<head>
  <title> Your Title </title>
  <script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "Greetings from crus4!";
  }
  </script>
</head>
<body>

<h1> A simple web page </h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()"> Click Here </button>

</body>
</html>


Related Articles

How to add CSS to HTML

How to add JavaScript to HTML

Boilerplate Explained

HTML Head Element – crus4

2 thoughts on “HTML Head Element – crus4

Leave a Reply

Your email address will not be published. Required fields are marked *