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 ...

Get Opa: Up and Running now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.