Extending HTML means to implement new behavior of existing elements in HTML. There are a number of default behaviors. Like a click on a link open the page defined by the href attribute. A select is able to get changed by the user. A form is able to submit data. And so on. With extending HTML you define new behaviors and rules when they get applied. Once the extension is defined a developer can create elements of a certain type to get the new behavior applied. This will help to reduce code, compared to specifying the making for making an pageLoad stript, that will fild the button, apply the custom behavior and has a section for each of the elements on the page with some special requirements. This is useful, if you have a website, that delivers page by page from the server, as it is done my most PHP sides and using systems like wordpress, drupal and in most cases synfony and zend. I will discuss in a future post about the advantages and disadvantages of such systems over single-page applications. Second improvement by building HTML extensions is the separation of concerns you are defining the behavior on one place and the compositions and style of those components is defined in other places, like templates.
As you can see, the click-Event is registered on the document. That means every click is going to be evaluated with the selector “button.loadJSON”. This approach is good. to add some behaviors to an existing Website. I think this might be ok as link as you don’t have more then a hundred extensions. But for a single-page application where basically very element can show some specific and unique functionality. You should go and bind the events direct on those elements when you create them. Or let that handle by some framework, like Backbone.js, React, Angular, Ember,…