Choosing an Editor

Ways for creating web pages

There are three classes of editors that help in the creation of web pages written in HTML. They have varying degrees of usability and can speed up development. The only catch is that they have increasing learning curves to use them more effectively. The classifications are:

  • Plain Text editors
  • Advanced code editors
  • Integrated Development Environments

Each of these options has their own pros and cons. The end product will be the same but the duration needed for achieving that product will be different for different options.

Using Plain Text Editors

The advantage of using plain text editors is that they already come preinstalled with every system. Since they are good to go out of the box they are useful for beginners to get started as soon as possible.

Notepad
Notepad is the default editor for Windows. Do any one of the following:

  • Search for notepad in the search bar
  • Type notepad in Run
  • Open Start > Programs > Accessories > Notepad in Windows 7 or below
Notepad editor

Notepad for Windows

TextEdit
TextEdit is the default editor for Mac.

  • Open Finder > Applications > TextEdit
  • Change preferences to save the files in correct format.
    Preferences > Format > choose Plain Text
  • Under Open and Save check Ignore rich text commands in HTML files.

The obvious disadvantage of using such barebones editors is that they don’t have features that could speed up the making of web pages in HTML. Even switching to the next in class code editors could provide more useful features than sticking with plain editors.

Using Advanced Code editors

There are hundreds of code editors that provide tons of features that can help the process of creating web pages in HTML. Essential features like Syntax highlighting and Autocompletion make finding errors and churning out web pages easy. The time required for marking up of content is significantly reduced compared to plain text editors.

Some of the popular code editors with a focus on HTML are:

Atom
Atom is a free and open source text editor from Github. It supports multiple programming languages, markup languages, and stylesheet languages. This includes HTML, CSS, and JavaScript. It has features like syntax highlighting, auto code completion and plugin support.
Brackets
Brackets is a free and open source text editor from Adobe. It supports multiple programming languages, markup languages, and stylesheet languages. This includes HTML, CSS, and JavaScript. It has features like syntax highlighting, auto code completion, live preview and plugin support. It is entirely written in HTML, CSS, and JavaScript.
Sublime Text Editor
Sublime is a commercial text editor with a free version with no expiry date. It supports multiple programming languages, markup languages, and stylesheet languages. This includes HTML, CSS, and JavaScript. It has features like syntax highlighting, auto code completion, split windows for editing multiple files.
Notepad++
Notepad++ is a free and open source text editor. It supports multiple programming languages, markup languages, and stylesheet languages. This includes HTML, CSS, and JavaScript. It has features like syntax highlighting.
Visual Studio Code
Visual Studio Code is a good open source editor from Microsoft. It is a feature packed editor that can be expanded using extensions.
The only obvious disadvantage to these editors is that since they have to be downloaded separately and set up to be used.

If you are new to Windows and don’t know how to install these applications, we have some lessons on installations:
Installing Atom on Windows
Installing Brackets on Windows
Installing Visual Studio Code on Windows
Installing Notepad++ on Windows
Installing Sublime Text on Windows

Using Integrated Development Environments

IDEs are most commonly used in software development because they have all of the tools in a single place. This makes workflows more streamlined for development. They have builtin features for debugging, which means that they are able to be used for finding and fixing errors and bugs easily. Most of the tools for deploying to the web comes along with these packages. The most commonly used IDEs for web development are:

  • Aptana Studio
  • Komodo
  • IntelliJ IDEA
  • Netbeans

The disadvantage of IDEs is that they have a steep learning curve in order to utilize all of their features which can be scary for beginners. They are more suitable for complex projects involving lots of languages.

Our Recommendation

Using plain text editors while learning HTML can help in understanding concepts. After a while switching to one of the advanced editors like brackets can help in understanding the benefits of code editors. Since there is no rule that only one editor should be used, we can also install multiple editors and experiment with them.