Version: v0.6.1 - Beta.  We welcome contributors & feedback.  THanks!

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
    }

</>

ImportantContent inside triple-arrow tags must be indented within the open and close tags.

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>

See Also