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

Edited by Grimm, Amanda, Eng

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.

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.
    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".
    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.
    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.
    Was this step helpful? Yes | No| I need help
  5. 5
    Place the cursor at the end of the line that reads "<html>"
    .
    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.
    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.
    Was this step helpful? Yes | No| I need help
  8. 8
    Open the head
    .
    Type "<head>".
    Was this step helpful? Yes | No| I need help
  9. 9
    Create one carriage return
    .
    Was this step helpful? Yes | No| I need help
  10. 10
    Close the head
    .
    Type "</head>".
    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.
    Was this step helpful? Yes | No| I need help
  12. 12
    Click "File" in the top left corner
    .
    Was this step helpful? Yes | No| I need help
  13. 13
    Click "Save"
    .
    Was this step helpful? Yes | No| I need help
  14. 14
    Click on the file on the desktop to open it in a browser
    .
    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.
    Was this step helpful? Yes | No| I need help
  16. 16
    Open with a title tag
    .
    Type "<title>".
    Was this step helpful? Yes | No| I need help
  17. 17
    Close the title area
    .
    Type "</title>".
    Was this step helpful? Yes | No| I need help
  18. 18
    Click between the two tags to place the cursor there
    .
    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.
    Was this step helpful? Yes | No| I need help
  20. 20
    Click "File"
    .
    Was this step helpful? Yes | No| I need help
  21. 21
    Click "Save"
    .
    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.
    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.
    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.
    Was this step helpful? Yes | No| I need help
  25. 25
    Click the plus sign directly to the right to open a new tab
    .
    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".
    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."
    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.
    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

VisiHow welcomes all comments. If you do not want to be anonymous, register or log in. It is free.

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