HTML-C Shortcuts A more concise way of writing HTML
Welcome
HTML-C is an unofficial superset of HTML that can be used within HTML templates.
It adds shortcuts to make reading and writing HTML easier, by reducing repetition and visual noise.
Whitespace
The HTML-C pre-processor will remove all surrounding whitespace from each line.
If you need a space between elements, you can add a .
<div> <b>text 1</b> <b>text 2</b> <b>text 3</b> </div> // converts to... <div><b>text 1</b><b>text 2</b><b>text 3</b></div>
Shortcuts
Slash Tags </>
It’s not necessary to include the tag name in closing tags. A single slash is fine.
<p>
This is a <em>special message</> just for you!
</>Double-Arrow Tags <...>>
Double-arrow tags automatically close at the end of the line.
Include a space after the tag, for readability. It will be trimmed.
<h2>> Look at these bullets <ul> <li>> This is bullet 1 <li>> This is bullet 2 <li>> This is bullet 3 </>
Nesting Double-Arrow Tags
You can use more than one double-arrow tag per line. They will be closed in the correct order.
// THT template: <h2>> Unread Messages: <strong>> 2 // will translate to... <h2>Unread Messages <strong>2</strong></h2>
Triple-Arrow Tags <...>>>
Content inside of triple-arrow tags is passed through verbatim.
Extra indentation and surrounding whitespace is trimmed.
This is useful for <pre> and <textarea> tags.
<pre>>>
if (condition) {
// run code here
}
</>Dotted Tags <.class>
At the start of the tag, you can include CSS-style selectors to specify the class or classes.
If no tag name is included, it will default to div.
<.sidebar>
<p>> Make sure you <span.callout>do it</>:
<.button.button-primary>> Press the Button
</>
// converts to...
<div class='sidebar'>
<p>Make sure you <span class='callout'>do it</span>:</p>
<div class='button button-primary'>Press the Button</div>
</div>