Web Page Text Editor – How to Open HTML Code in Mac TextEdit

In this article, I will show how to create, open, and edit HTML files in TextEdit.

What is TextEdit?

TextEdit is a free word processor that comes preinstalled with your Mac computer. It has been around for over 25 years and it is an easy way to open and read word files, text files and even HTML files.

How to create an HTML file in TextEdit

Go to Finder > Applications > TextEdit. Double click on TextEdit to open.

2. Click on Format and click Make Plain Text.

3. Add a basic HTML boilerplate to your file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TextEdit Demo</title>
  </head>
  <body>
    <h1>This is a demo</h1>
  </body>
</html>

4. Go to File > Save...

5. Name your file with the .html extension. That will tell the computer it is working with an HTML file. Click Save.

6. Click on Use .html

Go to that newly created file on your computer and double click to open in the browser. You should see this result:

How to open HTML documents in TextEdit

There are two ways to open an HTML file in TextEdit.

Option 1

Go to the HTML file you want to open, right click on the file, and choose TextEdit to open.

Option 2

Open TextEdit and click File > Open... You can also hover your mouse over the Open Recent option if you have opened that file recently.

TextEdit's code editing mode

There is an option in TextEdit to always display your HTML files as HTML code.

Click on TextEdit > Preferences...

2. Click on Open and Save:

3. Click the checkbox that says Display HTML files as HTML code instead of formatted text:

Now you can make changes to your HTML file and see the results in the browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TextEdit Demo</title>
  </head>
  <body>
    <h1>This is a demo</h1>
    <p>Adding more to my demo file</p>
  </body>
</html>

That is how you create, save, open and edit HTML files in TextEdit.