Authoring (x)HTML documents

This is a kind of survey of some authoring tools to see how they do fundamental things when editing code. It is important for reviewing HTML 5 specification which in its design principles has "Paving the Cowpath". It means that the specification should follow what is done in software on the Web and what is commonly found in Web documents.

Authoring tools

Macromates Textmate

Category: hand coded authoring tool with macros and scripts. Some drag and drop features for images for example. It is highly configurable and modifiable through scripting. I have tested Textmate (Macromates) Version 1.5.6 (1405).

Syntax coloring

Configurable with scripting

Saving

When saving for the first time the Template, the proposed extension is always .html, even if the document is xhtml.

lang information

The template gives by fault the English language. There is no way to set the user preferences. There is no warning saying that it should be changed to the appropriate language.

title

The title is set to untitled by fault, which might lead to document without proper title.

charset

The default encoding for files is UTF-8. It adds the meta http-equiv information for HTML 4.01 and XHTML 1.0, but xml PI for XHTML 1.1

image editing

When doing a drag and drop of an image file “big-forest.jpg” on the editing window, the following markup is generated: it works also with non us-ascii characters. The generated markup is always html (no trailing slash) even if the template is xhtml.

      <img src="big-forest.jpg" width="550" height="395" alt="Big Forest">

    <img src="大森.jpg" width="550" height="395" alt="大森">
    
    

anchor editing

The command to create an anchor when selecting text, takes the URI which is inside the buffer and add it with a title coming from the document itself online (taking the first occurrence of title elements). It escapes the URI for characters like &

html documentation

Documentation for elements is taken from HTML 4.01, requesting online the name of the elements each time. A local cached copy would be better.

validation and Syntax fixing

Validation is done by calling the HTML validator online Fixing syntax is done by calling Tidy locally

Templates

It proposes “New From Templates…” with 7 choices. There is the possibility to create your own templates.

Textmate HTML 4.01 Template example
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">

    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>untitled</title>
        <meta name="generator" content="TextMate http://macromates.com/">
        <meta name="author" content="Karl Dubost">
        <!-- Date: 2007-07-20 -->
    </head>
    <body>

    </body>
    </html>
    
    
Textmate XHTML 1.0 Template example
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <title>untitled</title>

    </head>

    <body>


    </body>
    </html>
    
    
Textmate XHTML 1.1 Template example
      <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>untitled</title>

    </head>

    <body>


    </body>
    </html>
    
    

Adobe Golive

Category: Wysiwyg and hand-coding authoring tool. I have tested Adobe Golive Version 8.0.1.

Syntax coloring

Configurable with visual menu

Saving

When saving for the first time the Template, the proposed extension is always .html, even if the document is xhtml.

lang information

no lang information is set on the document when the template is created. I haven’t found any way to add the information from the menu except typing it manually.

title

When not set, Golive warns that the page will be saved with Untitled Page and proposes to change the title.

charset

When creating a document, it is possible to choose between utf-16, utf-8 (default), iso-8859-1, shift_js. It is possible to add other charset in the preferences. When opening a document, the scanning limit to find charset info is set at 1024 characters, but this can be modified. If no charset information is found, it will be either asked to the user, set to default encoding, or the page will be converted depending on the preferences.

image editing

Complex. You have to be in wysiwyg mode to be able to edit the image and then go through a series of menu and selecting the files. Drag and drop available only in wysiwyg mode. The markup generated is

      <img src="%e5%a4%a7%e6%a3%ae.jpg" alt="" height="395" width="550" border="0" />
    
    

anchor editing

The markup created for a new link is

      <a href="(EmptyReference!)"></a>
    
    

There is an inspector to navigate and call the right file. Drap and drop works in wysiwyg mode.

html documentation

A pop-up window which is a browser of the HTML 4.01 specification.

validation and Syntax fixing

There is a tool to convert a document to XHTML. It converts the document to XHTML 1.0 Transitional. There is a dynamic syntax checking showing the mistake when they are typed. The tool has a dynamic editing feature which is contextual depending on the elements we are on, proposing possible values for attributes too, but it is not doctype contextual. For example, on html in XHTML 1.1, it will propose lang attribute, even if at the same time the dynamic syntax checker says that it is not allowed. There is a outline mode which knows the right elements and attributes depending on the DTD.

Templates

When starting the software we can start with a “New Document”. A series of choices is proposed. Among them, you can select Web or Mobile. A lot of templates are proposed: simple page, predefined layout (CSS, Table, blogs), framesets. For each of them, you can choose between HTML and XHTML, which leads then to choices.

Textmate HTML 4.01 Template example
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

    <html>

        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <meta name="generator" content="Adobe GoLive">
            <title>Untitled Page</title>
        </head>

        <body>
            <p></p>
        </body>

    </html>
    
    
Textmate XHTML 1.0 Template example
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8" />
            <meta name="generator" content="Adobe GoLive" />
            <title>Untitled Page</title>
        </head>

        <body>
            <p></p>
        </body>

    </html>
    
    
Golive XHTML 1.1 Template example
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8" />
            <meta name="generator" content="Adobe GoLive" />
            <title>Untitled Page</title>
        </head>

        <body>
            <p></p>
        </body>

    </html>