Solving .html Files Made in TextEdit Not Rendering in a Web Browser

My Problem

On a Mac (10.8), using Text Edit, if you save a document as a .html file, the file will not render in a web browser. Instead the browser displays the actual HTML.

My Solution

In TextEdit, select the Format menu and choose “Make Plain Text.” You can also use the ⇧⌘T keystroke.

Next, choose to save the document and include the .html extension in the file name. You will be able to open the .html file in a web browser and have it render properly

The Long Story

TextEdit saves a file in RTF format which includes all sorts of additional tags that are nihil ad rem to a plain rendering of HTML. For example, I created a barebones HTML document that originally looked like this within TextEdit:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
     <p>… Your HTML content here …</p>

However, opening the file with vim showed this mess:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <meta name="Generator" content="Cocoa HTML Writer">
  <meta name="CocoaVersion" content="1187.34">
  <style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px 'Courier New'; background-color: #d9e2c9}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px 'Courier New'; background-color: #d9e2c9; min-height: 16.0px}
    span.Apple-tab-span {white-space:pre}
<p class="p1">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"</p>
<p class="p1"><span class="Apple-converted-space">        </span>""&gt;</p>
<p class="p1">&lt;html xmlns=""&gt;</p>
<p class="p2"><br></p>
<p class="p1">&lt;head&gt;</p>
<p class="p1"><span class="Apple-tab-span">     </span>&lt;title&gt;An XHTML 1.0 Strict standard template&lt;/title&gt;</p>
<p class="p1"><span class="Apple-tab-span">     </span>&lt;meta http-equiv="content-type"<span class="Apple-converted-space"> </span></p>
<p class="p1"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>content="text/html;charset=utf-8" /&gt;</p>
<p class="p1">&lt;/head&gt;</p>
<p class="p2"><br></p>
<p class="p1">&lt;body&gt;</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">     </span>&lt;p&gt;… Your HTML content here …&lt;/p&gt;</p>
<p class="p2"><br></p>
<p class="p1">&lt;/body&gt;</p>
<p class="p1">&lt;/html&gt;</p>

Alternate Solutions

Use a legit text editor like Text Wrangler or BBedit.


  1. Mathew

    October 19, 2012 at 7:49 am

    Or vi 😉


  2. esacteksab

    October 19, 2012 at 8:52 am

    If not vi/vim, Sublime Text 2!


    • Wesley David

      October 19, 2012 at 9:04 am

      Ohhh, never heard of it. I’ll check it out.


Leave a Reply

Follow TheNubbyAdmin!

follow us in feedly

Raw RSS Feed:

Contact Me!

Want to hire me as a consultant? Have a job you think I might be interested in? Drop me a line:

Contact Me!

Subscribe via Email

Your email address is handled by Google FeedBurner and never spammed!

The Nubby Archives

Circle Me on Google+!

Photos from Flickr

Me on StackExchange

The IT Crowd Strava Group

%d bloggers like this: