HTML Head Elements

The HTML <head> Element

HTML <head> element is a container tag and is placed before the <body> tag. The <head> element contains general information about the page, meta-information, style sheet URL and document type information.

HTML <head> tag inside elements does not display n a body part in a web browser.

HTML <head> tag contains following elements that describe the metadata: <title>, <meta>, <link>, <style>, <script>, and <base>.

HTML <head> Element Structure

<!DOCTYPE html>
<html>
<head>
  <title>Document title</title>
  <meta charset="UTF-8"/>
  <meta name="description" content="Free Web tutorials"/>
  <link rel="stylesheet" type="text/css" href="style.css"/> 
  <script type="text/javascript" src="script.js"></script> 
</head>
<body>
  <!-- Document body -->
</body>
</html>

HTML <title> Element

The HTML <title> element is used to represents the title of the HTML document and it is required in all HTML documents.

The <title> element is displayed in a browser tab. Only one <title> element allowable per document and it's required to defines within the <head> element.

<!DOCTYPE html>
<html>
<head>
  <title>Document title</title>
</head>
<body>
  <!-- Document body -->
</body>
</html>

HTML <meta> Element

HTML <meta> element is used to provide structured meta-information about a web page. It contains a variety of information about the document.

The <meta> tag is used to specify page description, keywords, and other important information. It helps to optimize the web page on the search engine. This process is known as search engine optimization (SEO).

<!DOCTYPE html>1
<html>
<head>
  <meta charset="UTF-8"/>
  <meta name="description" content="HTML meta element"/>
  <meta name="keywords" content="html, css, js"/>
  <meta name="author" content="way2tutorial"/>
</head>
<body>
  <!-- Document body -->
</body>
</html>

HTML <link> Element

HTML <link> element is used to load an external style sheet into HTML document.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
  <!-- Document body -->
</body>
</html>

HTML <style> Element

HTML <style> element is used to write CSS style to an HTML document. It contains CSS properties.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
        font-size: 15px;
        color: red;
    }
    h2 {
        font-weight: normal;
        color: #196a8e;
    }
  </style>
</head>
<body>
  <!-- Document body -->
</body>
</html>

HTML <script> Element

HTML <script> element used to defines client-side JavaScript that is specified within the document or embedded external JavaScript file through the SRC attribute.

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="script.js"></script> 
</head>
<body>
  <!-- Document body -->
</body>
</html>

HTML <base> Element

HTML <base> element specifies a base URL for all the links within a web page.

<!DOCTYPE html>
<html>
<head>
  <base href="https://way2tutorial.com/html/" target="_blank"/>
</head>
<body>
  <p>Let's get started <a href="index.php">HTML Tutorial</a></p>
</body>
</html>