🔥 $100K Hit! Where Will Bitcoin Go Next? Find Out Live!

Code has been added to clipboard!

HTML Head Tag: Tips and Tricks for Using HTML Meta Tags

Reading time 2 min
Published Mar 27, 2019
Updated Jan 21, 2020

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

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.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

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:

Example
<head>
  <title>Document title</title>
</head>

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:

Example
<link rel="stylesheet" type="text/css" href="style_file.css">

HTML <meta> tags are used to define meta information about the document, such as encoding, description, author, viewport mode, etc.:

Example
<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:

Example
<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.