ある程度以上HTMLに関する知識を持っていて、正しいHTMLを記述したいと考える人は、無駄が多く厳密性に欠けるソースを吐き出すWYSIWYG型のウェブ・ページ編集ソフトウェア*1を嫌い、テキスト・エディタやタグ挿入型HTMLエディタを用いて、直接ソースを編集することになるが、やはりこういった編集方法は面倒な部分があるし、多くのタグを使用した文章や*2、や複雑な構造を含む文章*3を編集する際には、大変見通しが悪く困ることがある*4。
そこで、HTMLの要素を把握しながら、視覚的な編集を行えるHTMLエディタというものを、テキスト・エディタを元にWYSIWYGエディタ側からではなく）考えてみた。
以下のようなHTMLソースを例に説明してみる。
<div class="section">
<h2>例文1</h2>
<div class="semantics">
<p>
<abbr title="What you see is what you get">WYSIWYG</abbr>エディタを使って
<abbr title="Hypertext Markup Language">HTML</abbr>を編集することは
、あまりお勧めしない。テキスト・エディタやタグ挿入型<abbr title="Hyp
ertext Markup Language">HTML</abbr>エディタを使って編集することをお
勧めする。
</p>
</div>
<div class="semantics">
<p>
テキスト・エディタでは<a href="http://hide.maruo.co.jp/software/hide
maru.html">秀丸エディタ</a>に定評があるが、僕が個人的にお勧めするの
は<a href="http://www.yokkasoft.net/">Uneditor</a>である。
</p>
<p>
タグ挿入型<abbr title="Hypertext Markup Language">HTML</abbr>エディ
タに関しては<a href="http://besunday.hp.infoseek.co.jp/html_editor.h
tm">こちらのサイト</a>で詳細に比較されているので、参考にされたい。因
みに僕が使っているのは、<a href="http://www.w-frontier.com/">ez-HTML
</a>である。
</p>
</div>
</div>
まず、属性を隠して、全体をすっきりさせる（ただし、classとid程度は残しておいた方が良いかもしれない）。属性は、ポインタをタグの上に持っていけば、ツール・チップで表示されるようにし、編集はタグをクリックするとダイアログが表示されるようにすれば良いだろう。
さらに、ブロック要素を以下のように罫線で囲み、色分けを行い、視覚的な表示にする。
例ではブロック要素の要素名は罫線の上に表示しているが、実際には罫線と重ねて┌┤H2├―――┐といったように表示させてもよいだろう。
また、例には含まれていないが、画像も表示*5できるようにすれば、分かりやすくなるだろう。
タグの挿入は、一般的なHTMLエディタと同様に、タグを当てたい文章の範囲を指定して、ツール・バーで要素を選んで行うようにすれば良いだろう。逆にタグを外す場合は、タグをクリックしてDeleteキーを押すなどの方法が考えられる。
これと併せて、WYSIWYG型のCSS編集機能もあれば便利だろう。
僕にはプログラミングの技術はないので、実際に作ることはできないが、とりあえずこんなソフトウェアがあればいいんじゃないだろうか、という案を示してみた。
