Meet our New HTML5 Source Editor

The theme of the Doc-To-Help 2013 v1 release is “enhancing your editing experience” and the centerpiece is Doc-To-Help’s new built-in HTML5 source editor. Not only is it the industry’s first HTML5 content editor; it also includes many useful features you can use in source view for those times you need to tweak code.

Full details are below, but these are the two things you need to know:

  • Content you write in the editor will be stored with HTML5 markup. HTML5 is the future of the web. It is powerful, light, flexible, and optimized for mobile devices.
  • The editor’s design view is essentially unchanged. The new features focus on the source code view.

This blog post discusses source code, but don’t lose sight of the fact that you don’t have to edit — or even see — the source. What is most important is that the source is created for you, and if you need to edit it, Doc-To-Help gives you the tools you need.

Why is HTML5 Important?

HTML5 is more than just hype and it is more than just something developers get excited about. Its benefits are very important to people who need to publish professional quality output to many types of devices. The benefits of HTML5 are many and they could fill an entire blog post, so I will try to focus on those that you, a content professional, will care most about.

  • HTML5 is optimized for desktop and mobile devices. When you deploy content to the Web, you better believe that it will be viewed on many different devices from the widescreen desktop display to the small touch-enabled phone. All modern browsers (desktop and mobile) support HTML5 so you can rest assured that your content will display correctly. HTML5 also includes tags and APIs to help optimize a web page for the screen on which it is displayed. 
  • HTML 5 is lightweight. There is no markup that loads as fast as HTML5. It eliminates the requirement for heavy plug-ins like Flash and its code is very simple and clean.
  • HTML5 is optimized for accessibility. HTML5 introduces many tags that help screen readers identify content. These include <header>, <footer>, <nav>, <section>, and <aside>.
  • HTML5 is more structured. The tags listed above move HTML a step towards the Holy Grail that is structured authoring.

New Features in the Source Editor

While the Design View of Doc-To-Help’s new editor is essentially unchanged, we completely overhauled the source view. You already know that we have changed the source markup to HTML5, but we have also added many useful code editing features. It is now much easier to tweak the source. Here are the features you will find:

IntelliSense

When working with code, Doc-To-Help will display an auto-complete menu with the tags available to you.

The IntelliSense menu automatically shows you available tags.

The IntelliSense menu automatically shows you available tags.

Automatic Validation

Doc-To-Help’s source editor makes sure your markup will work and that it conforms to standards. When you save a document, it will analyze your markup, report errors, and fix them for you. In the example below, the markup is missing a closing paragraph tag “</p>”.  When the save button is clicked, Doc-To-Help reports an error and offers to fix it. There is also a validation button on the toolbar.

Doc-To-Help identifies and fixes invalid markup

Doc-To-Help identifies and fixes invalid markup

Automatic Formatting

A well formatted HTML document nests, or indents, lines of markup that need to act as children. This makes code more human readable and easier to troubleshoot. When writing your own markup, it is common to lose track of this formatting. In the example below, the two <li> tags should be indented so that they nest under the <ul> tag.

This code is not well-formatted. The  tags should be indented.

This code is not well-formatted. The list item tags should be indented.

That can easily be fixed by clicking Doc-To-Help’s Format Document button.

Doc-To-Help automatically formats the code for you.

Doc-To-Help automatically formats the code for you.

Collapsible Outlining

Doc-To-Help’s editor allows you to collapse elements and their children. This can give you a more concise view when you need to look at a topic’s top-level content and helps with trouble shooting.

Collapsing markup elements help you navigate your code.

Collapsing markup elements help you navigate your code.

Line Numbers

The HTML lines are numbered for easy location when errors appear.

Formatting Commands

Commands such as bold and italic are available in source view.

Spell Checking

The editor’s spell checker is available in source view.

Syntax Highlighting

The HTML code is highlighted according to XML standards (similar to Microsoft Visual Studio).

This entry was posted in Doc-To-Help and tagged , , on by .

About Dan Beall

Dan is a 15-year veteran of the software industry with experience including from web development, technical writing, marketing, and product management. Since 2003, he has worked on the Doc-To-Help team as a product manager. Most recently, he has used his experience to put Doc-To-Help on the path to be the go-to tool for web content delivery in the technical communication and administration industries. Today, Dan is responsible for the general marketing and position of ComponentOne’s entire portfolio of products.

Leave a Reply