© htmlredactor.com 2018



"Redactor" is a term, equivalent to "editor", mostly in the Slavic languages. In other words, HTML Redactor stands for HTML Editor.

The purpose of the site is simple. It provides a handy interface to write HTML code and add it to other projects.

Write the code in the left pane and it will be rendered immediately in the right one. There are three approaches to write the code:

  • Write just the text and use the editor menu to format it.
  • Write all the code by hand.
  • Use Zen Coding to write code with fast text-based shortcut.

Zen Coding is a productivity plugin, introduced by Sergey Chikuyonok back in 2008. It then evolved in plugin named Emmet.

Writing raw HTML is slow and annoying, but with Zen Coding you have an option to speed the process up. For example, you can enter:

html:4t

When you hit Tab, this code will explode into:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

With a single line of text, you can add a tag with class, ID, and content. For example, the following line:

div.foo#bar{some text}

will produce:

<div class="foo" id="bar">some text</div>

You can generate whole tables with rows and column:

table>tr*3>td*2

The above line will produce a table with three rows. Each row will have two columns:

 <table>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </table>

Emmet/Zen Coding is available as a plugin for many popular editors, such as Notepad++, Sublime text, PSPad and many more. HTMLRedactor.com provides it by default.

A nice cheat sheet is located at https://docs.emmet.io/cheat-sheet/