Article Edit Discuss

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
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
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
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
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
Place the cursor at the end of the line that reads "<html>"
.

Was this step helpful? Yes | No| I need help
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
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
Open the head
.
Type "<head>".

Was this step helpful? Yes | No| I need help
9
Create one carriage return
.

Was this step helpful? Yes | No| I need help
10
Close the head
.
Type "</head>".

Was this step helpful? Yes | No| I need help
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
Click "File" in the top left corner
.

Was this step helpful? Yes | No| I need help
13
Click "Save"
.

Was this step helpful? Yes | No| I need help
14
Click on the file on the desktop to open it in a browser
.

Was this step helpful? Yes | No| I need help
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
Open with a title tag
.
Type "<title>".

Was this step helpful? Yes | No| I need help
17
Close the title area
.
Type "</title>".

Was this step helpful? Yes | No| I need help
18
Click between the two tags to place the cursor there
.

Was this step helpful? Yes | No| I need help
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
Click "File"
.

Was this step helpful? Yes | No| I need help
21
Click "Save"
.

Was this step helpful? Yes | No| I need help
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
Double-click the file on the desktop
.
Ours is set to launch in Firefox.

Was this step helpful? Yes | No| I need help
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
Click the plus sign directly to the right to open a new tab
.

Was this step helpful? Yes | No| I need help
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
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
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
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