HTML Head

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

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

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.

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

Source Code

          <head>
  <link rel="stylesheet" type="text/css" href="../code-support/css/tutorial/html-head/external_link.css" />
</head>

Try it now

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

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.

Source Code

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

Try it now

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.

Example

Source Code

          <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>

Try it now

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.

Example

Source Code

          <head>
  <title>HTML Page Title</title>
</head>

Try it now

Setting The Viewport In HTML Document

    
  <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

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4