This page describes the XHTML-based format that Confluence uses to store the content of pages, blog posts and comments. This information is intended for advanced users who need to interpret and edit the underlying markup of a Confluence page.

We refer to the Confluence storage format as 'XHTML-based'. To be correct, we should call it XML, because the Confluence storage format does not comply with the XHTML definition. In particular, Confluence includes custom elements for macros and more. We're using the term 'XHTML-based' to indicate that there is a large proportion of HTML in the storage format.

Notes:

  • You can view the Confluence storage format for a given page by choosing Tools > View Storage Format. This option is only available if one of the following is true:
    • You are a Confluence administrator.
    • Your Confluence site has the Confluence Source Editor plugin installed and you have permission to use the source editor.
  • If you would like to edit the storage format for a page, your Confluence system administrator will need to install the Confluence Source Editor plugin.
  • Clarification of terminology: If you choose Tools > View Source, you will see the format used within the editor panel, not the storage format of the page.

  • A request from the Atlassian technical writers about comments and feedback: When adding comments to this page, please restrict your comments to constructive feedback on the documentation itself: Things we've missed in the documentation, and things that will be useful to other readers. If you have other feedback about the editor, wiki markup, the XML storage format, and Confluence 4 in general, please add your comments in the section titled Confluence 4 Editor - Customer Feedback, and its child pages. Our reason for this request: When a page attracts a large number of comments, it makes it difficult for everyone to read the page, and to add or respond to comments about the documentation. Thanks. (smile)

On this page:

Related pages:

Macros

 See Confluence Storage Format for Macros.

Headings

Format type

In Confluence 3.5 and earlierIn Confluence 4.0 and laterWhat you will get 
Heading 1

h1. Heading 1

<h1>Heading 1</h1> 

Underlined in the Documentation Theme
Heading 2
h2. Heading 2
<h2>Heading 2</h2> 

Underlined in the Documentation Theme
Heading 3
h3. Heading 3
<h3>Heading 3</h3> 

 
Headings 4 to 6 are also available and follow the same pattern    

 

Text effects

Format type

In Confluence 3.5 and earlierIn Confluence 4.0 and laterWhat you will get 
strong/bold
*strong*
<strong>strong text</strong>
strong<b> will also work but get converted to <strong> upon saving
emphasis
_emphasis_
<em>Italics Text</em>
emphasis<i> will also work but get converted to <em> upon saving
strikethrough
-strikethrough-
<span style="text-decoration: line-through;">strikethrough</span>
strikethrough<s> and <del> will also work
underline
+underline+
<u>underline</u>
underline 
superscript
^superscript^
<sup>superscript</sup>
superscript 
subscript
~subscript~
<sub>subscript</sub>
subscript 
monospace
{{monospaced}}
<code>monospaced</code>
monospaced 
preformattedn/a
<pre>preformatted text</pre>

 

 

preformatted text
 
block quotes
bq. block quote

or

{quote} 

              block

              quote

              {quote}
<blockquote><p>block quote</p></blockquote>
block quote
 
text colour
{color:red}red text{color}
<span style="color: rgb(255,0,0);">red text</span>
red text 
small n/a
<small>small text</small>

 

 

small text

 
bign/a
<big>big text</big>

big text

 
center-alignn/a
<p style="text-align: center;">centered text</p>
centered text 
right-alignn/a
<p style="text-align: right;">right aligned text</p>

right aligned text

 

Text breaks

Format type

In Confluence 3.5 and earlierIn Confluence 4.0 and laterWhat you will get
New paragraph
Paragraph 1

              (empty line)

              Paragraph 2 
<p>Paragraph 1</p>
<p>Paragraph 2</p>

Paragraph 1

Paragraph 2

Line break
Line 1 \\ Line 2
Line 1 <br /> Line 2

Note: Created in the editor using Shift + Return/Enter

Line 1
Line 2 
Horizontal rule----
<hr />

— symbol

---
&mdash;

—

– symbol--
&ndash;

–

Lists

Format type

In Confluence 3.5 and earlerIn Confluence 4.0 and laterWhat you will get
Unordered list – round bullets
* Round bullet list item
<ul>
<li>round bullet list item</li>
</ul>
  • Round bullet list item
Unordered list – squarebullets
- Square bullet list item
<ul style="list-style-type: square;">
<li>square bullet list item</li>
</ul>
  • Square bullet list item
Ordered list (numbered list)
# Ordered list item
<ol>
<li>numbered list item</li>
</ol> 
  1. Ordered list item

Format type

In Confluence 3.5 and earlierIn Confluence 4.0 and laterWhat you will get
Link to another Confluence page
[Link to another Confluence page|Page Title]
<ac:link>
<ri:page ri:content-title="Page Title" />
<ac:plain-text-link-body>
 <![CDATA[Link to another Confluence Page]]>
</ac:plain-text-link-body>
</ac:link> 
Link to another Confluence page
Link to an attachment
[Link to an attachment^atlassian_logo.gif]
<ac:link>
<ri:attachment ri:filename="atlassian_logo.gif" />
<ac:plain-text-link-body>
 <![CDATA[Link to a Confluence Attachment]]>
</ac:plain-text-link-body>
</ac:link>


Link to an attachment
Link to an external site
[Atlassian|http://www.atlassian.com/]
<a href="http://www.atlassian.com">Atlassian</a>
Atlassian
Anchor link
[Anchor Link|pagetitle#anchor]
<ac:link ac:anchor="Anchor Link">
<ac:plain-text-link-body>
  <![CDATA[Anchor Link]]>
</ac:plain-text-link-body>
</ac:link>
Anchor Link
Link with an embedded image for the body[!google.png!|pagetitle#anchor]
<ac:link ac:anchor="Anchor Link">
  <ac:link-body>
	<ac:image><ri:url ri:value="http://confluence.atlassian.com/images/logo/confluence_48_trans.png" /></ac:image>
  </ac:link-body>
</ac:link>

For rich content like images, you need to use ac:link-body to wrap the contents.

 

A note about link bodies

All links received from the editor will be stored as plain text by default, unless they are detected to contain the limited set of mark up that we allow in link bodies. Here are some examples of markup we support in link bodies.

An example of different link bodies
<ac:link>
  <!-- Any resource identifier --> 
  <ri:page ri:content-title="Home" ri:space-key="SANDBOX" /> 
  <ac:link-body>Some <strong>Rich</strong> Text</ac:link-body>
</ac:link>
<ac:link>
  <ri:page ri:content-title="Plugin developer tutorial stuff" ri:space-key="TECHWRITING" />
  <ac:plain-text-link-body><![CDATA[A plain <text> link body]]></ac:plain-text-link-body>
</ac:link>
<ac:link>
  <ri:page ri:content-title="Plugin developer tutorial stuff" ri:space-key="TECHWRITING" />
  <!-- A link body isn't necessary. Auto-generated from the resource identifier for display. --> 
</ac:link>

 

The markup tags permitted within the <ac:link-body> are <b>, <strong>, <em>, <i>, <code>, <tt>, <sub>, <sup>, <br> and <span>.

Images

Format type

In Confluence 3.5 and earlierIn Confluence 4.0 and laterWhat you will get
Attached image
!atlassian_logo.gif!
<ac:image>
<ri:attachment ri:filename="atlassian_logo.gif" />
</ac:image>
External image
!http://confluence.atlassian.com/images/logo/confluence_48_trans.png!
<ac:image>
<ri:url ri:value="http://confluence.atlassian.com/images/logo/confluence_48_trans.png" /></ac:image>

Supported image attributes (some of these attributes mirror the equivalent HTML 4 IMG element): 

NameDescription
ac:alignimage alignment
ac:borderSet to "true" to set a border
ac:classcss class attribute.
ac:titleimage tool tip.
ac:stylecss style
ac:thumbnailSet to "true" to designate this image as a thumbnail.
ac:altalt text
ac:heightimage height
ac:widthimage width
ac:vspacethe white space on the top and bottom of an image
ac:hspacethe white space on the left and right of an image

Tables

Format type

In Confluence 3.5 and earlierIn Confluence 4.0 and laterWhat you will get 
Two column, two row (top header row)
||Table Heading Cell 1||Table Heading Cell 2||

              |Normal Cell 1|Normal Cell 2|
<table>
<tbody>
  <tr>
    <th>Table Heading Cell 1</th>
    <th>Table Heading Cell 2</th>
  </tr>
  <tr>
    <td>Normal Cell 1</td>
    <td>Normal Cell 2</td>
  </tr>
</tbody>
</table> 
Table Heading Cell 1Table Heading Cell 2
Normal Cell 1Normal Cell 2
Two column, three rows, 2nd and third with merged cells in first rowN/A
<table>
<tbody>
  <tr>
    <th>Table Heading Cell 1</th>
    <th>Table Heading Cell 2</th>
  </tr>
  <tr>
    <td rowspan="2">Merged Cell</td>
    <td>Normal Cell 1</td>
  </tr>
  <tr>
    <td colspan="1">Normal Cell 2</td>
  </tr>
</tbody>
</table> 
Table Heading Cell 1Table Heading Cell 2
Merged CellNormal Cell 1
Normal Cell 2

Page layouts

Confluence supports page layouts directly, as an alternative to macro-based layouts such as those using the section and column macros. This section documents the storage format XML created when these layouts are used in a page.

Notes:

  • Page layouts were introduced in Confluence 4.2, and are not available in earlier versions of Confluence.
  • The word {content} in the layouts below indicates where further XHTML or Confluence storage format block content would be entered, such as <p> or <table> tags.
Layout TypeIn Confluence 4.2 and later
Two columns
<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-two-simple&quot;,&quot;columns&quot;:[&quot;&quot;,&quot;&quot;]}">
  <div class="columnLayout twoColumns">
      <div class="cell ">
          <div class="innerCell">
              {content}
         </div>
      </div>
      <div class="cell ">
         <div class="innerCell">
            {content}
         </div>
      </div>
   </div>
</div> 
Left sidebar
<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-two-simple-left&quot;,&quot;columns&quot;:[&quot;aside&quot;,&quot;large&quot;]}">
  <div class="columnLayout twoColumns">
     <div class="cell aside">
         <div class="innerCell">
             {content}
         </div>
     </div>
     <div class="cell large">
         <div class="innerCell">
             {content}
         </div>
     </div>
  </div>
</div>
Right sidebar
<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-two-simple-right&quot;,&quot;columns&quot;:[&quot;large&quot;,&quot;aside&quot;]}">
  <div class="columnLayout twoColumns">
      <div class="cell large">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell aside">
          <div class="innerCell">
              {content}
          </div>
      </div>
  </div>
</div>
Three columns
<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-three-simple&quot;,&quot;columns&quot;:[&quot;&quot;,&quot;&quot;,&quot;&quot;]}">
  <div class="columnLayout threeColumns">
      <div class="cell ">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell ">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell">
          <div class="innerCell">
              {content}
          </div>
      </div>
   </div>
</div>
Two columns with header and footer
<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-two&quot;,&quot;columns&quot;:[&quot;&quot;,&quot;&quot;],&quot;header&quot;:true,&quot;footer&quot;:true}">
  <div class="header">
      <div class="innerCell">
          {content}
      </div>
  </div>
  <div class="columnLayout twoColumns">
     <div class="cell ">
         <div class="innerCell">
             {content}
         </div>
     </div>
     <div class="cell ">
         <div class="innerCell">
             {content}
         </div>
     </div>
  </div>
  <div class="footer">
      <div class="innerCell">
          {content}
      </div>
  </div>
</div>
Left sidebar with header and footer
<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-two-left&quot;,&quot;columns&quot;:[&quot;aside&quot;,&quot;large&quot;],&quot;header&quot;:true,&quot;footer&quot;:true}">
  <div class="header">
      <div class="innerCell">
          {content}
      </div>
  </div>
  <div class="columnLayout twoColumns">
      <div class="cell aside">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell large">
          <div class="innerCell">
              {content}
          </div>
      </div>
  </div>
  <div class="footer">
      <div class="innerCell">
         {content}
      </div>
  </div>
</div>
Right sidebar with header and footer
<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-two-right&quot;,&quot;columns&quot;:[&quot;large&quot;,&quot;aside&quot;],&quot;header&quot;:true,&quot;footer&quot;:true}">
  <div class="header">
      <div class="innerCell">
         {content}
      </div>
  </div>
  <div class="columnLayout twoColumns">
      <div class="cell large">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell aside">
          <div class="innerCell">
              {content}
          </div>
      </div>
  </div>
  <div class="footer">
      <div class="innerCell">
          {content}
      </div>
  </div>
</div>
Three columns with header and footer
<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-three&quot;,&quot;columns&quot;:[&quot;&quot;,&quot;&quot;,&quot;&quot;],&quot;header&quot;:true,&quot;footer&quot;:true}">
  <div class="header">
      <div class="innerCell">
          {content}
      </div>
  </div>
  <div class="columnLayout threeColumns">
      <div class="cell ">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell ">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell">
          <div class="innerCell">
              {content}
          </div>
      </div>
  </div>
  <div class="footer">
      <div class="innerCell">
          {content}
      </div>
  </div>
</div>
Left and right sidebar with header and footer
<div class="contentLayout" data-atlassian-layout="{&quot;name&quot;:&quot;pagelayout-three-sidebars&quot;,&quot;columns&quot;:[&quot;sidebars&quot;,&quot;large&quot;,&quot;sidebars&quot;],&quot;header&quot;:true,&quot;footer&quot;:true}">
  <div class="header">
      <div class="innerCell">
          {content}
      </div>
  </div>
  <div class="columnLayout threeColumns">
      <div class="cell sidebars">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell large">
          <div class="innerCell">
              {content}
          </div>
      </div>
      <div class="cell sidebars">
          <div class="innerCell">
              {content}
          </div>
      </div>
  </div>
  <div class="footer">
      <div class="innerCell">
          {content}
      </div>
  </div>
</div> 

Emoticons

Format type

In Confluence 3.5 and earlierIn Confluence 4.0 and laterWhat you will get
Emoticons:) 
<ac:emoticon ac:name="smile" />

(smile)

 :(  
<ac:emoticon ac:name="sad" />
(sad)
 :P  
<ac:emoticon ac:name="cheeky" />
(tongue)
 :D  
<ac:emoticon ac:name="laugh" />
(big grin)
 ;)  
<ac:emoticon ac:name="wink" />
(wink)
 (y)  
<ac:emoticon ac:name="thumbs-up" />
(thumbs up)
 (n)  
<ac:emoticon ac:name="thumbs-down" />
(thumbs down)
 (i)  
<ac:emoticon ac:name="information" />
(info)
 (/)  
<ac:emoticon ac:name="tick" />
(tick)
 (x)  
<ac:emoticon ac:name="cross" />
(error)
 (!)
<ac:emoticon ac:name="warning" />
(warning)

Resource identifiers

Resource identifiers are used to describe "links" or "references" to resources in the storage format. Examples of resources include pages, blog posts, comments, shortcuts, images and so forth. 

Resource

Resource identifier format
Page
<ri:page ri:space-key="FOO" ri:content-title="Test Page"/>

Notes:

  • ri:space-key: (optional) denotes the space key. This can be omitted to create a relative reference.
  • ri:content-title: (required) denotes the title of the page.
Blog Post
<ri:blog-post ri:space-key="FOO" ri:content-title="First Post" ri:posting-day="2012/01/30" />

Notes:

  • ri:space-key: (optional) denotes the space key. This can be omitted to create a relative reference.
  • ri:content-title: (required) denotes the title of the page.
  • ri:posting-day: (required) denotes the posting day. The format is YYYY/MM/DD.
Attachment
<ri:attachment ri:filename>
	... resource identifier for the container of the attachment ...
</ri:attachment>

Notes:

  • ri:filename: (required) denotes the name of the attachment.
  • the body of the ri:attachment element should be a resource identifier denoting the container of the attachment. This can be omitted to create a relative attachment reference (similar to [foo.png] in wiki markup).

Examples:

Relative Attachment Reference
<ri:attachment ri:filename="happy.gif" />
Absolute Attachment Reference
<ri:attachment ri:filename="happy.gif">
	<ri:page ri:space-key="TST" ri:content-title="Test Page"/>
</ri:attachment>
URL
<ri:url ri:value="http://example.org/sample.gif"/>

Notes:

  • ri:value: (required) denotes the actual URL value.
Shortcut
<ri:shortcut ri:key="jira" ri:parameter="ABC-123">

Notes:

  • ri:key: (required) represents the key of the Confluence shortcut.
  • ri:parameter: (required) represents the parameter to pass into the Confluence shortcut.
  • The example above is equivalent to [ABC-123@jira] in wiki markup.
User
<ri:user ri:username="fred"/>

Notes:

  • ri:username: (required) denotes the name of the user.
Space
<ri:space ri:space-key="TST"/>

Notes:

  • ri:space-key: (required) denotes the key of the space.
Content Entity
<ri:content-entity ri:content-id="123"/>

Notes:

  • ri:content-id: (required) denotes the id of the content.
  • No labels

Except where otherwise noted, content in this space is licensed under a Creative Commons Attribution 2.5 Australia License.