Learn How to Use an HTML Editor

Basics of an HTML Text Editor

When it comes time to learn HTML, you might be surprised at just how approachable the language is. Each document that is written in HTML is created out of natural text, meaning you can use a simple editor, such as TextEdit or Notepad, to create an entire webpage. If you have ever taught someone or been taught how to use an HTML editor, it probably involved a process with a few different steps, which might have included:

• Typing the markup into the text file.
• Saving the file.
• Opening the file in the browser to ensure that it is working properly.

Using a text editor to create webpages is a good first step for beginners. However, just because you started out using a text editor, it doesn’t mean that you should stop there. If you want to learn HTML, there are many reasons to start using a full HTML editor as soon as possible. After all, going through a coding bootcamp involves pushing yourself to learn new web developer skills!

Benefits of an HTML Editor

Using a full HTML editor can help guide you as you work on your webpages. The right HTML editor will catch your mistakes and help you navigate complicated webpages in addition to many other convenient perks.

On the other hand, a bad HTML editor can put you in a worse position than if you had stuck with a simple text editor. In fact, a bad HTML editor can cause a lot of problems if you’re trying to learn HTML. This is because a bad HTML editor can hide potential issues within your document while messing with your code.

In the past, people who were new to making webpages didn’t have many choices when it came to picking an HTML editor. Web developers could buy Adobe Dreamweaver, which tended to be unnecessarily complicated; or a less expensive shareware HTML editor, but those tended to provide unfavorable results. As another option, web developers could have used an open-source HTML editor, but those also had the potential to cause other problems. The good news is, there are many more options available today.

What to Look for in an HTML Editor

If you’re enrolled in a web development bootcamp, you don’t want to spend too much money on an HTML editor in the beginning — this is especially true if you’re just starting to learn HTML. This means that you’ll want to find a free HTML editor. A good HTML editor will work on Mac, Windows, and Linux, allowing you to work on any operating system.

Keep in mind, it’s a good idea to choose a color-coded HTML editor. A color-coded HTML editor falls under syntax highlighting, which includes other features like tag highlighting. This allows matching end or start tags to be assigned the same color automatically, helping you to separate the various tags you will be using to create your webpages.

You will also want to use an HTML editor that can spot any mistakes that you make while coding. Unlike a word processor, your HTML editor will not automatically correct your mistakes. However, you can get an HTML editor that will identify potential problems and mark them in red for you. Catching a simple mistake early on can help you avoid major issues later.

What to Avoid

It’s important to be aware of a few potential issues your HTML editor could pose. For example, you don’t want to select an HTML editor that allows you to view it like a word processor. It might look beautiful, but it typically results in disorganized and messy markup, causing you to lose control over your HTML editing. Even worse, you won’t be able to know if you’re making mistakes in your code because this type of HTML editor hides all the problems.

You should also avoid trying to learn HTML with an editor that adds extra details to your code. Sometimes these details are intended to help the HTML editor understand the document better. However, other times, these extra details are designed to work with a specific technology. If your web host does not support this technology, your webpage will not work.

Lastly, it’s a good idea to avoid using an open-source project made by a small company. If one of these small HTML editor projects dies, your webpage won’t get support, fixes for bugs or updates for new web standards. Luckily, there are plenty of reliable editors available to supplement your web developer bootcamp learning.

Brackets

Adobe created an HTML editor called Brackets. This cross-platform and lightweight HTML editor only arrived on the scene a few years ago, with hundreds of thousands of downloads since.

You will have access to many features when you use Brackets, one of the best of which is the live preview. Rather than making changes to your HTML document, saving it and putting it in the browser for viewing, you can immediately see your changes directly in the browser. Google Chrome and Brackets work particularly well together in this respect.

You can download Brackets here.

Visual Studio Code

Backed by software giant Microsoft, Visual Studio Code is similar to Brackets in that it is a cross-platform and open-source HTML editing tool. In a 2018 survey, Stack Overflow found that Visual Studio Code was the most popular tool for web developers.

Unlike Brackets, Visual Studio Code is intended to be a complete development environment, allowing you to create a simple webpage today. As you progress through a web developer bootcamp, you can graduate to more advanced projects with more HTML code.

Visual Studio Code also allows you to download a variety of web extensions that you can plug in to offer new features. As you advance through your web developer bootcamp to learn HTML, you can gradually start adding features to your webpages including debugging, GitHub, server-side code and more. It may seem intimidating at first, but you’ll be able to gradually learn it as you go through it. The downside is that its configuration systems are complex, and you might find that the menus can be on the crowded side.

You can download Visual Studio Code here.

Closing Thoughts

There are many more and better free HTML editors to choose from today than just a few years ago. Visual Studio Code and Brackets are great if you are just getting started using an HTML editor, and there are many other free HTML editors available as well, such as heavy coding applications. These tools are also used in professional settings, so if you can learn them, you will be prepared for your future job search when the time comes.

*Please note, these articles are for educational purposes and the topics covered may not be representative of the curriculum covered in our boot camp. Explore our curriculum to see what you’ll learn in our program.