Skip to main content

Text Formats

Restricted HTML

  • Allowed HTML tags: <br> <p class="text-align-left text-align-center text-align-right text-align-justify"> <h2 id class="text-align-left text-align-center text-align-right text-align-justify"> <h3 id class="text-align-left text-align-center text-align-right text-align-justify"> <h4 id class="text-align-left text-align-center text-align-right text-align-justify"> <h5 id class="text-align-left text-align-center text-align-right text-align-justify"> <h6 id class="text-align-left text-align-center text-align-right text-align-justify"> <cite> <dl> <dt> <dd> <blockquote cite> <ul type> <ol type start> <img data-entity-substitution data-align data-caption src alt height width data-entity-type data-entity-uuid> <a hreflang accesskey target data-entity-type data-entity-uuid data-entity-substitution href title id rel> <drupal-media data-align data-caption title data-entity-type data-entity-uuid alt> <strong> <em> <code> <li>

    This site allows HTML content. While learning all of HTML may feel intimidating, learning how to use a very small number of the most basic HTML "tags" is very easy. This table provides examples for each tag that is enabled on this site.

    For more information see the HTML Living Standard or use your favorite search engine to find other sites that explain HTML.

    Tag Description You Type You Get
    By default line break tags are automatically added, so use this tag to add additional ones. Use of this tag is different because it is not used with an open/close pair like all the others. Use the extra " /" inside the tag to maintain XHTML 1.0 compatibility Text with <br />line break Text with
    line break
    By default paragraph tags are automatically added, so use this tag to add additional ones. <p>Paragraph one.</p> <p>Paragraph two.</p>

    Paragraph one.

    Paragraph two.

    Heading <h2>Subtitle</h2>

    Subtitle

    Heading <h3>Subtitle three</h3>

    Subtitle three

    Heading <h4>Subtitle four</h4>

    Subtitle four

    Heading <h5>Subtitle five</h5>
    Subtitle five
    Heading <h6>Subtitle six</h6>
    Subtitle six
    Cited <cite>Cited</cite> Cited
    Definition lists are similar to other HTML lists. <dl> begins the definition list, <dt> begins the definition term and <dd> begins the definition description. <dl> <dt>First term</dt> <dd>First definition</dd> <dt>Second term</dt> <dd>Second definition</dd> </dl>
    First term
    First definition
    Second term
    Second definition
    No help provided for tag dt.
    No help provided for tag dd.
    Block quoted <blockquote>Block quoted</blockquote>
    Block quoted
    Unordered list - use the <li> to begin each list item <ul> <li>First item</li> <li>Second item</li> </ul>
    • First item
    • Second item
    Ordered list - use the <li> to begin each list item <ol> <li>First item</li> <li>Second item</li> </ol>
    1. First item
    2. Second item
    No help provided for tag img.
    Anchors are used to make links to other pages. <a href="https://www.chatogand.be">Chat-o-Gand</a> Chat-o-Gand
    No help provided for tag drupal.
    Strong <strong>Strong</strong> Strong
    Emphasized <em>Emphasized</em> Emphasized
    Coded text used to show programming source code <code>Coded</code> Coded
    No help provided for tag li.

    Most unusual characters can be directly entered without any problems.

    If you do encounter problems, try using HTML character entities. A common example looks like &amp; for an ampersand & character. For a full list of entities see HTML's entities page. Some of the available characters include:

    Character Description You Type You Get
    Ampersand &amp; &
    Greater than &gt; >
    Less than &lt; <
    Quotation mark &quot; "
  • You can align images, videos, blockquotes and so on to the left, right or center. Examples:

    • Align an image to the left: <img src="" data-align="left" />
    • Align an image to the center: <img src="" data-align="center" />
    • Align an image to the right: <img src="" data-align="right" />
    • … and you can apply this to other elements as well: <video src="" data-align="center" />
  • Lines and paragraphs are automatically recognized. The <br /> line break, <p> paragraph and </p> close paragraph tags are inserted automatically. If paragraphs are not recognized simply add a couple of blank lines.
  • Web page addresses and email addresses turn into links automatically.
  • ### Blazy
    If you copy paste the lines here into CKEditor, be sure to view CKEditor
    source and remove the surrounding `...`, in case mistakenly copied
    over.  
    Image or iframe is lazyloaded automatically unless disabled, no shortcodes
    required. Usages for shortcodes: grid, customizing settings, embedding a known
    entity. Pay attention to attributes, slashes, colons, single and double quotes:
    
    1. **Basic**, with inline HTML:   
       `[blazy]...[item]...[/item]... [/blazy]`  
       where `[blazy]` is like `.field` container, `[item]` like `.field__item`.
    2. **With self-closing** `data=ENTITY_TYPE:ID:FIELD_NAME:FIELD_IMAGE`, without
       inline HTML:  
       `[blazy data="node:44:field_media" /]`  
       `[blazy data="node:44:field_media:field_media_image" /]`  
       _Required_: `ENTITY_TYPE:ID:FIELD_NAME`, where `ENTITY_TYPE` is *node* --
       only tested with node, `ID` is *node ID*, `FIELD_NAME` can be field Media,
       Image, Text (long or with summary), must be multi-value, or unlimited.  
       _Optional_: `FIELD_IMAGE` named `field_media_image` (not `field_image`) as
       found at Media Image/ Video for hires poster image, must be similar and
       single-value field image for **all** media entities to have mixed media
       correctly.  
       **Repeat**, not `field_image` at Node, it is `field_media_image` at Media.
    3. **With HTML settings**: any HTML settings relevant from `BlazyDefault`
       methods as seen at Filter, Field or Views UI forms:  
       `[blazy settings="{'style': 'column', 'grid': 4}" /]`
    4. **Attributes**: The `[item]` can have class and caption attributes, e.g.:  
       `[item
       class="grid--card card"
       caption='Read more'
       title="Awesome title"]`  
       The classes will be moved into `grid__content` to make it usable
       such as for Bootstrap well/ card. The caption and title into regular
       `blazy__caption`.  
       Use enclosing *single* quotes for HTML caption so you can have double
       quotes inside such as enclosing link HREF quotes, else broken. The link is
       normally converted automatically when using WYSIWYG. This will replace Filter
       caption if they both exist.
    5. **Grid format**, a convenient shortcut for settings, hyphenated (`-`):  
       `STYLE:SMALL-MEDIUM-LARGE`  
        `STYLE` is only one of these: `column grid flex nativegrid`.  
        The rest refers to device sizes. Only `LARGE` with `nativegrid`, no others,
        can be numeric, or string. The rest must be numbers due to using no JS and
        or their contracts. The minimum is 1, not 0 (1-12 columns).  
        * `[blazy grid="column:2-3-4" /]`  
        * `[blazy grid="grid:2-3-4" /]`  
        * `[blazy grid="flex:2-3-4" /]`  
        * `[blazy grid="nativegrid:2-3-4" /]`, will be masonry  
        * `[blazy grid="nativegrid:2-3-4x4" /]`, will repeat  
        * `[blazy grid="nativegrid:2-3-4x4 4x3 2x2 2x4 2x2 2x3 2x3 4x2 4x2" /]`  
          is a shortcut for:  
          
          [blazy settings="{
    'style': 'nativegrid',
    'grid_small': 2,
    'grid_medium': 3,
    'grid': '4x4 ...'
    }" /]
    * `4x4` defines `WIDTHxHEIGHT` based on `grid-row` CSS property, see and override `blazy/css/components/grid/blazy.nativegrid.css`. 6. **Skipping**: to disable lazyload, add attribute `data-unblazy`: * `` * `` 7. **[DEPRECATED]**, cannot co-exist: To build a grid of images/ videos, add attribute `data-grid` or `data-column` (only to the first item): * `` * `` The numbers represent the amount of grids/ columns for small, medium and large devices respectively, space delimited. Be aware! All media items will be grouped regardless of their placements. That's why deprecated. **Tips**, if any issues: * To set and forget, do not use `[blazy]` shortcode. It is only useful for grid, or customizing settings, or embedding a known entity. * Attributes `data, settings` can be put together into one `[blazy]`. * If the enclosing quotes are single, the inner ones, if any, must be double, and vice versa. * `IMG/ IFRAME`, or other HTML as item contents can be wrapped with any relevant HTML tags, no problems. * Except for self-closing one-liner `data` attribute, be sure grid items are stacked, separated by line breaks, or any relevant HTML tags, and wrapped each with `[item]` like so: [blazy]
      [item]
        <IMG>
      [/item]
      [item]
        <IFRAME>
      [/item]
      [item]
        <p>Any non-media HTML content</p>
      [/item]
    [/blazy]
  • You can embed entities. Additional properties can be added to the embed tag like data-caption and data-align if supported. Example:

    <drupal-entity data-entity-type="node" data-entity-uuid="07bf3a2e-1941-4a44-9b02-2d1d7a41ec0e" data-view-mode="teaser" />
  • You can embed media items:

    • Choose which media item to embed: <drupal-media data-entity-uuid="07bf3a2e-1941-4a44-9b02-2d1d7a41ec0e" />
    • Optionally also choose a view mode: data-view-mode="tiny_embed", otherwise the default view mode is used.
    • The data-entity-type="media" attribute is required for consistency.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs are automatically recognized. The <br /> line break, <p> paragraph and </p> close paragraph tags are inserted automatically. If paragraphs are not recognized simply add a couple of blank lines.
  • Web page addresses and email addresses turn into links automatically.