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

Edited by Grimm, Rushell, Eng, Anonymous

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.

Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas229 500316.jpg

Ad

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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas17 336666.jpg
    Advertisement
    Was this step helpful? Yes | No | I need help

  2. 2
    Let's give the Notepad icon a single click to open it.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas38 503019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas46 462019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas50 664019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas56 863019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas61 044019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas67 441019.jpg
    Was this step helpful? Yes | No | I need help

  8. 8
    Then we'll drag that file over into the "Notepad" window.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas73 403019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas81 380019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas87 578019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas101 905019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas109 222019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas115 723019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas139 803019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas160 783019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas213 387019.jpg
    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".
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas230 846019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas231 828019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas241 692019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas243 792019.jpg
    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.
    Add a DOCTYPE to your basic HTML webpage to transform it into an HTML5 page.mp4-canvas248 786019.jpg
    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

    Advertisement

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

Comments

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




Grimm
Featured Author
811 Articles Started
3,555 Article Edits
154,415 Points
Grimm is a featured author with VisiHow. Grimm has achieved the level of "Colonel" with 154,415 points. Grimm has started 811 articles (including this one) and has also made 3,555 article edits. 2,073,000 people have read Grimm's article contributions.
Grimm's Message Board
Grimm: Hi, my name is Grimm.
Grimm: Can I help you with your problem about "Add DOCTYPE to Basic HTML Webpage to Change it to HTML 5 Page"?
 

Article Info

Categories : Software

Recent edits by: Eng, Rushell, Grimm

Share this Article:

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

Do you have a question not answered in this article?
Click here to ask one of the writers of this article
x

Thank Our Volunteer Authors.

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