HTML-C Shortcuts A more concise way of writing HTML
HTML-C is an unofficial superset of HTML that can be used within templates.
It makes it easier to read and write HTML by removing redundant visual clutter, making whitespace easier to manage, and providing shortcuts.
Shortcuts
Slash Tags </>
You can omit tag names in closing tags.
<p>
This is a <em>special message</> just for you!
</>
Auto-Closing Lines
If a tag is followed by content on the same line, it will automatically close at the end of the line.
An additional leading space is recommended for readability. (It will be trimmed.)
<h2> Some Bullets
<ul>
<li> This is bullet 1
<li> This is bullet 2
<li> This is bullet 3
</>
Multiple tags on the same line will be closed in the correct order.
<h2> Unread Messages: <strong> 2 // converts to... <h2>Unread Messages: <strong>2</strong></h2>
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> Please <span.callout>do this</>:
<.button.button-primary> Press the Button
</>
// converts to...
<div class='sidebar'>
<p>Please <span class='callout'>do this</span>:</p>
<div class='button button-primary'>Press the Button</div>
</div>
Triple-Arrow Tags <...>>>
Content inside of a triple-arrow tag will be passed through verbatim.
Extra whitespace is trimmed while retaining relative indent levels.
This is useful for <pre> and <textarea> tags with code snippets.
<pre>>>
.my-css-class {
border: solid 2px #333;
}
</>
Whitespace
Line 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 non-breaking space ( ).
<div> <b>item 1 <b>item 2 <b>item 3 </div> // converts to... <div><b>item 1</b><b>item 2</b><b>item 3</b></div>
Tag Whitespace
All leading and trailing whitespace inside tags is removed.
<p> This is a <b>Message </b>! </p> // converts to... <p>This is a <b>Message</b>!</p>