Can I have attributes on closing tags?

Answer 1

no, not possible. some browser will ignore it, but maybe some other browsers will complain and won't display HTML correctly.

Answer 2

The answer is no for most tags. However, you could argue that tags like "img" that can be self-closing, are able to have attributes in them. But these self-closing tags are taking the place of an opening tag and a closing tag, so it's not the same as having an attribute in a closing tag. To be honest, there is really no need for this, it would just create more for the browser to have to read and make the page size bigger.

Answer 3

Short answer, No.

Use the comments instead.

Answer 4

The original question describes a specific scenario of four parts:

1. improving html code readability, and specifically: matching opening and closing <div> … <\div> tags;

2. while reading (debugging) the rendered html page source grabbed from the browser;

3. 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;

4. 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.

Answer 5

Sorry, but it doesn't work and doesn't validate.

If you try other attributes in closing tags, then the browser skips the attribute. I tried it in several ways, tested it with ids and classes, and the css and the javascript didn't recognized them in the ending tag. Your best bet is the commenting.

EDITED

Or you could make your own html tags.

You must use hyphenation, and you should avoid

document.createElement('foo-bar');