Tags and content — HTML: Preprocessor Pug

The first thing you should get to know when learning Pug is HTML syntax. It's not very complicated, but it has a few key points that affect the compilation of markup.

Pug has no concept of opening and closing tags, all tags can just be entered, no need to close them. For example,

p
div
span
form

displays

<p></p>
<div></div><span></span>
<form></form>

This is one of the reasons developers love html preprocessors. How often have you made the mistake of not closing a tag? That's not going to happen here. Note that Pug places block elements on new lines and line elements on the same line when compiling into HTML. This can be a little confusing at first, but don't worry, you'll almost never need to look at the final HTML.

To embed content inside tags, there are three possible options:

1. Inline style: All content is placed immediately after the tag the tag is designated.
2. Pipe style: Content can be arranged on several lines. Each line begins with |
3. Block style: Content can be arranged in several lines. To do this, put a period straight after the tag.

p This is an inline style text. Inside the tag will be all the content that you put in the line.

p
  | Pipe style content
  | Each line begins with a vertical line

p.
  Block style: Any number of lines can be set here.
  And you don't need to use any special characters to do so.

<p>This is inline style text. Inside the tag will be all the content you specify in the line.</p>

<p>
  Pipe style content
  Each line begins with a vertical line
</p>

<p>
  Block style: Any number of lines can be set here.
  And you don't need to use any special characters to do so.
</p>

The hardest part of working with text in Pug is whitespace characters. Try different versions of the texts and tags inside. We'll deal with this question in more detail at the end of the lesson.

Tag nesting

Pug uses indentation to create nesting. There can be any number of them. This is often guided based on the standard indentation in HTML, i.e., two spaces. For example,

section
  p I am a nested paragraph in the
section
  h2 The best products in our store
  div
    h3 Product 1
    p Price: 55 rubles

<section>
  <p>I am a nested paragraph in a section</p>
</section>

<section>
  <h2>Best products in our store</h2>
  <div>
    <h3>Item 1</h3>
    <p>Price: 55 rubles</p>
  </div>
</section>

It's important to keep the same amount of indentation in all nested elements. In most cases, Pug will understand the markup correctly with varying amounts of indentation, but it could potentially lead to errors.

Attributes

Adding attributes can be a bit confusing at first. Pug provides several options for adding attributes.

1. Using parentheses. With this option, it's possible to add all arguments, including custom arguments.
2. Special syntax for classes and identifiers. They're simply designated inside the markup and are similar to CSS selectors

section(id='news-container' class='container')
section#news-container.container

<section class="container" id="news-container"></section>
<section class="container" id="news-container"></section>

In development, for classes, the second syntax is used and all other attributes are written in parentheses. There are no established standards here, but using it like this allows you to shorten your code in the following way, if you don't specify a tag, but write a class right away, Pug will automatically create a <div> with the right class.

.container(data-container='news')
  .row
    .col
      p Here's some text

<div class="container" data-container="news">
  <div class="row">
    <div class="col">
      <p>Here's some text</p>
    </div>
  </div>
</div>

Don't mix and match approaches If the project doesn't specify a div with a class, it's worth following this approach. It's always important to keep the overall style. If others working on the project used div, then you should too.

Tag interpolation

This tagging technique is quite rare, but you should always keep it in mind. Pug allows you to use a special construct to add a tag inside the text. It helps prevent the text being fragmented into several different parts. For example, how do you insert a tag inside such a paragraph?

p.
  Hexlet - hands-on programming courses.
  We help newbies become professional programmers, and help experienced developers gain new knowledge and grow professionally.

Pug allows you to simply wrap the desired part in a tag, but in this case you lose the semantics from using the preprocessor. After all, we're mixing regular HTML with Pug syntax

p.
  Hexlet - <strong>practical</strong> programming courses.
  We help newbies become professional programmers, and help experienced developers gain new knowledge and grow professionally.

The #[content tag] construct helps you avoid this.

p.
  Hexlet — #[strong practical] programming courses.
  We help newbies become professional programmers, and help experienced developers gain new knowledge and grow professionally.

<p>Hexlet — <strong>practical</strong> programming courses.
  We help newbies become professional programmers, and help experienced developers gain new knowledge and grow professionally
</p>

Whitespace symbols

The most common problem in learning Pug is understanding indentation. At first glance, it may seem that this should not be a problem, just put some indents in, and they'll appear in the HTML. And it's true that in most cases Pug will bring over all the whitespace characters as they were set, but there are some peculiarities. Let's look at an example of some pipe style text content.

Pipe style is useful if you want to use tags within the text. For example,

div
  | Want to get an item?
  | Use the
  button Order button
  | button and leave your contact details

You'll most likely expect the following result when translating to HTML:

<div>Want to get an item? Use the <button>Order</button> button and leave your contacts details</div>

You'll actually end out with this markup:

<div>Want to get an item? Use the<button>Order</button>button and leave your contact details</div>

Note the spaces around the <button> tag, or rather the lack of them; Pug removes all spaces between elements. This example has text and a button. Since these are two elements, the interpreter removes spaces between them, as they have no actual meaning. This is fine for removing extra characters between tags, but causes problems when you're adding an item inside the text.

There are several options for solving this problem:

1. Add an empty pipe string that converts to a whitespace character.
2. Use an HTML mnemonic.
3. Add extra spaces. This option is possible, but it's not worth using for reasons that we'll discuss later.

An empty pipe string is somewhat of an “official hack”. Any pipe string should return some sort of symbol, which has an unexpected benefit for developers. If the string itself is empty, the interpreter will insert a space character. It muddles up the final code a bit, but it looks decent enough to use this method. All you have to do is add a blank line before and after the element.

div
  | Want to get an item?
  | Use the
  |
  button Order button
  |
  | button and leave your contact details

<div>Want to get an item? Use the <button>Order</button> button and leave your contacts details</div>

The second way to solve the problem is to use an HTML mnemonic, a special construct that's converted into the desired characters by the browser. For non-breaking spaces, we have the   symbol. By adding it before and after the button, you can stop characters going missing.

div
  | Want to get an item?
  | Use the  
  button Order
  |  button and leave your contact details

<div>Want to get an item? Use the&nbsp;<button>Order</button>&nbsp;and leave your contact details</div>

Try adding this HTML code to your file and see how the browser converts the mnemonics to the right characters.

The last method, which may help in the example above, is to add separate spaces in the Pug markup. This method is similar to the use of mnemonics, only instead of them, a character is added instead. Pug doesn't remove whitespace characters within an element. If you add a thousand spaces between two words, the interpreter will carefully bring them over into the markup. So all you need to do is add a space after the phrase «Use the» and before the phrase «button and leave your contact details». While this method works, it has a few problems:

1. This kind of markup is hard to read. It's not always possible to immediately understand how many spaces there are in front of the line, and the number of spaces after the line isn't visible at all.
2. Most code editors automatically remove characters at the end of a line because they're usually unnecessary. In this case, there's no way to add a space after the phrase «Use the».

Now you can forget the last two paragraphs and pretend you've never heard about this.

Additional assignment

Using Pug syntax, reproduce the following markup:

<section class="container">
  <div class="col-2">
    <div class="content">
      <h1>About Hexlet</h1>
      <p>Hexlet - hands-on programming courses. We help newbies become professional programmers, and help experienced developers gain new knowledge and grow professionally.</p>
    </div>
    <div class="side">
      <ul>
        <li><strong>Theory.</strong> A short lecture in text or video form. It's task-based, so unlike traditional academic theory, we focus on a specific problem that's already been solved by clever engineers and programmers, and then follow their steps to understand the solution.</li>
        <li><strong>Test.</strong> Check your understanding. We don't care about memorizing facts, so the test questions are aimed at understanding the concept, not exercising your memory.</li>
        <li><strong>Practice.</strong> Programming exercises in a real development environment, accessible through the browser. Not a simulation or a toy, but rather on a real machine with databases, frameworks, servers, and other tools.</li>
      </ul>
    </div>
  </div>
</section>

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.