Video icon 64
Learn to code with practical video courses from Tuts+. Start your free trial today.
Advertisement

Quick Tip: Configure TextEdit for Coding HTML

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

If, like me, you are starting to get into HTML and web design, you may feel a bit lost when it comes to choosing an HTML editor. You may be a bit apprehensive to spend money on a coding app if you're brand new to HTML and are still getting your feet wet. Luckily, OS X comes with with a great HTML editor built in. Let's have a look at how you can set up TextEdit to be a basic HTML editor.


What is TextEdit?

Like the name suggests, TextEdit is a basic text editor that ships with your Mac as part of the bundled apps, along with Safari, the iLife Suite, and many more. While TextEdit is mainly meant to get you up and running with being able to write basic text, with just a few changes to the preferences you can turn TextEdit into a basic HTML editor, and you don't need to invest any more than you already have on your Mac.

If you try to open an HTML file inside of TextEdit as is, you will see that TextEdit is actually rendering out the file as it would look inside a web browser. That is to say, TextEdit is reading the HTML tags for the text as well as the CSS formatting for those tags and showing you the resulting formatted page.

Rendered HTML Code in TextEdit
Rendered HTML Code in TextEdit

This is good for seeing what the page would look like, but to be able to actually work with and edit the HTML code, we need to tell TextEdit to not render the HTML tags and to show us the raw code.


TextEdit's Preferences

If you go to TextEdit's preferences by going to TextEdit > Preferences you will see all of the available options. There are two main tabs at the top, New Document and Open and Save.

The first preference we need to change is under the New Document tab, Under Format. You want to set the format to Plain Text by checking the check box.

Setting The Format To Plain Text Will Prevent you From Accidentally Adding Rich Text Formatting To Your HTML Code.
Setting the format to plain text will prevent you from accidentally adding rich text formatting to your HTML code.

HTML, Hyper Text Markup Language, is written in plain text format. HTML code doesn't have any rich text formatting like bold or italic characters. Checking this will tell TextEdit to just use plain text so you don't accidentally add any rich text formatting to the code.

Next, under the Open and Save tab, under When Opening a File, check the box for "Display HTML files as HTML code instead of formatted text".

TextEdit Will Now Show You The HRML Code Instead Of Rendering The Code.
TextEdit will now show you the HTML code instead of rendering the web page.

This will force TextEdit to show you the actually HTML code instead of rendering the page and showing you the final format like when we opened the HMTL file a second ago.

Those are the changes to make, now you just need to be sure to quit TextEdit and relaunch for the preference changes to take effect.


Editing HTML in TextEdit

When you re-launch TextEdit, you'll notice that the formatting bar is gone from the top of the interface. This lets you know that you are only using basic, un-formatted text.

If we open the same file as before, you'll see that we are looking at the actual HTML code instead of the rendered code.

TextEdit Is Now Set Up For Basic HTML Code Editing
TextEdit is now set up For basic HTML code editing.

To create a new HTML file, you make a new document like normal. However, when you save the file you need to add ".html" to the end. TextEdit will ask you if you want to use that file extension. Click "Yes" and you've created an HTML file.


Conclusion

TextEdit is a great basic HTML editor, but you can outgrow it pretty quick depending on how fast you're advancing. Other HTML editors offer up features like auto completing and closing of your HTML tags, HTML tag error reporting, as well as a host of other helpful features you won't get in TextEdit.

That being said, for the price, which is free with any Mac purchase, TextEdit is the quickest way to get up and running with HTML editing and web design and often a good way for even experienced professionals to make a quick change to something.

Advertisement