HTML - The Head Element

❮ Previous Home Next ❯

The head part which is represented by HTML <head> tag.

The <head> tag is a container of various important tags like <title>, <meta>, <link>, <base>, <style>, and <script> tags.




The HTML <head> Element

The <head> element is a container for metadata (data about data).

It is placed between the <html> tag and the <body> tag.

The HTML metadata is data about the HTML document.

Note: Metadata is not displayed.




The HTML <title> Element

The <title> element encloses the title of an HTML document.

It must occur within a document’s <head> element and must be present in all valid documents.

There should be only a single occurrence of this element. Meaningful titles are very important because they are used for bookmarking a page, are occasionally used by browsers to label locally saved pages, and are often used by search engines attempting to index the document.

Notes:

Tips:

Example

<!DOCTYPE html>
<html>
<head>
	<title>Title of the document</title>
</head>
<body>
	<h1>Heading of the document</h1>
	<p>Paragraph of the document</p>
</body>
</html>



The HTML <meta> Element

The <meta> element specifies general information about a document that can be used in document indexing.

It also allows a document to define fields in the HTTP response header when it is sent from the server.

Example

<head>
	<meta charset="UTF-8">
	<meta name="language" content="EN">
	<meta name="description" content="add up to 160 characters">
	<meta name="keywords" content="your, keywords">
	<meta name="robots" content="index, follow">
	<meta name="copyright"content="company">
	<meta name="author" content="John Doe, [email protected]">
	<meta name="distribution" content="Global">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>



The HTML <link> Element

The <link> empty element found in the head element specifies relationships between the current document and other documents.

Possible uses for this element include defining a relational framework for navigation and linking the document to a style sheet.

Notes:

Example

<head>
	<link rel="stylesheet" href="demo/demo.css">
</head>






The HTML <base> Element

The <base> element located within the head element specifies the base URL to be used for all relative URLs contained within a document.

Notes:

Example

<head>
	<base href="img/" target="_blank">
</head>
<body>
	<img src="image.jpeg" width="50" height="50" alt="demo">
</body>



The HTML <style> Element

The <style> element is used to add style sheet rules for a document. This element should be found only in the head element.

Style information also can be specified in external style sheets as defined by a <link> tag.

Style information can also be associated with a particular element using the styleattribute (inline styling).

Example

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
	background: tomato;
}
h1 {
	color: white;
}
p {
	font-family: monospace;
}
</style>
</head>
<body>

<h1>The style element</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</body>
</html>



The HTML <script> Element

The <script> element contains statements in a scripting language for client-side processing.

Scripting statements can either be included inline or loaded from an external file.

Notes:

Example

<script>
	document.write("Hello World!");
</script>



A complete list of all HTML tags, see HTML Tag Reference.

❮ Previous Home Next ❯