` classes in `.adoc` files, as long as we understand how to use it.
Asciidoctor does not call these "divs" or "classes", but instead "_roles_".
We can give any content a role - to images, content blocks (such as `[source]` or `[NOTE]`, etc.), even a word in the middle of a sentence.
Because roles are so flexible, they only apply to the thing - the word, content block, image, etc., - they are directly applied to.
This means that if we want an entire section of content to be given a specific role in the HTML (i.e., enclosed in a `
`), then we need to put the content in a block.
TIP: For more on Roles in Asciidoctor, see https://docs.asciidoctor.org/asciidoc/latest/attributes/roles/[Role Attribute] in the Asciidoctor User Guide.
== Tabbed Sections
Tabbed sections are supported via https://github.com/asciidoctor/asciidoctor-tabs[`@asciidoctor/tabs`].
There are different ways to display tabbed sections via the asciidoctor tabs extension, but most of the time only the format of an example is needed.
This format wraps each tab content into an example block.
=== Referencing
By providing an ID to the `[tabs]` block like below, you can control the ID used for referencing the tabbed section.
An ID is also generated for each tab by aggregating the normalized tab label to the end of the `[tabs]` ID.
This allows a direct referencing of a specific tab, even if it is not currently selected.
=== Tab Synchronization
The IDs are also used for synchronizing the tab selection across the entire page.
This synchronization requires the tab labels to be named the same, so that the generated ID is correctly recognized.
To enable this feature, add `:tabs-sync-option:` below the page title.
[source,asciidoc]
----
= Page Title
:tab-sync-option:
...
----
It is also possible to group tabbed sections to sync only a set of tabs, or disable the syncing entirely.
See the https://github.com/asciidoctor/asciidoctor-tabs?tab=readme-ov-file#syntax[@asciidoctor/tabs syntax] fore more information.
=== Tabs Example
. Define a tabs block and give it an optional ID.
+
[source,asciidoc]
----
[tabs#tab-section-id]
----
. Next, we add an example block to wrap the tab's content with an outline. This is used for improved readability.
+
[source,asciidoc]
----
[tabs#tab-section-id]
======
======
----
. Inside the example block, we can add our tabs. Each tab label is suffixed with `::` and the tab's content is wrapped inside a listing block.
+
[source,asciidoc]
----
Tab 1::
+
====
The first tab's content.
====
Tab 2::
+
====
The second tab's content.
====
----
The final result will look something like this:
[source,asciidoc]
----
[tabs#tab-section-id]
======
Tab 1::
+
====
The first tab's content.
====
Tab 2::
+
====
The second tab's content.
====
======
----
The tab section can be referenced via `#tab-section-id`, and each tab can be referenced via `#tab-section-id-tab-1` and `#tab-section-id-tab-2` accordingly.