HTML CSS Bootstrap JavaScript jQuery MySQL PHP Data Mining

HTML Head Element

When you build a webpage, you are creating two completely different environments. The <body> contains everything the user actually sees on the screen (text, images, buttons). The <head> element, however, is the invisible engine room. It contains all the crucial information that the web browser and search engines need to process the page correctly.

The Structure of the Head

The <head> element is placed immediately after the opening <html> tag and strictly before the opening <body> tag.

<!DOCTYPE html>
<html lang="en">

<!-- The Engine Room (Invisible) -->
<head>
  <title>My Awesome Website</title>
</head>

<!-- The Viewport (Visible) -->
<body>
  <h1>Welcome to my site!</h1>
</body>

</html>

What Goes Inside the Head?

You cannot put visual elements like paragraphs or images inside the head. Instead, you use a specific set of tags designed for configuration and data linking. The most common tags are:

1. The <title> Element

This is arguably the most important tag in the entire document. It defines the text that appears on the browser tab, and it is the exact text that Google will display as the clickable link in their search results.

<title>RedoHub: Free Coding Tutorials</title>

2. The <link> Element

The link tag is used to connect your HTML document to external resource files. Its most frequent usage is linking external CSS stylesheets to make your webpage look beautiful, as well as linking your tiny Favicon (the logo on the browser tab).

<!-- Linking an external Stylesheet -->
<link rel="stylesheet" href="styles.css">

<!-- Linking a Favicon icon -->
<link rel="icon" type="image/png" href="favicon.png">

3. The <style> Element

If you do not want to link an external CSS file, you can write CSS rules directly inside the HTML document using the <style> tag. This is generally only done for very small, single-page sites.

<style>
  body { background-color: lightgrey; }
  h1 { color: blue; }
</style>

4. The <script> Element

This is used to load JavaScript into the webpage to make it interactive. You can write the JavaScript code directly between the tags, or use the src attribute to point to an external .js file.

<!-- Loading an external JS file -->
<script src="app.js" defer></script>
Important Note: The <head> tag does not contain the large visual header (like your logo or navigation bar) that sits at the top of a webpage. That visual header belongs inside a <header> tag down inside the <body>!
« Previous Lesson Next Lesson »