How to Edit HTML With TextEdit

A Simple Preference Change is Needed to Edit HTML in TextEdit

Leopard Finder, Safari, TextEdit
Sören 'chucker' Kuklau/Flikr/CC BY 2.0

As the name implies, TextEdit is a text editor program that ships with all Mac computers. You can use it to write and edit HTML, but only if you know a few tricks to get it to work.

In versions of TextEdit earlier than the Mac OS X 10.7 version, you saved the HTML file as an .html file. You wrote the HTML elements like you would in any other text editor and then saved the file as .html. When you wanted to edit that file, TextEdit opened it in a rich text editor, which did not show the HTML code.

A couple of preference changes are necessary for this version so you can get your HTML code back.

In versions of TextEdit included in Mac OS X 10.7 and later, this changed. In these versions of TextEdit, files are saved in Rich Text Format by default. In just a few steps, you can turn TextEdit back into a true text editor that you can use to edit HTML files.

Editing HTML in TextEdit in OS X 10.7 and Later

Create your HTML document by writing the HTML codes in TextEdit. When you are ready to save do not choose "Web Page" in the file formats drop-down menu. If you choose this, all of your HTML codes will appear on the page.

  1. Go to the Format menu and choose “Make Plain Text.” You can also use the shortcut key Shift+Cmd+T.
  2. Save the file with an .html extension. Then you can edit the file in any other text editor as plain HTML. However, if you want to edit it in TextEdit later, you need to change TextEdit preferences.

    If you don't change the TextEdit preferences, TextEdit opens your HTML file as an RTF file, and you lose all the HTML codes. To change the preferences: 

    1. Open TextEdit and choose “Preferences” from the TextEdit menu.
    2. Switch to the “Open and Save” tab.
    3. Mark the check box in front of “Display HTML files as HTML code instead of formatted text.”

      It helps to change TextEdit's default to text files instead of rich text if you use it to edit HTML a lot. To do this, switch back to the “New Document” tab and change the Format to “plain text.”

      Editing HTML TextEdit Versions Before OS X 10.7

      1. Create an HTML document by writing the HTML codes and save the file as .html.
      2. Open Preferences in TextEdit menu bar.
      3. In the New Document pane, change the first radio button to “plain text.”
      4. In the Open and Save pane, select the “Ignore rich text commands in HTML pages” box, which is the first check box on the page.

      Close the preferences and reopen your HTML file. You can now see and edit the HTML codes.