Add DOCTYPE to Basic HTML Webpage to Change it to HTML 5 Page

3 Parts:

Steps

Video: Add DOCTYPE to Basic HTML Webpage to Change it to HTML 5 Page

Comments

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.

1. 1
   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.

   

   Was this step helpful? Yes | No| I need help
2. 2
   Let's give the Notepad icon a single click to open it

   .

   

   Was this step helpful? Yes | No| I need help
3. 3
   The grayish green color at the top of the "Notepad" window indicates that it is the active window

   .

   

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

   .

   

   Was this step helpful? Yes | No| I need help
5. 5
   For now, click back on the "Notepad" window to make it the active window

   .

   

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

   

   Was this step helpful? Yes | No| I need help
7. 7
   Now we're going to left click on the "visi.html" file icon and hold down

   .

   

   Was this step helpful? Yes | No| I need help
8. 8
   Then we'll drag that file over into the "Notepad" window

   .

   

   Was this step helpful? Yes | No| I need help
9. 9
   Once inside the window, the cursor will change to a plus icon

   .

   This means we're going to paste something into this window.

   

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

    

    Was this step helpful? Yes | No| I need help
11. 11
    However, when we do hit ENTER, a web browser pops up

    !

    This happened because Notepad was not our active window.

    

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

    .

    

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

    

    Was this step helpful? Yes | No| I need help
14. 14
    Now that "Notepad" is our active window, we're going to hit ENTER one time

    .

    

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

    

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

    

    Was this step helpful? Yes | No| I need help
17. 17
    When we're done, we'll click on "File" on the menu at the top, and then click on "Save"

    .

    

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

    

    Was this step helpful? Yes | No| I need help
19. 19
    We can double click on the page on the desktop, and it will open up the document in a web browser

    .

    

    Was this step helpful? Yes | No| I need help
20. 20
    Nothing has changed on our page, other than the fact that we now have the proper doctype

    .

    

    Was this step helpful? Yes | No| I need help
21. 21
    Let's go up and click on the red box with the white "x" to close the window

    .

    

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

    Was this step helpful? Yes | No| I need help

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