Integrating HTML blocks [h]
HTML is the language to encode the structure of webpages. So Aneamal files are translated to HTML when they are turned into a webpage on your server. But you can also integrate own blocks of HTML code into a webpage built with Aneamal. This is useful when you need a markup feature that is available in HTML, but not natively supported by Aneamal.
You can also integrate SVG files as if they were HTML, since the HTML standard permits directly embedded Scalable Vector Graphics. An advantage is that modern browsers support interactive content such as hyperlinks inside an SVG that is integrated as HTML rather than as image.
How to
Start a block with the [h] file token, if you want to integrate HTML in an Aneamal document. HTML can be loaded from an embedded file as in the first example or from a linked file as in the second example. See integrating files
for more information.
The [h] file token is for integrating code that occurs as part of the main body of a HTML page. It is not for integrating a complete HTML document with its own HTML head or body elements directly into your page. You can, however, load complete documents via an embedded HTML iframe element as in the third example below.
An SVG file integrated as HTML must be loaded without XML declaration such as <?xml … ?>. You can use partial loading to integrate a linked SVG file that contains an XML declaration anyway. For instance, adding ?2:-1 after the filename tells the Aneamal Translator to only load the second to last line of a file.
Integrating remote content
[h] does not support links with an absolute URL to integrate remote files. You can embed an HTML iframe to integrate remote HTML files indirectly anyway. Please educate yourself about the privacy and security implications of remote files for your readers beforehand and consider alternatives whenever possible though.
Check that creators whose content you integrate are fine with your use of their files. Integrating the creative work of someone else without permission can have legal consequences and whoever is in control of the remote content could replace it by something that is inappropriate for your readers in response to unauthorized use.
Examples
The first example embeds an HTML noscript element. Its content is shown when a reader’s browser does not support JavaScript or does not have JavaScript activated.
[h]
|<noscript>This page requires JavaScript.</noscript>The second example integrates a linked SVG file and adds a caption below:
[h]->/stuff/pentagram.svg
We are all made of stars.The third example embeds an HTML iframe which in turn loads a complete webpage with a crossword puzzle. The HTML sandbox attribute restricts the abilities of the loaded webpage for security reasons, but the webpage is allowed to run scripts, since that is necessary for its crossword application to work.
[h]
|<iframe
| sandbox='allow-scripts'
| src='https://aneamal.org/stuff/crossword.html'
| style='width:100%'
| height='400'
|></iframe>For developers
A block of linked or embedded HTML is usually added without change when Aneamal is translated to HTML. So the first example would be added as:
<noscript>This page requires JavaScript.</noscript>A block with a caption is wrapped in an HTML figure element when Aneamal is translated to HTML. The caption is wrapped in a figcaption element. So the second example becomes:
<figure>
<svg xmlns='http://www.w3.org/2000/svg' width='410px' height='390px' viewBox='-82 -86 164 156'>
<defs>
<path id='ta' d='M0,-85.065 l19.098,58.779 l-38.197,0 Z' />
</defs>
<use href='#ta' transform='rotate(0)' fill='#FECA79' />
<use href='#ta' transform='rotate(72)' fill='#FDAA55' />
<use href='#ta' transform='rotate(144)' fill='#FD9A41' />
<use href='#ta' transform='rotate(216)' fill='#FF881E' />
<use href='#ta' transform='rotate(288)' fill='#F05D10' />
</svg>
<figcaption>We are all made of stars.</figcaption>
</figure>