Where to put code in an HTML file

HTML files are plain text documents that tell a web browser what to display. You add code to an HTML file by opening it in a text editor, typing or pasting the code where it belongs, and saving the file. The location matters — code in the wrong spot won't work the way you expect.

Most code goes inside the <body> tags, which is where everything visible on the page lives. Some code, like stylesheets or metadata, goes in the <head> section at the top. JavaScript can go in either place depending on what you're doing.

The basic structure of every HTML file looks like this: the opening <!DOCTYPE html> declaration at the very top, then <html> tags that wrap everything, then <head> and <body> sections inside. Your visible content goes between the opening and closing <body> tags.

Key Takeaways

  • Open your HTML file in a plain text editor like Notepad, VS Code, or Sublime Text — not a word processor like Microsoft Word.
  • Code that displays on the page goes inside the <body> tags; code that controls styling or metadata goes in the <head> section.
  • Save your file with the .html extension so the browser recognizes it as a web page.
  • After you add code and save, refresh your browser to see the changes take effect.

Opening an HTML file in a text editor

You cannot edit an HTML file in Microsoft Word or Google Docs — those programs add invisible formatting that breaks the code. You need a plain text editor that saves files without any extra formatting.

On Windows, right-click the HTML file and select "Open with" then choose Notepad. On Mac, right-click and select "Open With" then choose TextEdit, but you must go to Format menu and click "Make Plain Text" before you start editing. If you want a more powerful editor built for code, download VS Code (free, from Microsoft) or Sublime Text (free to try, $99 to keep using).

Once the file is open, you will see the raw HTML code. This is the correct view. If you see a formatted webpage instead of code, you opened it in the wrong program — close it and try again with a text editor.

Adding code inside the body section

The <body> section is where you put anything you want visitors to see: paragraphs, headings, images, links, buttons, forms. Find the line that says <body> and position your cursor after it. Press Enter to create a new line, then type or paste your code.

For example, to add a heading, you would type <h1>Welcome to my page</h1> on a new line inside the body. To add a paragraph, type <p>This is some text.</p>. Each piece of content needs an opening tag (like <p>) and a closing tag (like </p>).

Make sure your new code stays between the opening <body> tag and the closing </body> tag. If you accidentally put code after </body>, it will not display.

Adding stylesheets and scripts to the head section

The <head> section sits at the top of your HTML file, before the <body>. This is where you link to CSS stylesheets (which control colors, fonts, and layout) and add metadata like the page title.

To link a CSS file, find the <head> opening tag and add this line: <link rel="stylesheet" href="styles.css">. Replace "styles.css" with the actual name of your stylesheet file. To add a page title that appears in the browser tab, type <title>My Page Title</title> inside the head section.

JavaScript code can go in the head or at the bottom of the body, depending on when you want it to run. For most beginners, putting it at the bottom of the body (just before the closing </body> tag) is simpler because the page content loads first.

Saving your changes and viewing them in a browser

After you add code, save the file by pressing Ctrl+S (Windows) or Command+S (Mac). The file must be saved with the .html extension — if your editor tries to save it as .txt, change the filename to something like "index.html" or "mypage.html".

To see your changes, open the HTML file in a web browser. Right-click the file in your file explorer and select "Open with" then choose your browser (Chrome, Firefox, Safari, or Edge). The page will display in the browser window.

If you make more changes to the code, save the file again and then refresh the browser page (press F5 or Ctrl+R on Windows, Command+R on Mac). The browser will reload and show your updated code.

Common mistakes when adding code

The most common mistake is forgetting to close tags. Every opening tag like <p> needs a matching closing tag like </p>. If you forget the closing tag, everything after it may display incorrectly.

Another mistake is putting code in the wrong section. If you add a heading after the closing </body> tag, it will not show up. Always check that your code is between the opening and closing body tags.

Typos in tag names also break things. <p> works, but <pp> or <para> will not. If something is not displaying, check that your tag names are spelled correctly and that you used angle brackets < > not parentheses or other symbols.

Working with existing code in your file

If your HTML file already has content, you can add new code anywhere inside the body section. You can insert it before existing code, after it, or between different sections. The order matters for how things appear on the page — code higher up in the file displays higher on the page.

If you are copying code from another source, paste it carefully and check that all the tags are complete. Sometimes copied code loses its closing tags or has extra characters that break it. After pasting, save and refresh your browser to test it.

If you want to temporarily hide code without deleting it, you can wrap it in comment tags: <!-- your code here -->. The browser will ignore everything between those tags, and you can remove the comment tags later to show the code again.

Frequently Asked Questions

What text editor should I use if I don't want to download anything?

Notepad (Windows) and TextEdit (Mac) are built into every computer and work fine for small HTML files. Just remember to use TextEdit in plain text mode on Mac. For larger projects, VS Code is free to download and much easier to use than Notepad.

Can I add code to an HTML file on my phone?

Yes, but it is awkward. Download a text editor app like Jota+ (Android) or Textastic (iPhone), then open your HTML file in that app. You can edit and save the file, but testing it in a browser on a phone is harder than on a computer.

Why does my code look wrong when I open the file in the browser?

Check three things: make sure you saved the file after making changes, refresh the browser page (don't just close and reopen it), and verify that all your tags are spelled correctly and properly closed. If it still looks wrong, check your browser's developer tools by pressing F12 to see error messages.

What happens if I add code in the wrong place?

Code in the wrong location usually just will not work or will not display. If you put a heading after the closing </body> tag, it will not show. If you put a stylesheet link in the body instead of the head, it may not load. Move the code to the correct section and save again.

Do I need to close every single tag?

Yes, almost every tag needs a closing tag. The main exceptions are self-closing tags like <img>, <br>, and <input>, which do not have closing tags. When in doubt, add a closing tag — it will not hurt.