Windows.  Viruses.  Laptops.  Internet.  Office.  Utilities.  Drivers

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's important to note that HTML editors must perform two important tasks: code highlighting and autocomplete. 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 HTML editors that 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 a wide range of features. 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. In addition to standard functions, SynWrite allows you to immediately edit several pieces of code at the same time:

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 comfortably

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

The editor's greatest strengths are its customizability, Git integration and built-in terminal. Aptana Studio 3 supports newest 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. For this there is best options, such as Sublime Text 2, which can be customized as per the requirement of the user. Curious to know which editors you choose?

For comfortable work with HTML pages, making changes and edits to them, HTML editors are used. Today there is a wide variety of such editors, each of which has its own strengths and weaknesses, and can also be used for various tasks.

Adobe Dreamweaver is one of the oldest HTML editors, the first version of which was released in December 1997. Since then, the package has undergone a lot of changes and eventually became a real professional HTML editor, which is used to work with complex web projects. Here you will find all the latest tools for a web developer.

IN new version The HTML 5 standard is supported, and the code editor and developer window have been improved. Support for the CSS preprocessor has been implemented, as well as displaying all changes in the browser window in real time. Close integration with Flash Player. Exterior design has been completely updated.

The disadvantages of Adobe Dreamweaver are its “heavyness” and hardware requirements. You must have several free gigabytes on your hard drive to install the package. The program contains a large number of various tabs and settings, which requires additional time to familiarize yourself with it. Additionally, Adobe Dreamweaver is proprietary software, for which you have to pay money to use.

Despite this, the program has a free trial period, during which you can evaluate all the benefits and advantages of this package. Typically this period lasts for a month from the date of installation of the program.

The multi-platform editor Sublime Text is gradually gaining popularity among professionals. This is due to its maximum simplicity, lack of frills and at the same time the presence of all necessary tools, which the developer needs. However, if you suddenly need something, and it won’t be available standard functionality Sublime Text, then this can always be found as a plugin, or you can write it yourself in Python. All work is done using hot keys, so the program window itself contains a minimum of interface elements. The work area can be divided into several independent windows, arranged horizontally, vertically, or in a grid.

Despite all the advantages, the Sublime Text editor remains a rather difficult tool for beginners. Even standard setting The editor here is not done using a menu, but using config.json files, working with which requires basic training from the user. However, for professional programmers it will not be difficult to customize this tool, given that it comes with complete documentation.

The Sublime Text editor is proprietary software, but you don't have to pay to use it. Each time you launch it, a window will appear reminding you that you can officially purchase this program, but this is done on a donation basis rather than a mandatory purchase.

You can download the program on the official website: https://www.sublimetext.com.

Notepad++ is not technically an HTML editor, but it can be used for these purposes. It has built-in syntax highlighting for HTML and XML markup languages, most popular programming languages, some of which are used in web development, such as PHP, Ruby, Perl, Python and many others.

There are a number of tools that help you edit code, such as markers, code block folding, autocompletion, project manager, multi-line editing and highlighting, support different encodings and much more. There are also a large number of plugins for Notepad++ from a variety of developers, which significantly expands the functionality of the program, making it a serious competitor for professional HTML editors.

The advantages of the Notepad++ text editor include its speed and small amount of disk space. In addition, the program has a very simple interface, which does not require spending Extra time for education. In addition, Notepad++ is constantly updated, about which the program itself notifies users, offering to install them. The most important advantage of the editor is that it is distributed under the GNU GPL 2 license, which implies free software.

You can download this editor right now from the official website https://notepad-plus-plus.org without any restrictions.

This is a simple editor with a nice interface that is visually vaguely reminiscent of Sublime Text. Written in CoffeeScript. Atom is a fairly young text editor, the first release of which occurred on February 26, 2014. Has support for plugins written in Node.js. Suitable for beginners to work not only with HTML, but also with a number of other tasks.

Atom is free and can be installed on most popular operating systems. In addition, it is quite easy to install and use, works quickly and requires a small amount of free space on your hard drive.

To get started with this editor, just click “Open a Project” from the welcome window that opens by default. Next, a directory for work is selected, after which a file is created in it and its extension is indicated. The syntax for the file is determined automatically based on the specified extension.

Vim is a professional free text editor that originates from the family of the oldest Unix editors. Vim was first released on November 2, 91. It is known as a tool for professional programmers, which provides enormous opportunities for automating work. The standard visual interface of Vim is a console one, but there is a modification of Gvim that works through a windowed graphical interface.

When working with Vim, there are several modes, switching between which changes the hotkeys and their functionality. Initially, Vim starts in what is called “normal” or “command” mode. It has all the usual hotkeys, such as “copy”, “delete”, “paste”. In other modes, you enter text, work with the console, or call the visual mode. It would seem, why such difficulties? The fact is that Vim was developed as a tool in which any action is considered not from the standpoint of classical “convenience”, but as something that requires maximum optimization.

Vim is very fast and uses almost no system resources. As for the difficulty of learning, this is definitely not a tool for beginners. Over a hundred commands have been developed for the move operation alone. Of course, you don't need to memorize them all. Everyone chooses their own programming style and, based on it, learns what they need. Just to master this editor at the proper level will require a lot of patience and time. However, as a reward, diligent users will receive the most powerful code editor currently available. Vim is a free and multi-platform tool that runs on Linux, Mac, Windows and several other operating systems.

Unlike other programs, IntelliJ IDEA is a professional integrated development environment (IDE). In addition to the fact that it can easily work with HTML/XHTML/HAML markup languages ​​and description languages appearance CSS/SASS/LESS pages, the ability to work closely with Java, JavaScript, Python and Coffee Script is implemented. IntelliJ IDEA is developed by JetBrains.

Why should you start using this particular program? Firstly, it has a really thoughtful interface. You can start working with it immediately after installation, even if you have never encountered it before. In addition, it is possible to work with such popular tools as CVS, Apache Ant, Maven, JUnit and Subversion, which, by the way, are completely free.

Unfortunately, IntelliJ IDEA itself is not completely free program. Full version is available only for a 30-day trial period of use, and its reduced functionality version lacks quite a few useful functions and can really be useful for developing applications on Android or when working with a Java machine.

HTML editor

One of the principles of HTML5 is the official recognition as part of the standard of non-standard features that are already widely used by web developers. One of best examples Following this principle is the inclusion of two unusual attributes in the standard - contentEditable And designMode, which allow you to turn an ordinary browser into a simple HTML editor.

These two attributes are not new. Moreover, their support was added in Internet Explorer 5 at the dawn of the Internet. At that time, most developers abandoned their use, viewing them as mere Windows extensions for the Internet.

But over the years, more browsers have begun to copy IE's practical but quirky approach to advanced HTML editing. Currently all browsers for desktop computers support these attributes, although they were never part of the official standard.

Editing elements using the contentEditable attribute

Let's look at the first tool for HTML editing - the contentEditable attribute. Adding this attribute to any element allows you to edit the content of that element as it is displayed in the browser window:

Most likely, you will not notice any peculiarity in the display of this text in the browser. But clicking anywhere in the text displayed by the browser places the edit cursor in it:

In the example above, the editable area

contained only text. But you can just as easily insert other elements into it; in fact, the element
can contain the markup of an entire web page, making it editable. For example, the contentEditable attribute can be applied to multiple elements, allowing you to edit multiple areas of the browser window.

Some browsers support built-in formatting commands. For example, in Internet Explorer, you can make text bold, italic, and underline using keyboard shortcuts +, +And +respectively. You can undo the last edit in Firefox using a keyboard shortcut +. All these hotkeys can also be used in the Chrome browser.

Before you start using advanced HTML editing, it's worth knowing what it's actually used for. Despite its immediate impact, HTML editing is a specialized feature that won't appeal to everyone. It makes sense to use it to provide users quick way modify HTML content, such as adding blog posts, submitting reviews, posting advertisements, or composing messages to other users.

But even if you decide that you need such capabilities, the contentEditable and designMode attributes may not be best choice for their implementation. They do not provide the developer with all the conveniences of a true web design tool, such as commands for editing markup, the ability to view and edit HTML source code, spell checkers, etc.

Typically the contentEditable attribute is not included in the markup. Instead, it is enabled via JavaScript code and disabled when editing is complete:

You can edit this text.

Function startEdit() ( // Enable element editing. var element = document.getElementById("editableDiv"); element.contentEditable = true; ) function stopEdit() ( // Disable element editing. var element = document.getElementById("editableDiv "); element.contentEditable = false; // Display the edited text in the message box alert("Your edited text: \n" + element.innerHTML); )

Editing a page using the designMode attribute

The designMode attribute is similar to the contentEditabie attribute, except that it allows you to edit the entire web page. This may seem a little problematic because element events are disabled when editing the page. Then how can we press buttons to control the editing process? The solution to this problem is simple - the document being edited is placed inside the element

Marking

Function startEdit() ( // Enable editing in the element