Opa: Up and Running

Chapter 2. Opa Fundamentals

In Chapter 1, you wrote your first Opa program. That will always return the same value, Hello, world, as a main title. The value itself is:

<h1>Hello, world</h1>

This value is an HTML fragment, one of the primitive values of Opa. The second myapp application you saw in Chapter 1 also contains HTML values in src/view/page.opa:

content =
  <div class="hero-unit">
    Page content goes here...
  </div>

Here, the HTML value is named content, so it can be reused later.

Tip

Opa also offers a universal closing tag, </>, that you can use to close any tag. In the previous case, you could have written:

content =
  <div class="hero-unit">
    Page content goes here...
  </>

Let’s discover the Opa values right now.

Primitive Values

As with most programming languages, Opa supports strings, integers, and floats, but Opa also supports native web values such as HTML and CSS elements. As you can see, comments in Opa consist of text preceded by double slashes, //:

"hi" // a string
12 // an integer
3.14159 // a float
<p>Paragraph</p> // an HTML fragment
#id // a DOM identifier
css {color: black} // a CSS property

HTML values are fragments of HTML5. Each fragment has an opening tag such as <p> and a closing tag such as </p>. The <p> tag is the tag that defines a paragraph. We will provide a more complete list of tags shortly, but for now here are the main ones (see Table 2-1):

Table 2-1. Most common tags in HTML5

Tag	Definition
video	Video item
p	Paragraph
h1	Level 1 title (header)
h2..6	Level 2 to 6 ...