Head Section Elements in HTML

<!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="UTF-8">
         <title></title>
       </head>
       <body>
         
       </body>
     </html>

From the above HTML, the snippet shows that the head Section elements in HTML are inserted right after the HTML document declaration and HTML tag, followed by the body tag. This is because the head element is a container for other tags that you'll find out as you keep reading this article. Every tag nested in the head section elements in HTML performs a vital role that affects the overall layout of the HTML document on the webpage.

Head Section Elements in HTML

To give a short, crisp definition, the HTML head element is a container for labeled data elements or tags.

The following is a list of tags that can be nested into the HTML head element:

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

Head Section Elements in HTML '<title>' TAG

You can't ignore, scrap out, or even trash the <title> tag in your head section elements in HTML documents. Search Engine Optimization is a technique the internet uses to crawl a website, read the various contents on a website, and, using the algorithm, is able to either rank a website higher or not. As a result of SEO, the HTML <title> tag has made it easier for individuals to be able to tell the algorithm what the current page is all about.

After writing your code, when you run it, you'll see that the page title will be displayed on the browser's toolbar, an indication that the Google algorithm will be able to crawl your website to know the content of the current web page.

So, keep your page titles straight to the point and not more than 8 words in the head section elements in HTML.

Now that you understand the basis of the HTML Header section. You can see how Headings are better formatted

Here is an example;

<!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>THE HTML HEAD ELEMENT</title>
     </head>
     <body>
       <pre>i know i can
be what i wanna be....
</pre>
     </body>
     </html>
 </body>
 </html>

Head Section Elements in HTML <style> TAG

The HTML <style> tag houses internal CSS properties and their values. This tag is included in the head element to style a single HTML page. You can familiarise yourself with basic tags used around HTML documents

Here is an example;

<!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>THE HTML HEAD ELEMENT</title>
         <style>
          body {background-color: grey;}
          h2 {color: green;}
         </style>
     </head>
     <body>
     <h2>Hello, World!</h2>
     <p>Let me tell you a programming joke :)</p>
      </div>
     </body>
     </html>
 </body>
 </html>

Head Section Elements in HTML <meta> TAG

The <meta> tag is essential for search engines and other web services to rank your website higher. The meta tag specifies the character set, page description, authors, keywords used, viewport, and other metadata.

Defining Character Set

The default character set used by all developers worldwide has been set to UTF-8. This binary encoding can recognize and translate any character and symbol.

<meta charset ="UTF-8">

Adding Page Description

The page description is also necessary for the search engine to be able to rank you higher.

<meta name="description" content="HTML Tutorials">

Adding Keywords

<meta name="keywords" content="HTML, Head Element">

Adding The Author

<meta name="author" content="HubToLearn">

To Refresh Document Every 30 seconds

<meta http-equiv="refresh" content="30; url=https://www.hubtolearn.com">

Setting The Viewport

The viewport determines how a web page should appear according to the size and width of various devices. It is essential to set the viewport to one that would allow different devices to view a web page without missing out on anything.

Here is the viewport syntax:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width tells the browser to adjust the web page to fit the device width being used.
  • initial-scale=1.0 sets the zoom level as soon as the web page loads.

Here is an example of a website without a viewport: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="HTML Tutorials">
  <meta name="keywords" content="HTML, Head element">
  <meta name="author" content="HubToLearn ">
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut   
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation   
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel   
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu   
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis   
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.  
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat  
facer possim assum.  
</p>
</body>
</html>

Here is an example of a website with a viewport

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut   
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation   
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel   
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu   
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis   
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.  
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat  
facer possim assum.  
</p>
</body>
</html>

HTML <link> TAG

The HTML link tag is specially used for linking the HTML document to an external stylesheet. To link to the stylesheet, the link uses two attributes: the rel and href attributes.

The rel attribute, meaning relationship, has a value on the stylesheet, while the href attribute links the path to the stylesheet. Have you wondered how links are well formatted and designed across HTML pages? Check them out here

Here is an example:

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

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

The link tag is also used to link to the favicon in head section elements in HTML, a contraction of the word "favorite icon," of a website. 

<link rel="icon" href="favicon.ico">

HTML <script> TAG

The script tag defines the client-side JavaScript. 

<!DOCTYPE html>
<html>
<head>
  <title>HEAD ELEMENT</title>
  <script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
  </script>
</head>
<body>

<h1>HTML5 HEAD ELEMENT</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

HTML <base> TAG

The base tag specifies the base URL for all relative URLs on a page. The base occurs once on the Head Section Elements in HTML web page.

Here is an example:

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.hubtolearn.com" target="_blank">
</head>
<body>
<h1>The base element</h1>
</body>
</html>