Add the Head and Title Attributes to a Properly Formed HTML5 Document

Edited by Grimm, Amanda, Eng

3 Parts:
Steps
Video: Add the Head and Title Attributes to a Properly Formed HTML5 Document
Comments

You're watching VisiHow. In this tutorial, we are going to show you how to add the head and title attributes to a properly formed HTML5 document.

Add the head and title attributes to a properly formed HTML5 document.mp4-canvas179 949333.jpg


Steps

  1. 1
    Scroll down to the taskbar and find the Notepad application. On other systems, it may be found elsewhere. We find it easiest to keep it on the taskbar. Click to open Notepad. It will open a blank Notepad document, which is exactly what we want.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas13 876938.jpg
    Advertisement
    Was this step helpful? Yes | No| I need help
  2. 2
    On the desktop, left-click and hold a ".html" file. We have one called "visi.html".
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas29 649826.jpg
    Advertisement
    Was this step helpful? Yes | No| I need help
  3. 3
    Drag the icon over Notepad. The cursor icon now has a little plus sign with it. Lift up the finger on the left side of the mouse to release and drop the file inside of Notepad.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas41 580758.jpg
    Was this step helpful? Yes | No| I need help
  4. 4
    View the file. Our doctype, html, is there at the top. That indicates that this is the beginning of a properly formed HTML5 document. Then we have an html tag, which tells us the page is an html page. What we do not have is the head.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas50 52871.jpg
    Was this step helpful? Yes | No| I need help
  5. 5
    Place the cursor at the end of the line that reads "<html>".
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas58 512605.jpg
    Was this step helpful? Yes | No| I need help
  6. 6
    Create a carriage return. This is done by hitting the "Enter" or "Return" key, and it inserts a blank line. Now here is a fast introduction to the head. The head is what is read and processed by the browser. It forms the wrapper, or some of the outer contents of the page, which don't actually show up on the page.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas61 050591.jpg
    Was this step helpful? Yes | No| I need help
  7. 7
    Look at the text between the body tags. Anything here will show up on the web page.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas81 097434.jpg
    Was this step helpful? Yes | No| I need help
  8. 8
    Open the head. Type "<head>".
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas86 810364.jpg
    Was this step helpful? Yes | No| I need help
  9. 9
    Create one carriage return.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas87 915358.jpg
    Was this step helpful? Yes | No| I need help
  10. 10
    Close the head. Type "</head>".
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas92 077334.jpg
    Was this step helpful? Yes | No| I need help
  11. 11
    Create a carriage return. We find that closing the tag up front is good code practice. Now, no matter what happens in our document, we know that we have already closed the head tag. We won't get an error. If the head tag stays empty, that's not a problem. Let's see what it looks like right now.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas116 806153.jpg
    Was this step helpful? Yes | No| I need help
  12. 12
    Click "File" in the top left corner.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas105 964215.jpg
    Was this step helpful? Yes | No| I need help
  13. 13
    Click "Save".
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas106 978231.jpg
    Was this step helpful? Yes | No| I need help
  14. 14
    Click on the file on the desktop to open it in a browser.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas108 520222.jpg
    Was this step helpful? Yes | No| I need help
  15. 15
    View the page. Notice that the page runs. There are no problems or issues, even though our head tag is empty. Close the browser and go back to Notepad. Let's add a title.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas110 221212.jpg
    Was this step helpful? Yes | No| I need help
  16. 16
    Open with a title tag. Type "<title>".
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas119 496102.jpg
    Was this step helpful? Yes | No| I need help
  17. 17
    Close the title area. Type "</title>".
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas125 242068.jpg
    Was this step helpful? Yes | No| I need help
  18. 18
    Click between the two tags to place the cursor there.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas127 646051.jpg
    Was this step helpful? Yes | No| I need help
  19. 19
    Type in a title. We will type, "VisiHow HTML5 Tutorial". Now we have a head with our title. There are other elements we will also want to add into the title of our document. But when we're learning and making a basic page, we want to stay basic. That's what we're doing here. We've opened our head tag and we've given it a title, and then closed the head tag. Let's see what that does.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas145 138947.jpg
    Was this step helpful? Yes | No| I need help
  20. 20
    Click "File".
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas161 248847.jpg
    Was this step helpful? Yes | No| I need help
  21. 21
    Click "Save".
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas161 705865.jpg
    Was this step helpful? Yes | No| I need help
  22. 22
    Close Notepad. Click the "x" in the upper right-hand side of the window.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas164 108849.jpg
    Was this step helpful? Yes | No| I need help
  23. 23
    Double-click the file on the desktop. Ours is set to launch in Firefox.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas168 872822.jpg
    Was this step helpful? Yes | No| I need help
  24. 24
    Look at the name on the tab. It displays our title, "VisiHow HTML5 Tutorial". This will show up on every browser tab that everyone looks at. It's very important to have this title, as it's very important for SEO. Google loves this kind of thing, and so do Microsoft and Bing, they just don't have as much love to share as Google does.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas173 728793.jpg
    Was this step helpful? Yes | No| I need help
  25. 25
    Click the plus sign directly to the right to open a new tab.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas197 625631.jpg
    Was this step helpful? Yes | No| I need help
  26. 26
    Go to any web page. Let's go to VisiHow for this example. We will type, "VisiHow.com".
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas200 176636.jpg
    Was this step helpful? Yes | No| I need help
  27. 27
    Note that VisiHow also has a title tag. It says, "VisiHow - See it. Do It."
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas206 355598.jpg
    Was this step helpful? Yes | No| I need help
  28. 28
    Click the "x" in the top right corner to close the window. Click through a confirmation to close all tabs if one appears.
    Add the head and title attributes to a properly formed HTML5 document.mp4-canvas214 441529.jpg
    Was this step helpful? Yes | No| I need help
  29. 29
    This concludes our tutorial on adding the head and body tag to a properly formed HTML5 document. If you have questions, comments, or suggestions about this tutorial, or any of our other tutorials, make sure you let us know in the section below. We will get back to you as soon as possible. As ever, thanks for choosing VisiHow. Have a great day.
    Was this step helpful? Yes | No| I need help

Video: Add the Head and Title Attributes to a Properly Formed HTML5 Document

If you have problems with any of the steps in this article, please ask a question for more help, or post in the comments section below.

Comments

Article Info

Categories : Software

Recent edits by: Amanda, Grimm

Share this Article:

Thanks to all authors for creating a page that has been read 216 times.

x

Thank Our Volunteer Authors.

Would you like to give back to the community by fixing a spelling mistake? Yes | No