Skip to main content.

What You See Is What You Get

WYSIWYG is an acronym for What You See Is What You Get

WYSIWYG refers to the content editing - the content in the content editor will look the same as the final product without having to input any code.

An example of a WYSIWYG is Microsoft Word; you can underline a sentence by highlighting it and selecting the Underline button in the toolbar.

This is what the WYSIWYG editor looks like:

WYSIWYG Screen shot

I'm an Editor/Manager. What html can I use in the WYSIWYG?

For the Lead sections in Accordions, Action Lists, Action List Items, Alerts, Body, Cards, Hero, Steps, Views References, and Webforms

Tag What it's used for Example of what to type in What the example will look like
<em> emphasize, with semantic meaning <em>Superior Court of California</em> Superior Court of California
<strong> strong, with semantic meaning <strong>County of Orange</strong> County of Orange
<a href> hyperlink text <a href="https://www.google.com ">Ask Google</a>! Ask Google!

For the Body section in Alerts:

Tag What it's used for Example of what to type in What the example will look like
<em> emphasize, with semantic meaning <em>Superior Court of California</em> Superior Court of California
<strong> strong, with semantic meaning <strong>County of Orange</strong> County of Orange
<ul> unordered list (bullet point list)

<ul>

<li>California</li>

<li>Nevada</li>

<ul>
  • California
  • Nevada
<ol> ordered list (numbered list)

<ol>

<li>first</li>

<li>second</li>

</ol>
  1. first
  2. second
<li> list item; used with the ul and ol types (see above list examples) (see above list examples)

<a href class="jcc-button--primary jcc-button--cta-link">

 stylizes a link <a class="jcc-button--primary jcc-button--cta-link" href="/home" >Click here</a> Click here
<blockquote> styling a block quote <blockquote class="blockquote blockquote--callout">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

For the Body section in Location, News, Accordions, Body, and Steps

Tag What it's used for Example of what to type in What the Example will look like
<em> emphasize, with semantic meaning <em>Superior Court of California</em> Superior Court of California
<strong> strong, with semantic meaning <strong>County of Orange</strong> County of El Orange
<b> bold <b>Trial Court</b> Trial Court
<i> italicized <i>Judicial Council</i> Judicial Council 
<ul> unordered lists (bullet point list)

<ul>

<li>California</li>

<li>Nevada</li>

<ul>
  • California
  • Nevada
<ol> ordered lists (numbered list)

<ol>

<li>first</li>

<li>second</li>

</ol>
  1. first
  2. second
<li> list item; used with the ul and ol types (see above list examples) (see above list examples)
<dl> used as a description list <dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>
Coffee
Black hot drink
Milk
White cold drink
<dt> description term in description list <dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>
Coffee
Black hot drink
Milk
White cold drink
 

"Coffee" and "Milk" are the description terms
<dd> description in description list <dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>
Coffee
Black hot drink
Milk
White cold drink

"Black hot drinks" and "White cold drinks" are the descriptions
<h2 id> format for header <h2 id>H2 HEADER</h2>

H2 HEADER
<h3 id> format for header <h3 id>H3 HEADER</h3>

H3 HEADER
<h4 id> format for header <h4 id>H4 HEADER</h4>

H4 HEADER
<h5 id> format for header <h5 id>H5 HEADER</h5>
H5 HEADER
<h6 id> format for header <h6 id>H6 HEADER</h6> H6 HEADER
<blockquote> styling a block quote <blockquote class="blockquote blockquote--callout">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<p> separating text into paragraphs

<p>Lorem ipsum dolor sit amet,</p>

<p>consectetur adipiscing elit,</p>

<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Lorem ipsum dolor sit amet,

consectetur adipiscing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<caption> provides a caption for a table

<table>
  <caption>Opposites</caption>
  <tr>

<thead>
    <th>Big</th>
    <th>Little</th>

</thead>
  </tr>

<tbody>
  <tr>
    <td>Elephant</td>
    <td>Mouse</td>
  </tr>
  <tr>
    <td>Ocean</td>
    <td>Puddle</td>
  </tr>

</tbody>

<tfoot>

<tr>

<td>boulder</td>

<td>pebble</td>

</tr>

</tfoot>
</table>

</table>
Opposites
Big Little
Elephant Mouse
Ocean Puddle
boulder pebble

"Opposites" is the caption for this table
<tbody> separates the body section of a table from the head and foot

<table>
  <caption>Opposites</caption>
  <tr>

<thead>
    <th>Big</th>
    <th>Little</th>

</thead>
  </tr>

<tbody>
  <tr>
    <td>Elephant</td>
    <td>Mouse</td>
  </tr>
  <tr>
    <td>Ocean</td>
    <td>Puddle</td>
  </tr>

</tbody>

<tfoot>

<tr>

<td>boulder</td>

<td>pebble</td>

</tr>

</tfoot>
</table>
Opposites
Big Little
Elephant Mouse
Ocean Puddle
boulder pebble

"Elephant", "mouse", "ocean", and "puddle" are in the tbody section
<thead> Used for the header of a group of the table

<table>
  <caption>Opposites</caption>
  <tr>

<thead>
    <th>Big</th>
    <th>Little</th>

</thead>
  </tr>

<tbody>
  <tr>
    <td>Elephant</td>
    <td>Mouse</td>
  </tr>
  <tr>
    <td>Ocean</td>
    <td>Puddle</td>
  </tr>

</tbody>

<tfoot>

<tr>

<td>boulder</td>

<td>pebble</td>

</tr>

</tfoot>
</table>
Opposites
Big Little
Elephant Mouse
Ocean Puddle
boulder pebble

"Big" and "little" are in the thead section
<tfoot> Used for the footer of a group of the table

<table>
  <caption>Opposites</caption>
  <tr>

<thead>
    <th>Big</th>
    <th>Little</th>

</thead>
  </tr>

<tbody>
  <tr>
    <td>Elephant</td>
    <td>Mouse</td>
  </tr>
  <tr>
    <td>Ocean</td>
    <td>Puddle</td>
  </tr>

</tbody>

<tfoot>

<tr>

<td>boulder</td>

<td>pebble</td>

</tr>

</tfoot>
</table>
Opposites
Big Little
Elephant Mouse
Ocean Puddle
boulder pebble

"Boulder" and "pebble" are in the tfoot section
<th> content in a table header cell

<table>
  <caption>Opposites</caption>
  <tr>

<thead>
    <th>Big</th>
    <th>Little</th>

</thead>
  </tr>

<tbody>
  <tr>
    <td>Elephant</td>
    <td>Mouse</td>
  </tr>
  <tr>
    <td>Ocean</td>
    <td>Puddle</td>
  </tr>

</tbody>

<tfoot>

<tr>

<td>boulder</td>

<td>pebble</td>

</tr>

</tfoot>
</table>
Opposites
Big Little
Elephant Mouse
Ocean Puddle
boulder pebble

"Big" and "little" are in the th cells
<td> content in a table cell

<table>
  <caption>Opposites</caption>
  <tr>

<thead>
    <th>Big</th>
    <th>Little</th>

</thead>
  </tr>

<tbody>
  <tr>
    <td>Elephant</td>
    <td>Mouse</td>
  </tr>
  <tr>
    <td>Ocean</td>
    <td>Puddle</td>
  </tr>

</tbody>

<tfoot>

<tr>

<td>boulder</td>

<td>pebble</td>

</tr>

</tfoot>
</table>
Opposites
Big Little
Elephant Mouse
Ocean Puddle
boulder pebble

"Elephant", "mouse",  "ocean", "puddle", "boulder" and "pebble" are in the td cells
<tr> Defines a row in a table

<table>
  <caption>Opposites</caption>
  <tr>

<thead>
    <th>Big</th>
    <th>Little</th>

</thead>
  </tr>

<tbody>
  <tr>
    <td>Elephant</td>
    <td>Mouse</td>
  </tr>
  <tr>
    <td>Ocean</td>
    <td>Puddle</td>
  </tr>

</tbody>

<tfoot>

<tr>

<td>boulder</td>

<td>pebble</td>

</tr>

</tfoot>
</table>
Opposites
Big Little
Elephant Mouse
Ocean Puddle
boulder pebble

"Ocean" and "puddle" both belong to the same row (tr) in this table.
<hr> horizontal break

<p>text above the horizontal break</p>

<hr>

<p>text below the horizontal break</p>

text above the horizontal break

text below the horizontal break
<img> indicates an image

<img src="/sites/default/files/elcondado/default/styles/hero_side/public/2021-06/OCCourtLogo.jpeg" alt="Orange County Superior Court Courthouse">

  
<a href class="jcc-button--primary jcc-button--cta-link"> stylizes a link

<a class="jcc-button--primary jcc-button--cta-link" href="/home" >Click here</a>

*Note: insert the URL of where the button should link to between the href quotes

 Click here
<a href> hyperlink text <a href="https://www.google.com ">Ask Google</a>! Ask Google!
<iframe> embeds another HTML page onto your current page <iframe src="/online-services/online-payments " title="Online Payments"></iframe> Link to iFrame Component

A tooltip (helper text) will appear by hovering over each icon.

For example, hovering over the B will show the tooltip "Bold", along with a keyboard shortcut.

The WYSIWYG editor appears in several components - it is more limited for Lead sections because these sections should be short and concise. The Text section has a more options in the WYSIWYG editor to allow editors and authors more flexibility in the content they provide.

Although <b> and <strong> both appear as bold, using <strong> emphasizes the section in the tag, while <b> is a style that makes the contents in the tag appear bold.

Using <strong> is recommended as it provides more context to other programs (such as accessibility readers for persons with disabilities).