How to Edit HTML With TextEdit

Write and edit HTML on a Mac

Man working on an iMac
Oli Scarff / Getty Images
by Jennifer Kyrnin
A published author with extensive website creation and management skills.
Updated April 30, 2019

If you have a Mac, you don't need to download an HTML editor to write or edit HTML for a web page. The TextEdit program ships with all Mac computers. With it, and a knowledge of HTML, you can write and edit HTML code.

TextEdit, which works with files in a rich text format by default, must be in plain text mode to write or edit HTML.

If you use TextEdit in rich text mode and save an HTML document with the .html file extension when you open that file in a web browser, you see the HTML code, which isn't what you want.

To change how the HTML file displays in the browser, you change TextEdit to the plain text setting. You can do this on the fly or permanently alter the preferences if you plan to use TextEdit as your full-time code editor.

Create an HTML File in TextEdit

If you only occasionally work on HTML files, you can make the change to plain text for a single document.

  1. Open the TextEdit application on your Mac. Select File > New from the menu bar.

    Opening a new file in TextEdit
     Lifewire

  2. Select Format on the menu bar and click Make Plain Text. Confirm the plain text selection in the window that opens by clicking OK.

    On-the-fly switch to plain text mode
    Lifewire 

  3. Enter the HTML code. For example:

    A sample of HTML code
     Lifewire

  4. Click File > Save. Type a name for the file with a .html extension and choose a location to save the file.

    Save file with .html extension
     Lifewire

  5. Click Save. Confirm you want to use the .html extension in the screen that opens.

Test your work by dragging the saved file onto a browser. It should display exactly as you will see it when you publish it to the web. The example file dragged onto any browser should look like this:

Example code in Firefox browser
 Lifewire

Instruct TextEdit to Open HTML as HTML

If you see any problems with your file, reopen it in TextEdit and make any necessary edits. If you open it in TextEdit and don't see the HTML, you need to make one more preference change. You only need to do this once.

  1. Go to TextEdit > Preferences.

    Location of TextEdit Preferences
    Lifewire 

  2. Click the Open and Save tab.

    Open and Save Preferences tab
     Lifewire

  3. Put a check in the box next to Display HTML files as HTML code instead of formatted text. If you're using a version of macOS older than 10.7, this option is called Ignore rich text commands in HTML pages.

Changing the TextEdit Default Setting to Plain Text

If you plan to edit lots of HTML files with TextEdit, you might prefer to make the plain text format the default option. To do that, go to TextEdit > Preferences and open the New Document tab. Click the button next to Plain text.