The original question describes a specific scenario of four parts:
improving html code readability, and specifically: matching opening and closing <div> … <\div>
tags;
while reading (debugging) the rendered html page source grabbed from the browser;
when the rendered source has been dynamically generated (server-side generated/processed) and also stripped of all comments before sending the webpage to the requesting client;
and in this case the question is specific to WordPress (the well known php CMS platform for creating websites, blogs, etc.).
The specific complexity here is that there is no one source file to look at on the server as the webpage was dynamically generated by code with input from many files, databases, APIs, etc.
AND
That as previously noted, a common technique of placing a comment at the end of each closing <\div>
is not helpful here because Wordpress, has stripped all comments prior to serving the page, presumably to make the page size smaller.
A Javascript Solution:
Forget about trying to hack the html in an effort to circumvent WordPress and the browser and the standards. Instead simply re-insert the comments back into the rendered source like this.
When matching opening <div id="myDivID">
and
closing </div>
tags this javascript may help.
This function will comment every closing div
tag
and label it with the div’s ID attribute, producing
a result like this:
<div id="myDivID">
<p>
Lorem ipsum dolor sit amet, consectetur
...
anim id est laborum.
</p>
</div><!-- end #myDivID -->
This will work even when the rendered page is
stripped of comments (by WordPress as in the
original question). Just trigger or inject the
function at any point you like, then view or save
the source. As others noted previously, using
comments doesn't violate the spec as some other
suggestions may.
This short function should be easy to understand and
to modify for similar purposes. (Note the insertBefore
workaround, as there is no JS insertAfter
method.)
var d = window.document;
insertCommentAtDivCloseTag(d);
function insertCommentAtDivCloseTag(document) {
var d = document;
var divList = d.getElementsByTagName('div');
var div = {};
for (div of divList) {
var parent = div.parentNode;
var newNode = new Comment(' end #' + div.id + ' ');
parent.insertBefore(newNode, div.nextSibling);
}
}
This is the quick and easy one-off solution. If that’s all you need skip the rest...
If WordPress/web development is something you do everyday you may wish to consider exploring some of the following:
Hack WordPress
Again forget about hacking the HtML standard and hack wordpress instead. In fact WordPress is designed to be hacked. Virtually every function WordPress uses in creating a webpage has a hook that you can use to override or alter what it does.
Codex, The Rosetta Stone of WordPress
Find the one stripping out your comments and add a function to turn it off and on.
If it’s been thought of before, there’s already a plugin for it.
WordPress Plugins Home Page
WordPress plugins come and go, some are maintained others not, some are very good, and some are poorly designed, some are just bad. So caveat emptor. With that proviso, I was able find such a plug-in in ten seconds, with one search, on the first try.
Beyond WordPress
For so many reasons, it is beneficial to serve the smallest possible version of your webpage and WordPress may not be the only actor dynamically altering your code or caching older versions.
Your WordPress Installation and Blog Post (database)
↓
WordPress Theme
↓
WordPress Plugins
↓
The HTTP Server, such as Apache and it’s Modules
↓
A Proxy Server such as Nginx
↓
A Hosting Provider
↓
A CDN, Content Delivery Network
↓
(More Network)
↓
Finally My Browser the Client
↑
Also any Caches Maintained by Any of the Above
Finally, if this sort of thing is or is becoming your job, you’ll eventually want to explore specialized IDEs and separate production and development servers.
</div id="logo"> -- name start character invalid: only S separators and TAGC allowed here
<br data-end-tag-id="logo" class="hidden"></div>