Elements

Writing out an element in GoHT is the same as it is in Haml.

To create an element you use the percent symbol % followed by the tag name. For example, to create a span tag you would use %span.

%span This is a span tag

renders as:

<span>This is a span tag</span>

Implicit Divs

Modern HTML is full of div tags. They are used to group elements together, apply some common styles, and to create a structure for the page. For all of these reasons and more Haml provided two additional ways of creating elements, provided you want that element to be a div tag.

The first way is to simply use a class name. This is done by using a period . followed by the class name. For example, to create a div tag with the class container you would use .container.

.container
  %span This span is contained!

renders as:

<div class="container">
  <span>This span is contained!</span>
</div>

You can add multiple classes by using multiple periods.

.container.wrapper
  %span This span is contained and wrapped!

renders as:

<div class="container wrapper">
  <span>This span is contained and wrapped!</span>
</div>

The second way is to use an id. This is done by using a hash symbol or pound sign # followed by the id name. For example, to create a div tag with the id main you would use #main.

#main
  %span This span is in the one and only main!

renders as:

<div id="main">
  <span>This span is in the one and only main!</span>
</div>

GoHT will not complain if you use multiple ids, but it is not valid HTML to have multiple ids on an element and so the last id will be used.

Combined

The three can be combined to create elements with classes and ids.

#main.wrapper
  %article
    %h1.title This is the title
    %h2.subtitle This is the subtitle

renders as:

<div id="main" class="wrapper">
  <article>
    <h1 class="title">This is the title</h1>
    <h2 class="subtitle">This is the subtitle</h2>
  </article>
</div>

You can see here the substantial reduction in the amount of typing that needs to go into writing a simple HTML structure. This is one of the reasons why Haml is so popular.

Self-Closing Tags

Some tags in HTML are self-closing. This means that they do not have a closing tag. For reference, the img tag is self-closing. GoHT has a built-in list of self-closing tags that it will automatically close for you. You can also use the forward slash / character to indicate that a tag is self-closing.

%my-self-closing-tag/

renders as:

<my-self-closing-tag />

Content on the same line vs nested

You can add content to an element on the same line as the tag, or you can nest it under the tag. This is the same as in Haml.

%span This is on the same line as the tag
%span
  This is nested under the tag

renders as:

<span>This is on the same line as the tag</span>
<span>
This is nested under the tag
</span>

The second span tag has a newline before and after the content. This is because the content is nested under the tag. The first span tag does not have a newline before the content because it is on the same line as the tag.

Nested content will always include a newline as whitespace before and after the content. You can control how much whitespace is rendered into the final output if you want.