Skip to content
HTML Course

Title element

Intro

There is one element that’s not in the body that’s really important, and that’s the <title> element.

The <title> element controls what text appears in the browser tab. If you look at the preview, you’ll see that the browser tab says Document, just like the title element on line 7.

<title>Document</title>

Steps

Change title element

Let’s change the element so it says Coding Course instead of Document.

<title>Coding Course</title>

Make sure you only change the text in between the tags. Don’t change the tags themselves.

Now if you look at the browser tab in the preview, you’ll see that it says Coding Course. So, any time you want to change what the browser tab says on your website, just edit the title element.

Add tagline

A common thing to do with the title element is to add some sort of tagline first and then put the name of the website. Usually a dash - or a pipe character | is used to separate the tagline from the site name (the pipe character is usually underneath your Backspace key). For this example, add the tagline Learn to code fast, a space, a |, a space, and the site name.

<title>Learn to code fast | Coding Course</title>

Check your preview one more time to make sure the text in the browser tab has been updated.

End

So that’s how you use the title element in HTML.

Final code

If you’ve followed all of the steps so far, this is the code that should be in the index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Learn to code fast | Coding Course</title>
</head>
<body>


</body>
</html>