Most professional designers and web programmers use advanced WYSIWYG editors such as DreamWeaver. Only a small part of them use simple text editors, feeling some kind of secret magic in this.

Simple text HTML editors are well suited for those programmers who feel comfortable and enjoy working with clean HTML code. But for most users this is not entirely suitable. They want editors that make it quick and easy to create a web page in a WYSIWYG environment.

Review of Free HTML Editors

It doesn't matter whether it's code-centric or WYSIWYG, the ideal HTML editor should check the code for compliance with HTML standards, have its own FTP client, allow you to view the web page in different browsers, provide support for meta tags, support basic tools for working with images. And at the same time remain free.

WYSIWYG HTML editors

Let's look at a few WYSIWYG editors.

Amaya

Quick Selection Guide - HTML Text Editors (download)

NetBeans

HTML Kit 292

Aptana Studio

The main purpose of our HTML editor is to simplify the generation of page code by specialists when developing resources or filling them with content. This editor significantly speeds up this process and makes it possible to preview and immediately visually see the result.

Why do IT people use an HTML editor?

As you know, not a single modern resource can do without the use of hypertext markup language for websites, and the length of the code for one page can reach several thousand lines. In the classic version, the optimal way to write markup code is a regular notepad. It is presented to the user in its pure form, where the main tags must be entered by hand. This requires an enormous amount of time, and the risk of making a purely mechanical typo cannot be ruled out. As a life hack, to make their work easier, web developers actively use an HTML editor, which already provides the ability to automatically edit elements, but the main thing is that you can enter characters not manually, but using already written program codes for these purposes.

The practical HTML code editor is simple enough for potential users to master and can easily offer an optimal solution to the issue of web page layout even for an inexperienced user.

The benefits of an HTML editor are maximum!

• Allows you to correctly enter the encoding of elements without fear of missing a required character, closing parentheses, or making a typo or mistake. You just need to find the required element on the tools page, click on it - and all the data will be promptly registered, you don’t even have to check the contents.
• The speed of writing code increases significantly due to the use of semi-automatic software, the user can expect to receive fairly high time savings for performing specific actions. Consequently, the code is compiled much faster.
• Available online without pre-installation on PC. The editor will allow you to work without problems anywhere in the world, ensure that data is saved in automatic mode, guarantees maximum convenience for the performer.
• Free of charge will significantly save time and money for a potential client, give him unlimited scope for activity and will not allow him to make many mistakes in his work. There will be no need to pay large sums for using the software.

What’s noteworthy is that many professional experts recommend studying with editors like these. Well, for already established resource developers, such an offer will be a worthy alternative painstaking manual typing, the ability to do everything quickly and practically.

If you want to develop websites, you need to get an HTML editor. Of course, you can use a regular notepad, but it is unlikely to be convenient. It is important to note that HTML editors must perform two important tasks: code highlighting and autocompletion. Naturally, additional functions are also welcome, various design themes, for example. Such similar additional functions there are many. Well now let's take a look at a few free editors HTML, which do an excellent job with the tasks listed above.

Free code editor - Programmer's Notepad

This editor offers a modern interface that comes in two types, light and dark. In addition, the syntax highlighting is very good, and the color scheme is well chosen. I think that this editor will meet all your requirements.

HTML editor - SynWrite

SynWrite is a cool editor with wide range opportunities. The idea of ​​this editor was to combine all the advantages of other HTML editors in one high-quality product. Its functionality can be significantly expanded with the help of additional plugins written in Python. Besides standard features, SynWrite allows you to immediately edit multiple pieces of code at once:

This feature will save you a lot of time.

Free HTML editor - PlainEdit.NET

This editor can open several files at once, and plugins can be added that will significantly expand the functions of the editor, including design themes. In addition, you can add and change text using regular expressions, even in documents that are not currently open. It is worth noting that PlainEdit can also work from a USB drive.

Notepad++

This editor is a classic. It is very popular all over the world. Notepad++ has everything you need to have text editor. The interface can be customized according to your wishes, and free plugins will help expand the functionality of the editor.

Free editor - jEdit

With this editor you can open and edit almost any file. It greatly simplifies the task of opening several files at the same time. Any missing features can be supplemented using a variety of plugins.

Out of the box, jEdit comes with built-in necessary functions, for example, code folding, marking tags and elements, file manager, as well as many other functions.

Sublime Text 2

This is the most popular editor among programmers and web developers. No similar editor has had such a triumph as Sublime Text 2. It is praised by many programmers. The editor is highly customizable through different resolutions and JSON files.

For this popular editor you can find extensive libraries of documentation, both official and non-official. Sublime Text 2 tutorials can be found everywhere.

Sublime Text 2 is partially free, the license costs $70.

New editor - Brackets

Brackets is a modern open-source editor source code and with some interesting features. It works with Adobe Creative Cloud to bring colors, fonts, and more from PSD file. It can also extract layers as images. Very convenient

Unfortunately, Adobe Creative Cloud is a paid service.

This editor has all the necessary functions for a modern code editor. There are many different extensions that are released every 2 - 3 weeks.

Aptana Studio 3

Largest strengths The editor is its customizability, Git integration and built-in terminal. Aptana Studio 3 supports the latest web standards such as HTML5 and CSS3.

Conclusion

There are a lot of HTML editors out there, but only a few of them are actually usable. For non-daily use there is Notepad++, but for daily use it would clearly not be enough. There are better options for this such as Sublime Text 2 which can be customized as per the requirement of the user. Curious to know which editors you choose?

FireBug – extension for FireFox, one of the functions of which is to work with the source code of the page.

FireBug functions.

Of course, the ability to view the page code will not surprise anyone; all modern browsers cope well with this. Why then make a special plugin? Of course, in order to implement much more functionality in it. Let's look at the HTML tab, which is useful for layout.

As can be seen from the figure, there are three fields on it. The first one allows you to display and change properties and attributes of tags. The second one displays the style of the selected element, and the third one displays its DOM properties.

HTML Tab in FireBug displays more information about the element than just viewing the code through the browser. But this is not the only advantage of this plugin! It allows you to edit or remove elements and attributes on the fly, and the browser page immediately refreshes to reflect the changes.

We will change the copyright content on the site.

To do this, you need to edit the corresponding field in firebug.

However, if you look at the page code through a browser, it still contains the old copyright.

FireBug makes it easy to experiment with elements, change them, and immediately see the results.

How to use FireBug.

How to change the value element on the page?

1. Open the HTML tab, it will display the document code.
2. While uncovering the positives, find the element that you want to change. To navigate through elements, you can use Tab (moves editable areas) and keyboard navigation arrows (moves element selection).
3. Left-click on the value to be changed; the entire element will be selected as a separate block. The changed value will immediately appear on the page.

How to add a new attribute element? For example, I want to add to the title h2: class=”author”

1. On the element to which you want to add an attribute, click right click, in my example this is the h2 tag.
2. In the menu that appears, select “New Attribute”.
3. Enter the name of the attribute (mine is class), press Tab and enter its value (mine is author).
4. When you click outside of an editable field, the changes are applied automatically.

For deleting an element entirely, just right-click on it and in the menu that appears, select “Delete element”.

How to quickly find an element in the page code? To do this, use the button on the “Analyze” panel. After clicking it, any element you hover over is automatically searched in the code.

The examples given are convenient for small changes, but if you need to change an entire block of code, it is more convenient to use “Editing” mode. It is called in several ways: by the button of the same name on the panel or by the “Edit HTML” menu item.

Event logging.

To enable logging of events occurring with an element, just right-click on it and select “Record events”. The following types of events will be recorded:

• Focus on element
• Focus shift
• Mouse movement over an element
• Mouse movement away from element
• Mouse movement to element
• Selecting an element
• Print text (for forms)

Every web designer and coder needs a good web page editor to create and edit HTML, CSS and JavaScript code. Notepad (Windows) and TextEdit (Mac) are great tools to start with, but as you gain more experience, you'll want to use a more robust and user-friendly tool.

There are hundreds of excellent editors from which you can choose the right one, but many of them are paid. What if you don’t want to violate copyright, but your budget doesn’t have the funds to purchase a commercial product? This article looks at some great free editors.

• WYSIWYG editors. This graphic editors, which allow you to build a page layout and set styles visually, as in the well-known word processor MS Word. They are a convenient tool for building a page design, although, as every experienced web designer knows, the code still has to be tweaked to achieve a great result.
• Text editors. This is a tool for directly editing HTML and CSS code. Some editors are general purpose and do not have special options for supporting web code. Others are specialized for using web languages ​​such as HTML, CSS, JavaScript and PHP, and have built-in properties for quickly entering HTML tags, CSS properties, and so on. Many of these editors allow you to view a web page in a separate window.

KompoZer (Windows, Mac, Linux)

KompoZer is a great choice if you need visual editor on a limited budget

Komodo Edit - good editor, easy to learn, yet powerful and extensible

Although this is an editor general purpose, it supports HTML and CSS, and has the property of contextual autocomplete of HTML tags and CSS properties, as well as a collection of code inserts for various HTML elements. To get the most out of Komodo, you need to install the HTML Toolkit extension, which contains such wonderful features as auto-close tags, CSS appearance preview, and a temporary text generator.

Komodo Edit allows you to view the pages you are editing in any installed browser, or use the built-in browser in a separate window, so you can edit and see the result of your changes at the same time.

The editor has a built-in function for uploading files to the site (FTP, FTPS, SFTP, or SCP), and you can also neatly group your files using the project manager option.

Very useful feature Code > Select Block. It highlights the current main HTML block, such as the currently closed div or ul element. A very convenient function when you need to select an entire section on a page for copying or moving.

Komodo Edit has a lot of powerful and useful functions, such as the use of regular expressions for search/replace, the ability to execute external commands, and so on. Fortunately, the editor also has good help system, which makes it easy to harness the power of Komodo Edit.

Aptana Studio (Windows, Mac, Linux)

Aptana Studio is a complete integrated web application development environment with a large set of plugins. Although you can only use it as an HTML/CSS/JavaScript code editor

Notepad++ is a great replacement for Notepad on Windows. Although it doesn't have as many options as other editors, it's great for editing HTML, CSS, JavaScript, and other code files

PSPad is another general purpose editor for Windows with a wide range of features useful for HTML and CSS coders

jEdit is a cross-platform text editor with powerful macro command and plugin features. Install the XML plugin if you need to edit web pages

TextWrangler is a lightweight general purpose editor. Despite the lack of special functions for web development, it can be used to work with web pages.

Vim is definitely hard to learn, but once you get past the challenges, you'll never want to go back!

The granddaddy of text editors for programmers, Vim (a direct descendant of the vi editor) is an open-source console text editor. It is the default editor on almost all flavors of Unix, including Linux and Mac OS X. It is also available for use on Windows and many other systems.

Vim is not a system that you can install and start using right away without ever having worked with it before. Most editing commands include weird combinations like :wq and / . It also has three editing modes: mode inserts, in which text is entered; visual mode for selecting text; And command mode for entering commands. This functionality is a legacy of Unix from the days when there were no windows and no mouse.

Why was he on the list? If you master it, you will be convinced of its speed and power. With a few commands, you can do in a few seconds what might take minutes in other editors.

exists large number macros and plugins for Vim that make it easier to work with HTML, CSS, and JavaScript code, including syntax highlighting, autocompletion, HTML Tidy, and browser viewing. Here is a large list of useful links:

• Vim Omni autocompletion
• HTML/XHTML editing in Vim
• home page

Fraise (Mac)

Fraise is an intuitive editor for Mac, with a set of features sufficient for web editing

Like TextWrangler and gedit, Fraise is a wonderful, lightweight editor that's a pleasure to use. It is a fork from the editor. It is relatively new and does not have a proper web server. It is currently only supported on Mac OS X 10.6 (Snow Leopard), meaning if you are running version 10.5 you will have to download Smultron.

Fraise has some great options for web editing:

• Code highlighting for HTML, CSS, JavaScript, PHP and several other programming languages.
• Command Close Tag(Command-T) to close the current tag. This really saves time when entering lists.
• Convenient preview in the built-in browser (using WebKit), with a very convenient Live Update option? which updates the browser as soon as the markup and CSS on the page being edited has changed.
• Advanced Find option, which supports search/replace using regular expressions.
• Support for blocks for quick input HTML tags and CSS properties.
• Some handy commands for manipulating text, such as HTML validation and converting characters to HTML elements.

Fraise is worth exploring if you use a Mac and want a user-friendly editor with more capabilities than the built-in TextEdit.