A frequent problem I'm having when editing web pages is that HTML jargon can get in the way, when I need to focus on just the content for making corrections. Once markup is added to a piece of text, img tags, hyperlinks, divs and all of their attributes can take multiple lines. Even with good indentation and spacing, simple semantic elements like em & strong can severely impair readability.
Here is what DOES NOT solve the problem for me:
Editing content separately in plain text, Markdown or rich text program. It is OK to write in a text editor during the initial stages of preparing content, but once a text document gets marked up with HTML, should you decide to make a change in the content, you have to then edit it in two or more places: at least once in the HTML & once in the original text file.
HTML expanders like Emmet. Text expanders help when adding elements, but they do nothing to improve readability once the elements are in place.
Quasi-solutions:
Pre-processors like HAML & Jade. Those can make a document more readable, but have their own peculiarities. Markdown, although great for readability has limited HTML capabilities before conversion.
WYSIWYG editors. In a traditional editor I could go into the Design mode and make changes to the rendered page directly without any HTML artifacts. This is great, but I have to constantly double check between code view & design view in order to monitor how changes are reflected in the code, which sort of defeats the whole purpose.
The Ideal solution
Ideally, an editor that turns on/off markup in code view or a meta-language that makes an HTML document Markdown-like readable would get the job done. In other words, does a tool/lightweight language that separates pure content from semantic structure exist?
