CodesJava

Easy learning with example program codes

Head HTML

HTML <head> Tag

The HTML <head> tag acts as a container for metadata. Metadata can also be understood as data about data or data about the HTML document which is not displayed. The HTML <head> tag is placed between the <html> and <body> tag. The <head> tag is a container for the tags like <title>, <style>, <meta>, <link>, <script>, and <base> and is thus used to specify the document title, character set, styles, scripts, and other meta information.

HTML <title> Element:

The title of the document is required in all HTML documents and is thus defined by the HTML <title> element. This element thus serves the purpose of specifying the title in the browser tab, providing a title for the page when it is added to favorites and displaying a title for the page in search engine results.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Title Example</title>
</head>
<body>
<p>Hello World!!</p>
</body>
</html>

Output:

Explanation:

In the above example, we added a page title under the <head> tag.

HTML <style> Element:

To define CSS properties for a single HTML page, thus to style an HTML page, the HTML <style> element is used.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
body {background-color: crimson;}
h1 {color: white;}
</style>
</head>  
<body>
<h1>Hello World!!</h1>
</body>
</html>

Output:

Explanation:

In the above example, we added a page title and a <style> element under the <head> tag.

HTML <link> Element:

To link to external style sheets to a web page, the HTML <link> element is used.

Example:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!!</h1>
<p>How are you?</p>
</body>
</html>

style.css:

h1   {
background-color: crimson; 
color: white;
}
p    {
color: crimson;
font-size: 25px;
font-style: italic;
}

Output:

Explanation:

In the above example, we added a page title and a <link> element under the <head> tag.

HTML <meta> Element:

To specify the document title, character set, page description, keywords, author, and other meta information, the HTML <meta> element is used.

Syntax: To specify the character set used:

<meta charset="UTF-8">

Syntax: To define a page description:

<meta name="description" content="Page description">

Syntax: To specify keywords for search engines:

<meta name="keywords" content="kyeword1, kyeword2, kyeword3, kyeword4">

Syntax: To specify the author of a page:

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

Syntax: To refresh a document every 30 seconds:

<meta http-equiv="refresh" content="30">

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Examples">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Codes Java">
</head>
<body>
<p>Hello World!!</p>
</body>
</html>

Output:

Explanation:

In the above example, we added a <meta> element under the <head> tag.

Set the Viewport:

To take control over the viewport using <meta> tag, the HTML viewport method is used. The area of a webpage which is visible to the user is called Viewport. The viewport can change from device to device. It can appear smaller on mobile phones than computer screens.

Syntax:

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

Parameters:

  • <meta> viewport: Used to specify how to control the page’s dimensions and scaling.
  • width=device-width: Used to set the width of the page according to the screen-width of the respective device.
  • initial-scale=1.0: Used to set the initial zoom level for the page.

Example: Web page without the viewport <meta> tag:

<!DOCTYPE html>  
<html>  
<body>  
<p><b>Check this example on a phone or a tablet.</b></p>  
<img src="img.jpg" alt="sky" width="400" height="300">  
<p>  
Lorem ipsum dolor sit amet..... mazim placerat  
facer possim assum.  
</p>  
</body>  
</html>

Output:

Explanation:

In the above example, we have displayed the view of the page on a phone or a tablet when we don’t use the HTML Viewport method.

Example: Web page with the viewport <meta> tag:

<!DOCTYPE html>  
<html>  
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
</head>
<body>  
<p><b>Check this example on a phone or a tablet.</b></p>  
<img src="img.jpg" alt="sky" width="400" height="300">  
<p>  
Lorem ipsum dolor sit amet..... mazim placerat  
facer possim assum.  
</p>  
</body>  
</html>

Output:

Explanation:

In the above example, we have displayed the view of the page in a phone or tablet when we use the HTML Viewport method.

HTML <script> Element:

To specify a client-side script or JavaScript, the <script> element is used in HTML.

Example:

<!DOCTYPE html>  
<html>  
   <head>  
    <script type="text/javascript" src="jsexample.js"></script>  
    </head>  
     <body>  
       <form onsubmit="fun()">  
         <label>Name:</label><br>  
      <input type="text" name="name" id="111"><br><br> 
       <label>City:</label><br>    
      <input type="text" name="city"><br><br>
      <input type="submit">  
  </form>  
 </body>  
 </html>

jsexample.js:

function fun() {  
       var x = document.getElementById("111").value;  
        alert("Welcome"+" "+x+ "!!");  
    }

Output 1:

Output 2:

Explanation:

In the above example, we used an external javascript to display a pop-up message on form submission.

HTML <base> Element:

To specify the base URL and base target for all relative URLs in a page, the HTML <base> element is used.

Example:

<!DOCTYPE html>
<html>
<head>
 <base href="https://codesjava.com/wp-content/uploads/2014/08/" target="_blank">
</head>
<body>
<p>Looking for the image "java-plateform-independant-1.jpg" at "https://codesjava.com/wp-content/uploads/2014/08/java-plateform-independant-1.jpg"</p>
<img src="java-plateform-independant-1.jpg" style="width:400px">
<p>The below link will open in a new window since the base target is "_blank".</p>
<p><a href="https://www.codesjava.com">CodesJava</a></p>
</body>
</html>

Output:

Explanation:

In the above example, we are using the <base> element inside the <head> tag to search for an image at the specified location.

Omitting <html>, <head> and <body> elements:

The use of <html>, <body>, and <head> tags can be excluded in HTML 5. It is however recommended to use these tags while writing HTML codes. The <head> tag can be eliminated if not required. But omitting the <html> and <body> tags can result in a crash of the DOM or XML software. It can also produce errors in older browsers like older versions of Internet Explorer.

Example:

<!DOCTYPE html>
<title>Example</title>
<h1>Hello World!!</h1>
<p>How are you?</p>

Output:

Explanation:

In the above example, we have omitted the <html>, <body>, and <head> tags. There is no effect of eliminating these tags on the output.

Global Attributes:

The HTML GLobal attributes are supported by the HTML <head> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera and Safari.

Please follow and like us:
error
Posted in HTML   









Copyright © 2019 CodesJava DMCA.com Protection Status