You’re learning web development and, right now, you’re creating your first HTML documents (if not the first). But for some reason you can’t put your finger on, your HTML document just doesn’t seem to “work”.
On the one hand, an HTML document doesn’t need much to “work.” It’s a text file written in the HTML syntax that you open in the browser and view as a web page. Every web page on the Internet is an HTML document.
On the other hand, many things can go wrong when creating and editing HTML documents for the first time that you don’t necessarily know how to fix yet—at least not until you’ve experienced them at least once or twice.
So we wrote this checklist to help you out.
When your HTML code doesn’t seem to work, check that:
- You’re using the right kind of text editor
- You’ve saved the file with the .html extension
- Your HTML markup is structured and formatted correctly
- You’re viewing it in a browser or code editor
Read on below for the details.
The Text Editor
If you’re just getting into web development and you’re writing code for the first time, you may be using the wrong text editor to create your websites.
Although Google Docs and Microsoft Word are the two best text editors, they’re not great options for creating and editing HTML files. Use Notepad, TextEdit, or a code editor instead. (Or check out our roundup of the best code editors for Windows and for Mac!)
Experienced developers may laugh at this—but I’ve seen it happen to beginners because everyone assumes you know exactly what software you should use, so they don’t talk about it.
The File Extension
How you save your HTML document is just as important as the code editor you use to edit it.
If your HTML document isn’t working and you’re having a hard time figuring out why, check the file extension you saved it with. It should end in .html, and not .txt, .doc, or .docx.
This is yet another one of those things that are simply assumed to be known in web development courses, so teachers forget to talk about it at all. Well, it isn’t surprising that many beginners get stuck with it!
The HTML Markup
At a minimum, an HTML document should have:
- The
<!doctype html>doctype declaration - The
<html>tag with the<head>and<body>tag nested inside
So fire up your code editor, open the HTML document in question, and make sure that, in its simplest form, your HTML code looks like the code sample below.
<!doctype html>
<html>
<head>
<!-- Head content goes here -->
</head>
<body>
<!-- Body content goes here -->
</body>
</html>As a general rule, the <head> tag is for meta tags, style sheets, and scripts, which affect what the web page looks like and how it behaves but remain invisible to the user, while the <body> tag is for the content of the web page visible to the user.
You can read more about the header and the body elements in an HTML document at our favorite HTML reference, MDN Web Docs.
Note: If your HTML document does look like this, run it through the W3C validator and see what errors show up.
The Browser
Remember that there are two ways to “see” an HTML document: you can preview it in your web browser and you can edit it in your code editor.
To see an HTML document from the user’s perspective, open it in your web browser. To make changes to your HTML document, open it in a code editor.
Learn more: How to Preview an HTML File
In Conclusion
If you can’t get your HTML file to work, try one of the four fixes proposed in this article. Make sure that you’re using a code editor and saving your file with the .html extension. In addition to that, ensure that your HTML markup is correct and you’re previewing it in a browser.
