A Step-by-Step Gide to Setting a Title in HTML

PDF download Download Article
A simple walkthrough for giving your HTML code a title
PDF download Download Article

Every web page needs a title. Why doesn't yours? One of the major tag pairs in HTML is the <title></title> tags; the title tag affects several functions of websites, from the default bookmark titles through to flashing words drawing your attention back to the site, even when in a different tab.

Things You Should Know

  • Create your HTML in a program like Atom, Brackets, TextEdit, or Notepad++.
  • Add the <title>Something</title> Title Tag to your code.
  • Change "Something" to the title you want and save the file.
Part 1
Part 1 of 3:

Creating the HTML Layout

PDF download Download Article
  1. 1
    Open a text editing program (or IDE) such as Atom, Brackets, or even TextEdit or Notepad++.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/30\/Title-tag-html.jpg\/460px-Title-tag-html.jpg","bigUrl":"\/images\/thumb\/3\/30\/Title-tag-html.jpg\/728px-Title-tag-html.jpg","smallWidth":460,"smallHeight":227,"bigWidth":728,"bigHeight":359,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    Using the <html> tags, create a .html file with either tag on a new line. Make sure to close the tag with </html> .
    Advertisement
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f6\/Title-tag-head.jpg\/460px-Title-tag-head.jpg","bigUrl":"\/images\/thumb\/f\/f6\/Title-tag-head.jpg\/728px-Title-tag-head.jpg","smallWidth":460,"smallHeight":227,"bigWidth":728,"bigHeight":359,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    Placing the <head> tags in between the <html> tags, define the head (metadata section) section. Make sure to close the tag with </head> .
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d0\/Title-tag-content.jpg\/460px-Title-tag-content.jpg","bigUrl":"\/images\/thumb\/d\/d0\/Title-tag-content.jpg\/728px-Title-tag-content.jpg","smallWidth":460,"smallHeight":227,"bigWidth":728,"bigHeight":359,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    Below the closing </head> tag and above the closing </html> tag, add the <body> (content section) tags. Make sure to close the tag with </body> .
    • Optionally, add some 'test' code in the body (or content) section to make sure that you've coded it correctly. If the content shows, it means that the code is parsing (loading). If not, it means that you may have made a typo or some other thing that is not letting it load.
    5. Advertisement
Part 2
Part 2 of 3:

Adding the Title Tag

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d4\/Title-tag-title-content.jpg\/460px-Title-tag-title-content.jpg","bigUrl":"\/images\/thumb\/d\/d4\/Title-tag-title-content.jpg\/728px-Title-tag-title-content.jpg","smallWidth":460,"smallHeight":227,"bigWidth":728,"bigHeight":359,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    • Make sure to close the tag with </title> . These two tags can be on the same line. In between the starting and closing title tags, write what you want your title to say.
Part 3
Part 3 of 3:

Testing the Code

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/85\/Title-tag-save.jpg\/460px-Title-tag-save.jpg","bigUrl":"\/images\/thumb\/8\/85\/Title-tag-save.jpg\/713px-Title-tag-save.jpg","smallWidth":460,"smallHeight":288,"bigWidth":713,"bigHeight":447,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    Name your file as something.html , replacing something with what you wish. Remember that the index.html file is the 'home' or 'landing' page of your website.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2b\/Title-tag-open.jpg\/460px-Title-tag-open.jpg","bigUrl":"\/images\/thumb\/2\/2b\/Title-tag-open.jpg\/706px-Title-tag-open.jpg","smallWidth":460,"smallHeight":247,"bigWidth":706,"bigHeight":379,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    Browsers like Google Chrome, or Mozilla Firefox are good for front-end website development. Go ahead and open your .html file. You can use short keys like ⌘ Cmd + O or Ctrl + O to open the file in most browsers.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/25\/Title-tag-view.jpg\/460px-Title-tag-view.jpg","bigUrl":"\/images\/thumb\/2\/25\/Title-tag-view.jpg\/728px-Title-tag-view.jpg","smallWidth":460,"smallHeight":227,"bigWidth":728,"bigHeight":360,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    If your desired title shows, the code has loaded and worked! If not, and it shows your filename instead (something.html), you may have made a mistake; check your code for typos then try again.
  4. 4
    Sit back and admire your work. You've just taken the first step to a fully functional website.
    5. Advertisement

Community Q&A

Search
Add New Question
  • Question
    How do I insert the first level heading?
    Shehriar Ahmad Awan
    Community Answer
    You can do it using the H1 tag.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 7 Helpful 5
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Video

      Tips

      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!

      You Might Also Like

      How to
      Learn HTML
      How to
      Create a Simple Web Page with HTML
      How to
      Change Text Color in HTML and CSS
      How to
      Use Font Color Tags in HTML
      How to
      Run a HTML File in Visual Studio Code
      4 Ways to Add a Link to a Picture
      How to
      Insert Spaces in HTML
      How to
      Run a HTML File
      How to
      Change the Button Color in HTML
      How to
      Write HTML Code
      How to
      Insert Images with HTML
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Open HTM Files
      Advertisement

      About This Article

      Thanks to all authors for creating a page that has been read 71,266 times.

      Is this article up to date?

      Advertisement