Skip to main content Skip to docs navigation

HTML Head

HTML Head

On this page

HTML <head> Element

<head> Defines information about the document.

Page Title

HELLO WORLD

html 
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
  <meta name="description" content="An example webpage">
  <link rel="stylesheet" href="styles.css">
</head>

<body>

<h3>HELLO WORLD</h3>

</body>
</html>

HTML <title> Element

<title> Defines the title of a document.

Page Title

Page Title

html 
<!DOCTYPE html>
<html>

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

<body>

<h3>Page Title</h3>

</body>
</html>

HTML <style> Element

<style> Defines style information for a document.

<style>
.name-h5 {
  color: red;
}
.name-p {
  color: blue;
}
</style>
Page Title

HTML Style Element

This is a Heading

This is a Paragraph

html 
<!DOCTYPE html>
<html>

<head>
<title>Page Title</title>
<style>
  .name-h5 {
    color: red;
  }
  .name-p {
    color: blue;
  }
</style>
</head>

<body>
  
<h3>HTML Style Element</h3>
<h5 class="name-h5">This is a Heading</h5>
<p class="name-p">This is a Paragraph</p>

</body>

</html>

<link> Defines the relationship between a document and an external resource.

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

HTML Link Element

This is a Heading

This is a Paragraph

html 
<!DOCTYPE html>
<html>

<head>

  <title>Page Title</title>
  
  <link rel="stylesheet" href="mystyle.css">

</head>

<body>

<h3>HTML Link Element</h3>
<h5>This is a Heading</h5>
<p>This is a Paragraph</p>
  
</body>
</html>

HTML <meta> Element

<meta> Defines metadata about an HTML document.

<meta charset="UTF-8">
<meta name="description" content="An example webpage">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Jackson">
Page Title

HTML Meta Element

html 
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
  <meta name="description" content="An example webpage">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Jackson">
  <link rel="stylesheet" href="styles.css">
</head>

<body>

<h3>HTML Meta Element</h3>

</body>
</html>

HTML <script> Element

<script> Defines a client-side script.

<script>
function functionToExecute() {
document.getElementById("exp").innerHTML = "JavaScript";
}
</script>
Page Title

This is a Heading

html 
<!DOCTYPE html>
<html>

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

<script>
function functionToExecute() {
  document.getElementById("exp").innerHTML = "JavaScript";
}
</script>

</head>

<body>

<h3 id="exp">This is a Heading</h3>
<button type="button" onclick="functionToExecute()">Click</button>

</body>
</html>