---json
{
    "description": "A description for the search page result engine",
    "page_id": "ehow19jms037wxbiv8yuc",
    "title": "ComboStrap Heading"
}
---

====== ComboStrap UI - Heading ======


===== About =====
An ''heading'' has two different functions:
  * the first one is ''structural'' and generates the [[docs:navigation:outline|outline (structure of the document]]). The table of content (TOC) is created from this structure.
  * the second one is ''semantic'' and defines the title of a [[docs:block:block|block component]].


The rule is simple, when a heading is not in a [[docs:component|component]], it's a [[docs:navigation:outline|outline heading]], otherwise, it's the ''title'' of the component.

<note info>
If you search the ''title'' of a ''page'', see the page [[docs:page:title]]
</note>



===== Syntax =====
To define an heading, you can use the following ''heading'' syntax.

==== Wiki ====
The wiki heading start with 6 hashtag ''%%#%%'' characters for the level 1 ([[docs:page:h1|h1]]) and goes down by one.

The higher the level, the higher the visual emphasis.



<webcode name="Default" iframe>
<code dw>
====== Headline Level 1 <icon name="bs:card-heading"/> ======
===== Headline Level 2 =====
==== Headline Level 3 ====
=== Headline Level 4 ===
== Headline Level 5 ==
</code>
</webcode>

To facilitate the writing, you can use the following keyboard shortcuts:
  * select the heading text
  * and type one of the following [[docs:utility:shortcut|keyboard shortcuts]]:
      * ''alt+8'' for the same level than the previous heading
      * ''alt+9'' for a level lower than the previous heading
      * ''alt+0'' for a level higher than the previous heading

### Markdown


The [[docs:utility:markdown|markdown]] atx heading start with 1 or more hashtag ''%%#%%'' characters.
  * The level 1 heading (the title) starts with #,
  * section headings with ##,
  * subheads with ###,
  * and so on.

This is:
  * the best syntax for writing because you just need to adds up the number of hashtag to get the wanted heading level.
  * the worst syntax visually because a lower level will have more emphasis than an higher

<webcode name="Default" frameborder="0" iframe>
<code marki>
# Headline Level 1 <icon name="bs:card-heading"/>
## Headline Level 2 <icon name="bs:card-heading"/>
### Headline Level 3
#### Headline Level 4
##### Headline Level 5
###### Headline Level 6
</code>
</webcode>

<heading h3>Marki</heading>

''heading'' is a [[docs:marki|marki syntax]]. You can therefore apply all [[docs:styling:styling|styling attributes]] (such as adding an ''id'' if you want to specify your fragment)

<code dw>
<heading type level=1-6>
Heading
</heading >
</code>
where:
  * [[docs:styling:type|type]] is:
      * ''h1'' to ''h6'' for HTML heading styling
      * ''d1'' to ''d4'' for bigger heading display (used mostly in landing page)
  * ''level'' is the heading level (ie 1 to 6, default to the number in the type)


Example:
  * HTML Heading
<webcode name="Type" iframe>
<code dw>
<heading h1>Heading 1</heading>
<heading h2>Heading 2</heading>
<heading h3>Heading 3</heading>
<heading h4>Heading 4</heading>
<heading h5>Heading 5</heading>
<heading h6>Heading 6</heading>
</code>
</webcode>

  * Display Heading
<webcode name="Type" iframe>
<code dw>
<heading d1>Heading 1</heading>
<heading d2>Heading 2</heading>
<heading d3>Heading 3</heading>
<heading d4>Heading 4</heading>
</code>
</webcode>


===== Configuration =====
==== headingWikiEnable ====
You can disable the [[#wiki|combo wiki heading]] and uses the standard dokuwiki syntax.

It's used mainly if you want to use:
  * the [[support:include|include plugin]] to include section.
  * the [[support:ckgedit|ckgedit editor plugin]]