TL;DR – HTML head element is a section used to define meta data – the information about a page which is read by a browser but stays invisible to the user.
Introducing the HTML Head Element
The content of the HTML head section is not shown to the users of the website: instead, it gives instructions for the machine to display a webpage correctly. The content to be displayed must be placed in the HTML body section which goes after head in HTML.
Theory is great, but we recommend digging deeper!
Tags Mostly Used in HTML Head
<title> defines the HTML page title which is displayed on the web browser. HTML page title shows what your page is about and helps the users find it:
<head> <title>Document title</title> </head>
<link> tag creates a relation to external resources (stylesheets or scripts) used by the web page:
<link rel="stylesheet" type="text/css" href="style_file.css">
If you want to include a JS script in your HTML document, you must use <script> tags:
<script> document.getElementById("learn").innerHTML = "It works!"; </script>
HTML Head Tag: Useful Tips
- For some useful practice, right-click on your favorite website and select Inspect so you can see its HTML code. You will see the head in HTML can be quite massive in volume – examine what it contains.
- Some browsers change the encoding if it's defined incorrectly – however, it's not universal practice. Make sure you define the encoding as UTF-8 which includes the most characters.
- Make sure you define meta title and description clearly for your website: search engines will display them to the user in search results. Try to keep the title under 70 characters and the description under 160 characters so the text can be displayed in full.