Text formatting
Headers
6 levels of HTML headings are supported:
<h1>h1. Heading</h1> <h2>h2. Heading</h2> <h3>h3. Heading</h3> <h4>h4. Heading</h4> <h5>h5. Heading</h5> <h6>h6. Heading</h6>
Copied to clipboard
Heading customization
To style your headings with CSS, use the following class selectors:
h1 | .title_size_l |
h2 | .title_size_m |
h3 | .title_size_s |
h4 | .title_size_xs |
h5 | .title_size_xxs |
h6 | .title_size_xxxs |
h1 | .title_size_l |
h2 | .title_size_m |
h3 | .title_size_s |
h4 | .title_size_xs |
h5 | .title_size_xxs |
h6 | .title_size_xxxs |
Inline tags
You can use main HTML tags for text formatting.
<p>Paragraph.</p> <p><b>Text in bold.</b></p> <p><strong>Important text.</strong></p> <p><i>Text in italics</i></p> <p><em>Emphasized text.</em></p> <p>2<sup>10</sup> = 1024<p> <p>H<sub>2</sub>SO<sub>4</sub><p> <p>Main text, <p>Main text, <p><small>Text 1em smaller</small></p> <p><big>Text 1em bigger</big></p> <code>code</code>
Copied to clipboard
- h1–h6
- p
- a
- br
- hr
- ul
- ol
- li
- b
- strong
- i
- em
- sup
- sub
- ins
- del
- small
- big
- pre
- abbr
- u
- table
- div
- code
- aside
- main
- footer
- section
List of all supported tags
Attention. The
span
, aside
, main
, footer
, and section
tags will be moved to the Turbo page if the turbo:extendedHtml
option is enabled.Links in the text
Turbo pages support several link types:
- Link to another page on the site.
- Link to an anchor within the page or to an anchor on another page.
To add links in Turbo pages, use the a element:
<a href="https://example.com" data-turbo="true">Text</a>
Copied to clipboard
href
*URL or anchor.
data-turbo
Attribute that determines which page version opens when clicking the link. Possible values:
- true — The link opens the Turbo version of the page, if it is generated. Set as default.
- false — The link opens a regular page or its mobile version.
If the data-turbo attribute is omitted, the link opens a Turbo page, if it was generated.
* Required
Link examples:
<a href="http://example.com/page2/">Link to another Turbo page</a><br>
<a href="http://example.com/page2/" data-turbo="false">Link to a regular page</a><br>
<a href="http://example.com/page2/#topic2">Link to the anchor of another page</a><br>
<a href="http://example.com/page1/#title">Link to the h1 heading on this page</a><br>
<a href="#component">Link to the accordion content on this page</a><br>
<h1 id="title">Heading</h1>
<div data-block="accordion" id="component">
<div data-block="item" data-title="Moscow">Text</div>
<div data-block="item" data-title="Saint Petersburg" data-expanded="true">Text</div>
</div>
As an anchor, you can use the accordion content or the h1–h6 headings. For the anchor element, add the unique ID (the id attribute).
Quotes in the text
To format a quote, wrap the necessary part of the markup in the blockquote
element.
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur, eros eu venenatis viverra, ante purus condimentum velit, rutum porttitor.</p> </blockquote>
Copied to clipboard
Definition list
To format the definition list, use the dl
, dt
, dd
elements.
Attention. Turbo pages don't support nested elements in the
dd
block.<dl> <dt>Term 1</dt> <dd>Definition of term 1</dd> <dt>Term 2</dt> <dd>Definition of term 2</dd> <dt>Term 3</dt> <dd>Definition of term 3</dd> </dl>
Copied to clipboard