HTML - The Head Element

In HTML, the <head> element is a container that holds metadata about the HTML document. It is a crucial part of the document structure and provides information such as the document's title, character encoding, linked stylesheets, scripts, and other metadata that is not directly visible to the user when viewing the page.

The <head> element is typically placed within the <html> element, and it precedes the <body> element. Here's a basic example of an HTML document structure with a <head> element:

Example

<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
</head>
vbody>

The content of the document......

</body>
</html>

You can click on above box to edit the code and run again.

Output

A Meaningful Page Title

The content of the body element is displayed in the browser window.

The content of the title element is displayed in the browser tab, in favorites and in search-engine results.

The HTML <style> Element The <style> element is used to define style information for a single HTML page:

Example


<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

You can click on above box to edit the code and run again.

Output

The HTML <link> Element

The element defines the relationship between the current document and an external resource.

The <link> tag is most often used to link to external style sheets:

Example

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

You can click on above box to edit the code and run again.

Output

The HTML <meta> Element

The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.

The metadata will not be displayed on the page, but is used by browsers (how to display content or reload page), by search engines (keywords), and other web services.

Example

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

You can click on above box to edit the code and run again.