HTML Head

The HTML head element contains <title>, <style>, <meta>, <link>, <script>, and <base> elements.It provides extra information( metadata) to the HTML document that is useful for displaying web pages into browser.

It provides different instructions to the browser about the character sets, style sheets, scripts so that browser understands the metadata and then displays web pages in the proper way.

Note: Please keep in mind that HTML <head> elements provide metadata to the HTML document that is the most useful during displaying the web page into the browser.

The HTML link Element

The element specifies the relation between the external cascade style sheet and the current HTML page. Then, every HTML element renders according to external CSS.

General Syntax

    <link rel="stylesheet" href="style.css">

Source Code

      
        <link rel="stylesheet" href="style.css">

Source Code: Output

Code Explanation

Note: The HTML link element references an external style sheet.

The HTML style Element

The style element embedded in the HTML document. It specifies the CSS cascade rule. The style element describes that how HTML elements render in a browser.

General Syntax

    <style type="text/css">  </style>

Source Code

      
        <style type="text/css">
  h4 {
    color: orange;
    font-size: 25px;
    text-align: left;
    font-weight: 500;
  }
</style>

Source Code: Output

Code Explanation

Note:Generally, the embedded style sheet is placed inside the <head> element of the page.

Javascript:HTML With Script

The script element is used to assign internal javascript code as well as external javascript files through the src attribute script element.

General Syntax

    <script type="text/Javascript">   </script>

Source Code

      
        <script type="text/javascript">
    document.write("<h2>Hello World!</h2>") 
 </script>

Source Code: Output

Code Explanation

Note:Generally,HTML <script> element is used to place javascript internally and externally.

The HTML meta Element

The meta element provides additional information to the HTML document.

General Syntax

    <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Specifying Metadata</title>
  <!--Define the character set :-->
  <meta charset="utf-8" />
  <!--Define the character set used:-->
  <meta name="author" content="John Smith" />
  <!--Define keywords for search engines:-->
  <meta name="keywords" content="HTML, CSS, JavaScript" />
  <!--Define a description of your web page:-->
  <meta name="description" content="HTML Web tutorials" />
  <!--Define the author of a page:-->
  <meta name="author" content="John Doe" />
  <!--Refresh document every 30 seconds:-->
  <meta http-equiv="refresh" content="30" />
  <!--Assigning the viewport to make your website look good on all devices:-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

Source Code

      
        <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Specifying Metadata</title>
</head>

Code Explanation

Note:HTML <meta> tags provide different information to the browser so that loaded page looks very elegant.

HTML Title Element

The title element specifies the title of the HTML document.it is shown in the browser's title bar & search engine search result.

General Syntax

    <head>
   <title>Actual Page Title</title>
</head>

Source Code

      
        <head>
    <title>Actual Page Title</title>
</head>

Code Explanation

Setting The Viewport In HTML Document

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

This meta tag provides viewport information to the browser and then the browser adjusts the website according to the written media query for this specific device. Please note that without this meta tag, responsive features can not achieve precisely.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS