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.

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

Referencing this Article

If you need to reference this article in your work, you can copy-paste the following depending on your required format:

APA (American Psychological Association)
Add DOCTYPE to Basic HTML Webpage to Change it to HTML 5 Page. (2016). In VisiHow. Retrieved Mar 25, 2017, from http://visihow.com/Add_DOCTYPE_to_Basic_HTML_Webpage_to_Change_it_to_HTML_5_Page

Was this helpful? Yes | No | I need help

MLA (Modern Language Association) "Add DOCTYPE to Basic HTML Webpage to Change it to HTML 5 Page." VisiHow, visihow.com/Add_DOCTYPE_to_Basic_HTML_Webpage_to_Change_it_to_HTML_5_Page Accessed 25 Mar 2017.

Was this helpful? Yes | No | I need help

Chicago / Turabian VisiHow.com. "Add DOCTYPE to Basic HTML Webpage to Change it to HTML 5 Page." Accessed Mar 25, 2017. http://visihow.com/Add_DOCTYPE_to_Basic_HTML_Webpage_to_Change_it_to_HTML_5_Page.

Was this 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

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

Ask the author

Grimm
Featured Author
811 Articles Started
3,555 Article Edits
154,425 Points
Grimm is a featured author with VisiHow. Grimm has achieved the level of "Colonel" with 154,425 points. Grimm has started 811 articles (including this one) and has also made 3,555 article edits. 2,482,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: 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