Add DOCTYPE to Basic HTML Webpage to Change it to HTML 5 Page
Edited by Grimm, Rushell, Eng
You're watching VisiHow. In this tutorial, we are going to show you how to add the proper DOCTYPE to make your basic HTML document become an HTML 5 document.
To get started, we need to open Notepad, which is down on the taskbar. It's a little blue notepad. If the Notepad icon is not pinned to the taskbar, search for a tutorial on VisiHow to find out how to open it.
Let's give the Notepad icon a single click to open it.
The grayish green color at the top of the "Notepad" window indicates that it is the active window.
If we click on the desktop outside of the window, it changes to a different color, which means it is no longer the active window.
For now, click back on the "Notepad" window to make it the active window.
We're looking for our "visi.html" file, which is on the desktop outside of the "Notepad" window. We when click on that file, we are no longer in the active window.
Now we're going to left click on the "visi.html" file icon and hold down.
Then we'll drag that file over into the "Notepad" window.
Once inside the window, the cursor will change to a plus icon. This means we're going to paste something into this window.
As we lift our finger off of the left mouse button, our basic HTML page code appears in the window. Now, it appears that we can hit ENTER and begin editing our file.
However, when we do hit ENTER, a web browser pops up! This happened because Notepad was not our active window.
Let's close the web browser by clicking on the white "x" in the red box in the top right-hand corner of the window.
Now, click anywhere inside the "Notepad" window to make it the active window. We'll know it is active because the top will have changed color. This is important because sometimes we might have a preview page open while we're editing a website. We could hit ENTER at the wrong time, and the page will refresh or load something that we were not wanting. Therefore, it's usually good policy to make sure we're in the right window.
Now that "Notepad" is our active window, we're going to hit ENTER one time.
Go up to that top line and type "<!DOCTYPE". This tells the browser immediately what kind of document this is. There are PHP documents, ASP documents, HTML 4 documents, and all kinds of different standards we could draw there. Most people have a misconception that it needs to be in capital letters; however, it does not. There are just different ways of coding, but it works the same way.
After "<!DOCTYPE", type a space and then type "html" and close it up. This is now a properly formatted HTML 5 document because this is the only doctype for HTML 5. HTML 4 had a bunch of different types, but thankfully with HTML 5, there's just one.
When we're done, we'll click on "File" on the menu at the top, and then click on "Save".
Go up to the upper right-hand side and close the window. That saves the file to the same name, "visi.html". Now, we've updated our page.
We can double click on the page on the desktop, and it will open up the document in a web browser.
Nothing has changed on our page, other than the fact that we now have the proper doctype.
Let's go up and click on the red box with the white "x" to close the window.
This concludes our tutorial on how to create the proper doctype to transform a regular HTML document into an HTML 5 document. We've now just created an HTML 5 document. Thanks for watching VisiHow. Give us your questions or comments in the section below and let us know what else you need help with, and we'll help you out.
Video: Add DOCTYPE to Basic HTML Webpage to Change it to HTML 5 Page
Recent edits by: Rushell, Grimm