What's inside this article:
Basic information
This article explains how to insert HTML code into CKEditor.
This option is available when you create the following text content pages:
- Article
- Blog
- FactCheck (create the Verdict content)
- Feature
- Feature story
- Live blog (create a post)
- News
- Transcript
This option is also available when you add content to an HTML widget.
Open Source Code View
Insert HTML code via Source Code View.
To learn how to open Source Code View, go to the relevant section below:
Create a text content page
Follow these steps:
- Go to Editor on the edit screen for the content page.
- Click inside the main box to reveal the CKEditor bar.
- Hit the Source Code View button.
Source Code View opens.
To learn how to create a text content page from the beginning, see the relevant article below:
Build an HTML widget
Follow these steps:
- Go to Content in the widget builder.
- Hit the Source Code View button in the CKEditor bar.
Source Code View opens.
To learn how to build an HTML widget from the beginning, see the following article:
Enter and apply code
IMPORTANT: For security reasons, we enforce strict limitations on the code that can be applied via Source Code View. For a list of supported HTML tags, go to Supported code.
To apply HTML code:
- Type or paste the code under HTML code.
- Select Apply. After you perform this action, unsupported code will be removed and you will not be notified. We suggest you only enter code that you know is supported. For details, go to the following section:
The code is now rendered.
Supported tags
The following basic HTML tags are supported:
Paragraphs and breaklines | |
| Tag | Function |
| <p></p> | Defines a paragraph. |
| <br> | Defines a breakline. Supported only within the following tags: <p></p> <td></td> |
Headings and subheadings | |
| Tag | Function |
| <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> | Define different heading sizes, starting with <h1> (largest) to <h6> (smallest). |
Text formatting | |
| Tag | Function |
| <big></big> | Defines bigger text. |
| <code></code> | Defines typewriter text. |
| <em></em> | Defines italic text. |
| <s></s> | Defines |
| <small></small> | Defines smaller text. |
| <strong></strong> | Defines bold text. |
| <sub></sub> | Defines subscript text (such as the number 2 in H2O). |
| <sup></sup> | Defines superscript text (such as the number 2 in E=MC2). |
| <u></u> | Defines underlined text. |
Text align | |
| Tag | Function |
| <p style="text-align:center"></p> | Defines center-aligned text. |
| <p style="text-align:right"></p> | Defines right-aligned text. |
| <p style="text-align:left"></p> | Defines left-aligned text. |
| <p style="text-align:justify"></p> | Defines justified text. |
Lists | |
| Tag | Function |
| <ol></ol> | Defines an ordered (numbered) list. |
| <ul></ul> | Defines an unordered (bulleted) list. |
| <li></li> | Defines an item in any list. |
Links | |
| Tag | Function |
| <a href=""></a> | Defines a link that opens in the same tab. Such as: Go to Pangea Showcase |
| <a href="" target="_blank"></a> | Defines a link that opens in a new tab. Such as: Go to Pangea Showcase |
| <a class="btn" href=""></a> | Defines a button that functions as a link. Such as: Go to Pangea Showcase |
Tables | |
| Tag | Function |
| <table></table> | Defines a table. All table elements need to be inside <table></table> tags. |
| <caption></caption> | Defines the caption (or title) that is displayed below a table (to place immediately inside <table></table> tags). |
| <thead></thead> | Defines a header row in a table. |
| <tr></tr> | Defines a row in a table. |
| <th></th> | Defines a cell in the table header (cell with gray background). |
| <tbody></tbody> | Defines the body of a table. |
| <td></td> | Defines a cell in the table body (cell with white background). |
| <td colspan=""></td> | Defines a cell that covers multiple columns. |
| <td rowspan=""></td> | Defines a cell that covers multiple rows. |
