HTML Head

By | January 14, 2020

There is definitely a head of any web site, let us see how this head is written in HTML. To write the HTML head, first <head> tag is written which is written inside <html> tags and it is written before the <body> tag. HTML head part contains meta data, this information can be more or less, it depends on us, in a web site, the head part of the HTML has an important role.

HTML elements such as <style>,<script>,<meta>,<base>,<title> and <link> are used in the head part of the HTML, inside the HTML head part.

HTML <title> Element:-

There is a title of any website or web page, which is placed in the head tag of HTML.

<head>
<title>Site Title</title>
</head>

The title of any document can be only one and it should always be kept inside the head tag. We cannot place any other tags of HTML inside the title.

Title shows a title for search engine results. It provides a title for the page. The title of any web site or document should be a visitor title. Let us understand by an example how the title shows in the web site.

Example:-


<!DOCTYPE html>
<html>

<head>
<title>The Site Title</title>	
</head>

<body>
<p>The Content............</p>
</body>

</html>

Output:-

title

We see at the top of the title page. A good title visitor should be short so that the search engine can catch it quickly. The length of an appropriate title should be less than 60 or 70 characters.

HTML base Element:-

The <base> element displays the base for all URLs present in the page.

Example:-


<!DOCTYPE html>
<html>

<head>
<title>The Site Title</title>	
<base href="https://learnhtmlcoding.com" target="_blank">
</head>

<body>
<p><a href="https://learnhtmlcoding.com">HTML base Element</a></p>
</body>

</html>

HTML style Element:-

The style is used to style the HTML which is written in the head.

Example:-


<!DOCTYPE html>
<html>
<head>
<style>
	h1{
		background: black;
		color:white;
		padding: 10px;
	}
    p{
    	font-style: italic;
    }
</style>
</head>

<body>

<h1>The style Element</h1>
<p>Lorem ipsum dolor sit amet.</p>

</body>
</html>

Output:-

title

HTML link Element:-

If you want to add an external document to the current document, use the link or you can say that the link establishes a connection between the current and external document. For example, if we do not want to install the style head tag, then we create a separate style file and add its link to the head, in this way.


<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="style.css">
</head>

<body>

<h1>The style Element</h1>
<p>Lorem ipsum dolor sit amet.</p>

</body>
</html>

Output:-

title

HTML meta Element:-

Meta element provides metadata for HTML documents.metadata is used by search engines.

Example:-


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="HTML,CSS,javaScript">
<meta name="description" content="This content">
<meta name="author" content="Michael">
</head>

<body>

<h1>HTML meta Element</h1>
<p>Lorem ipsum dolor sit amet.</p>

</body>
</html>

HTML script Element:-

The HTML <script> tag is the one in which JavaScript is added. <script> tags are used to describe client-side JavaScript.


<head>
<title>Add javaScript</title>
<script>
	document.write("Hello World");
</script>
</head>
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *