In the HTML Introduction you saw the skeleton of a web page. Now it is time to build one on your own computer. In this lesson you will compare a few HTML editors, pick one, save a real HTML file, open it in your browser, and learn three habits that will save you hours later: commenting, inspecting and validating.
What are HTML editors?
HTML files are plain text, so any program that saves plain text can create them. Windows Notepad and macOS TextEdit both work in a pinch. However, a proper code editor makes life much easier. It colours your code so tags stand out, closes tags for you, indents automatically and highlights mistakes.
| Editor | Good for | Notes |
|---|---|---|
| Visual Studio Code | Most learners and professionals | Free, runs on Windows, macOS and Linux, huge extension library |
| Notepad (Windows) | Quick experiments | Built in, but no colours or auto-complete |
| TextEdit (macOS) | Quick experiments | Switch to Format → Make Plain Text first, otherwise it saves rich text |
| Online playgrounds | Trying ideas without saving files | The Try it Yourself editor on this site works the same way |
Tip: Word processors such as Microsoft Word or Google Docs are not HTML editors. They add hidden formatting and smart quotes that break your code. Always use a plain-text or code editor.
Creating your first page, step by step
- Create a folder for your project, for example
my-website, somewhere easy to find such as your Documents folder. - Open your editor and choose File → Open Folder (in VS Code) to open that folder.
- Create a new file and name it
index.html. The nameindexis special: web servers show it automatically when someone visits a folder. - Type (do not paste) the code from the example below. Typing helps you remember the structure.
- Save the file with Ctrl + S on Windows or Cmd + S on Mac.
- Find the file in your file manager and double-click it. It opens in your default browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kavya's Recipes</title>
</head>
<body>
<!-- Main heading of the page -->
<h1>Kavya's Recipes</h1>
<p>Simple South Indian dishes you can cook at home.</p>
<h2>Today's recipe: Lemon Rice</h2>
<p>Ready in 20 minutes. Serves 2 people.</p>
<!-- TODO: add the ingredients list later -->
</body>
</html>Every time you change the file, save it and press F5 (or Cmd + R) in the browser to reload. Seeing your change appear is the basic loop of web development: edit, save, refresh.
Naming files and folders
Web addresses are built from file and folder names, so name them carefully from the start:
- Use lowercase letters only:
about.html, notAbout.HTML. Many web servers treat upper and lower case as different files. - Avoid spaces. Use hyphens instead:
contact-us.html. Spaces turn into%20in addresses and are easy to mistype. - Always end HTML files with
.html. If your operating system hides file extensions, turn them on so you do not end up withindex.html.txt.
HTML comments
Anything between <!-- and --> is a comment. The browser ignores it, so comments are perfect for notes to yourself or your team, such as reminders or explanations of tricky parts. You can see two comments in the example above.
Watch out: Comments are hidden on the page but not secret. Anyone can read them by viewing the page source, so never put passwords or private notes in an HTML comment.
Whitespace and line breaks
Beginners are often surprised that pressing Enter several times in the code does not create empty lines on the page. In normal text, the browser collapses any run of spaces, tabs and new lines into a single space. Structure comes from elements, not from the way you space your code. Try the example below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Whitespace demo</title>
</head>
<body>
<p>This sentence has lots
of extra
spaces and line breaks in the code.</p>
<p>But the browser shows it as one tidy line.</p>
</body>
</html>This is good news: you can indent your code neatly so it is easy to read, without affecting what visitors see. Use two or four spaces per level of nesting and stay consistent.
Viewing source and using DevTools
Every browser lets you see the HTML behind any page. Right-click and choose View page source, or press Ctrl + U. Reading other people’s markup is a great way to learn.
For more detail, open the browser’s Developer Tools with F12 or Ctrl + Shift + I (Cmd + Option + I on Mac). The Elements (or Inspector) panel shows the live DOM tree. Hover over an element in the panel and it is highlighted on the page. You can even edit text there to test ideas, although those edits disappear when you reload.
Checking your code with a validator
Because browsers quietly fix many mistakes, broken HTML can look fine at first. The free W3C Markup Validation Service reads your code and lists real errors, such as a missing closing tag or an attribute in the wrong place. Paste your code into the “Validate by Direct Input” tab and fix anything it reports. Making this a habit now will make you a more careful developer.
With your editor ready, the next lesson, HTML Elements and Attributes, looks closely at the building blocks you have just been typing.
Further reading
- developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software
- developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files
- developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools
- html.spec.whatwg.org/multipage/syntax.html#comments
- validator.w3.org