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.

Steps

  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.
    Advertisement
    Was this step helpful? Yes | No| I need help
  2. 2
    Let's give the Notepad icon a single click to open it
    .
    Advertisement
    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

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

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

VisiHow welcomes all comments. If you do not want to be anonymous, register or log in. It is free.

Article Info

Categories : Software

Recent edits by: Rushell, Grimm

Share this Article:

Thanks to all authors for creating a page that has been read 228 times.

x

Thank Our Volunteer Authors.

Would you like to give back to the community by fixing a spelling mistake? Yes | No