Align HTML to specialized documentation

[jason-fox]

This PR adds in the tabbed dialogs across the sample documentation within the the HTML plugin.

The HTML plugin *.dita is still using outputclass and <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd"> throughout, but the text and examples now explains how to use both outputclass and specialization if installed.

This contrasts with the specialization plugin which holds the same texts, but is generated using the <!DOCTYPE topic PUBLIC "-//DITA Bootstrap//DTD DITA Bootstrap Topic//EN" "bootstrap-topic.dtd"> doctype. The specialization version is also used by the root website.

Basically one uses:

<tabbed-dialog style="pills" margin="t3">
  <section>
    <title>Specialization</title>

the other uses:

<bodydiv outputclass="nav-pills mt-3">
  <section>
    <title>Specialization</title>

[infotexture]

@jason-fox Makes sense to include these details in the main HTML plug-in docs, but I think we probably need to provide a bit more context. Right now, the installation instructions start with:

Optional: install the specialization plug-in

— but readers don't know what that is yet, and it feels like that's leading with the exception rather than the rule.

If we follow the pattern established for the other optional plug-ins like Lunr & Sass, we'd add a dedicated topic on the specialization plug-in under the Extend section of the docs, and link there when mentioning the specialization approach elsewhere.

As for the new tabs, I'd suggest we place the @outputclass tab first and show it by default, since that will work out of the box without installing another plug-in. Users with the specialization plug-in installed can switch tabs to show the corresponding code.

But we can merge this as is, and refine further in separate PRs.

[jason-fox]

I switched the tab order and merged. I have opened up the discussion of further changes here