Web Design with HTML and CSS

Web editors versus WYSIWYG tools

Lesson 3, Web Design Tools 39

Text editors for web design

There are several text editors with more advanced capabilities. These type of editors provide

several benefi ts that make it easier to work with code. We’ll look at some of the benefi ts here.

Code coloring
Whether you are writing a new HTML or CSS page from scratch or opening a pre-existing
page, code coloring visually separates your HTML and CSS syntax from the content on your
page. Tags that include attributes and values are assigned diff erent colors. This code coloring
makes it easier for you to locate specifi c code, and it can help you spot and correct errors.
Forgetting to add a closing bracket or a quotation mark, for example, causes content to be
colored diff erently than if tags were applied correctly. After you become accustomed to using
colored syntax, you can use the colors to quickly spot errors in HTML. Most modern text
editors also allow you to customize the color of your syntax.

Code coloring visually separates the tags from the content.

Line numbers, invisible characters, and other visual aids

Most text editors provide line numbers in documents opened for editing. Line numbers help

you orient yourself within your code and also help when collaborating with other designers

or developers. These tools also make it easier to see invisible characters such as line breaks or

carriage returns.