Add the Head and Title Attributes to a Properly Formed HTML5 Document
Edited by Grimm, Amanda, Eng
3 Parts:
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
- 1On 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.Scroll down to the taskbar and find the Notepad application.
- 2We have one called "visi.html".On the desktop, left-click and hold a ".html" file.
- 3The 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.Drag the icon over Notepad.
- 4Our 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.View the file.
- 5Place the cursor at the end of the line that reads "<html>".
- 6This 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.Create a carriage return.
- 7Anything here will show up on the web page.Look at the text between the body tags.
- 8Type "<head>".Open the head.
- 9Create one carriage return.
- 10Type "</head>".Close the head.
- 11We 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.Create a carriage return.
- 12Click "File" in the top left corner.
- 13Click "Save".
- 14Click on the file on the desktop to open it in a browser.
- 15Notice 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.View the page.
- 16Type "<title>".Open with a title tag.
- 17Type "</title>".Close the title area.
- 18Click between the two tags to place the cursor there.
- 19We 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.Type in a title.
- 20Click "File".
- 21Click "Save".
- 22Click the "x" in the upper right-hand side of the window.Close Notepad.
- 23Ours is set to launch in Firefox.Double-click the file on the desktop.
- 24It 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.Look at the name on the tab.
- 25Click the plus sign directly to the right to open a new tab.
- 26Let's go to VisiHow for this example. We will type, "VisiHow.com".Go to any web page.
- 27It says, "VisiHow - See it. Do It."Note that VisiHow also has a title tag.
- 28Click through a confirmation to close all tabs if one appears.Click the "x" in the top right corner to close the window.
- 29If 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.This concludes our tutorial on adding the head and body tag to a properly formed HTML5 document.
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
