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.
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.
On the desktop, left-click and hold a ".html" file.
We have one called "visi.html".
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.
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.
Place the cursor at the end of the line that reads "<html>".
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.
Look at the text between the body tags.
Anything here will show up on the web page.
Open the head.
Create one carriage return.
Close the head.
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.
Click "File" in the top left corner.
Click on the file on the desktop to open it in a browser.
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.
Open with a title tag.
Close the title area.
Click between the two tags to place the cursor there.
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.
Click the "x" in the upper right-hand side of the window.
Double-click the file on the desktop.
Ours is set to launch in Firefox.
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.
Click the plus sign directly to the right to open a new tab.
Go to any web page.
Let's go to VisiHow for this example. We will type, "VisiHow.com".
Note that VisiHow also has a title tag.
It says, "VisiHow - See it. Do It."
Click the "x" in the top right corner to close the window.
Click through a confirmation to close all tabs if one appears.
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.
Video: Add the Head and Title Attributes to a Properly Formed HTML5 Document
Recent edits by: Amanda, Grimm