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:
|
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.
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.
Adding attributes can be a bit confusing at first. Pug provides several options for adding attributes.
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.
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>
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:
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 <button>Order</button> 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:
Now you can forget the last two paragraphs and pretend you've never heard about this.
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>
The Hexlet support team or other students will answer you.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.