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"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
</head>
 
<body>
 
     <p>… Your HTML content here …</p>
 
</body>
</html>

However, opening the file with vim showed this mess:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <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}
  </style>
</head>
<body>
<p class="p1">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"</p>
<p class="p1"><span class="Apple-converted-space">        </span>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</p>
<p class="p1">&lt;html xmlns="http://www.w3.org/1999/xhtml"&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>
</body>
</html>

Alternate Solutions

Use a legit text editor like Text Wrangler or BBedit.