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.
Contents
Introducing the HTML Head Element
Developers use the <head> tags to define meta data (such as the title of the page or related keywords). It is also where you'd place JS scripts or CSS stylesheets.
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.
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:
You'll probably also be using CSS and JavaScript while developing your site. However, such code should be written outside your main HTML document. The <link> tag creates a relation to external resources (stylesheets or scripts) used by the web page:
HTML <meta> tags are used to define meta information about the document, such as encoding, description, author, viewport mode, etc.:
<head>
<meta charset="UTF-8">
<meta name="description" content="Learn to code!">
<meta name="keywords" content="HTML, PHP, JavaScript">
<meta name="author" content="The BitDegree Team">
</head>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.