HTML - Use Tags with Shortcodes

With the HTML plugin, you can integrate HTML tags into your Markdown content using simple shortcodes. The plugin supports various HTML tags, including div, span, address, mark, kbd, sub, sup, details, summary, time, small, progress, and button. Additionally, you have the flexibility to add classes and IDs to each tag and create slideshows, tabs, or accordion elements. To utilize this plugin, ensure you have a MAKER-license.

Traditionally, HTML tags are permitted in Markdown per its specification. However, for security reasons, they are disabled in Typemill. Responding to user feedback, this plugin offers a secure way to incorporate HTML tags into Typemill without relying on complex libraries for HTML sanitization.

General Usage

HTML tags can be used both in the raw Markdown editor and the visual editor. When using the visual editor, HTML tags will appear in a paragraph element, enabling you to write HTML as you would write standard text.

In the visual editor, HTML tags are displayed in light gray, allowing you to distinguish your HTML code easily. You can even reposition HTML elements using drag-and-drop.

Working with IDs and Classes

All HTML tags accept the attributes id and class. You have two options to style your elements with classes:

• Many themes such as the cyanine-theme utilize the css-library tachyons. Tachyons is a utility css library just like the popular Tailwind css library. You can simply add the tachyons-classes to style your HTML-elements. For example, to add a dark background with white text, you can use the class bg-dark-gray white.
• You can also use your own classes, and then write the css-rules into the themes configuration. Just open the theme configuration and scroll to the bottom of the configuration section. All themes have a dark textarea that accepts css-rules.

Div and Span

The div and span elements are probably the most useful tags. It is recommended to use div tags as block elements on separate lines.

Code

[:div class="myclass test" id="myid":]

This is text inside the div with an [:span class="myclass":]inline span element[:/span:] inside the div.

[:/div:]

You can also nest div and span tags within the same line:

[:div class="myclass":][:span:]This is a span nested in a div in one line.[:/span:][:/div:]

Result

Address

The address tag should be used as a block element.

Code

[:address:]

Typemill Inc.  
Millerstreet 12
11223 Bread-City

[:/address:]

Result

Mark, kbd, sub, sup

Inline usage is suitable for mark, kbd, sub, and sup tags:

Code

A [:mark:]mark-tag[:/mark:] for marks, and the [:kbd:]kbd[:/kbd:] tag for keyboard buttons. The [:sup:]sup[:/sup:] and [:sub:]sub[:/sub:] tags are very useful too!

Result

A mark-tag for marks, and the kbd tag for keyboard buttons. The ^sup and _sub tags are very useful too!

Details and Summary

Create a native accordion or disclosure widget without any JavaScript. Use the open attribute to start a section expanded.

Code

[:details:]
[:summary:]First section[:/summary:]

Hidden content of the first section.

[:/details:]

[:details open=open:]
[:summary:]Second section[:/summary:]

This section is visible by default.

[:/details:]

Result

Accordion with div

The HTML plugin also adds CSS and JavaScript to the frontend, enabling you to create an accordion-style interface with div elements. This is an alternative to the native <details> element above.

Code

[:div id="accordion" :]

### How To Use

[:div class="accontent" :]

You can use the HTML plugin to create elements like accordions, tabs, and slideshows with pure markdown and a little bit of HTML.

[:/div:]

### Code Examples

[:div class="accontent" :]

This is a second accordion panel.

[:/div:]

[:/div:]

Result

Tab Example

You can use the HTML plugin to create a tab element. Tabs are useful for various types of content. In documentation, they are often used to switch between coding examples for different languages.

Code

[:div id="tabs":]

* [Tab 1](#tab1)  
* [Tab 2](#tab2)  
* [Tab 3](#tab3)  

[:div id="tab1" class="tab-content":]

Content of tab 1.

[:/div:]

[:div id="tab2" class="tab-content":]

Content of tab 2.

[:/div:]

[:div id="tab3" class="tab-content":]

Content of tab 3.

[:/div:]

[:/div:]

Result

Slideshow Example

Code

You can use the HTML plugin to create a slideshow element. Slideshows can contain images or any other content elements.

[:div id="slideshow":]

[:div class="slide active":]

![Screenshot](media/live/jongsun-lee-l84ef9qrgt0-unsplash2.jpg){.center loading="lazy" width="820" height="547"}
*Photo by [Jongsun Lee](https://unsplash.com/@sarahleejs) Unsplash*

[:/div:]

[:div class="slide":]

![](media/live/mathew-schwartz-jwj1kiux42c-unsplash.jpg){.center loading="lazy" width="821" height="547"}
*Photo by [Mathew Schwartz](https://unsplash.com/@cadop) on Unsplash*

[:/div:]

[:div class="slide":]

![](media/live/hendrik-kuterman-ryxuv6g5asa-unsplash.jpg){.center loading="lazy" width="821" height="547"}
*Photo by [Hendrik Kuterman](https://unsplash.com/@hendrik_martin) on Unsplash*

[:/div:]

[:div class="slide-nav":]

* [‹ previous](#prev-slide)  
* [next ›](#next-slide)

[:/div:]

[:/div:]

Result

• ‹ previous
• next ›

Time

Mark up dates, times, or durations with the datetime attribute.

Code

The meeting starts at [:time datetime="2026-08-07T10:00:00Z" :]10:00[:/time:].

Results

The meeting starts at 10:00.

Small

Use small print for legal notes, side comments, or copyright text.

Code

[:small:]Some fine print.[:/small:]

Result

Progress

Show progress with numeric value and max attributes. Only numeric values are allowed.

Code

[:progress value="70" max="100":][:/progress:]

Result

Button Example

Add a simple button. For safety, only type="button" is allowed; other button types are ignored.

Code

[:button type="button":]Click me[:/button:]

[:button type="button" disabled="disabled":]Disabled[:/button:]

Result