Here is an example article taken from the live site, there are many examples in the article of things to avoid for both consistency and accessibility. It is very important to keep the HTML clean so people using screen readers can easily navigate the page.
To edit the HTML of an article click on the </> button in the editor menu.
We should avoid the use of <br /> tags, anytime this tag is used it should be replaced with <p></p> tags. <p></p> tags will move the sentence onto a new line and will always have proper spacing due to the css on the page. (Example line 1, 8, 16)
We should never use empty <p></p> tags to add spacing between paragraphs, this will cause inconsistent spacing in the article layout as the css styling will make sure that all line spacing adheres to the overall style guide. (Example line 31, 37, 38)
Unfortunately Zendesk does not support proper heading tags in their editor so we will have to manually override this in the HTML. Please do not use the default font size selector in the editor. The only heading tags we should use in articles are <h3></h3> and <h4></h4>. <h3> should be used for section headings and <h4> should be used for sub section headings. (Example line 1 I would rewrite <strong><span class="wysiwyg-font-size-large">Within the app on an Apple device</span></strong> to <h3>Apple devices</h3> <h4>Within the app</h4>)
We should never wrap header tags (<h3>, <h4>) in <strong></strong> tags, this is redundant and will cause the heading tags to look pixelated.
1 <p>Your membership ID starts with “AA00” and you can find it when you access your primary DisneyLife profile on your handheld devices, iOS or Android.<br /> There are also ways to check it outside the app on iOS.<br /> <br /> <br /> <strong><span class="wysiwyg-font-size-large">Within the app on an Apple device</span></strong></p>
2 <ol>
3 <li>Go to the DisneyLife home screen.</li>
4 <li>Tap on your <strong><span class="wysiwyg-font-size-large">Character</span> </strong>in the top right corner.</li>
5 <li>Tap on the <strong><span class="wysiwyg-font-size-large">card icon</span> </strong>under the Character icon.</li>
6 <li>Your DisneyLife Membership ID will appear under your name.</li>
7 </ol>
8 <p><br /> To find your Membership ID when your device is not connected to the internet:</p>
9 <ol>
10 <li>Ensure that you are logged in before your device is set to Offline mode.</li>
11 <li>Go to the Home screen of the app.</li>
12 <li>You will be asked to Go to Downloads or Reconnect. Tap on <strong><span class="wysiwyg-font-size-large">Go To Downloads.</span></strong></li>
13 <li>Tap on the <strong><span class="wysiwyg-font-size-large">card icon</span></strong> in the top right corner of the screen.</li>
14 <li>Your DisneyLife Membership ID will appear under your name.</li>
15 </ol>
16 <p><br /> <br /> <strong><span class="wysiwyg-font-size-large">Outside of the app on an Apple device</span></strong></p>
17 <ol>
18 <li>Go to the home screen of your device.</li>
19 <li>Tap on <strong><span class="wysiwyg-font-size-large">Settings.</span></strong></li>
20 <li>Tap on <strong><span class="wysiwyg-font-size-large">DisneyLife </span></strong>appearing at the bottom of a list on the left side of the screen.</li>
21 <li>Your Membership ID will be located under DisneyLife Settings.</li>
22 </ol>
23 <p><br /> <br /><strong><span class="wysiwyg-font-size-large"> Within the app on an Android device</span></strong></p>
24 <ol>
25 <li>Go to the DisneyLife Home screen.</li>
26 <li>Tap the <strong><span class="wysiwyg-font-size-large">list icon </span></strong>in the top left corner.</li>
27 <li>Tap on the card icon that appears next to your character.</li>
28 <li>Your DisneyLife Membership ID will appear under your name.</li>
29 </ol>
30 <p><br /> If you would like to check out your Membership ID when your device is not connected to the internet:</p>
31 <p> </p>
32 <ol>
33 <li>You will be asked to Go To Downloads or Reconnect. Tap on <strong><span class="wysiwyg-font-size-large">Go To Downloads.</span></strong></li>
34 <li>Tap on the card icon in the top right corner of the screen.</li>
35 <li>Your DisneyLife Membership ID will appear under your name.</li>
36 </ol>
37 <p> </p>
38 <p> </p>
Here is the cleaned up version
<p>Your membership ID starts with "AA00" and you can find it when you access your primary DisneyLife profile on your handheld devices, iOS or Android. For iOS, there are also ways to check it outside the app.</p>
<h3>Apple devices</h3>
<h4>Within the app</h4>
<ol>
<li>Go to the DisneyLife home screen.</li>
<li>Tap on your <strong>Character</strong> in the top right corner.</li>
<li>Tap on the <strong>card icon</strong> under the Character icon.</li>
<li>Your DisneyLife Membership ID will appear under your name.</li>
</ol>
<p>To find your Membership ID when your device is not connected to the internet:</p>
<ol>
<li>Ensure that you are logged in before your device is set to Offline mode.</li>
<li>Go to the <strong>Home screen</strong> of the app.</li>
<li>You will be asked to Go to Downloads or Reconnect. Tap on <strong>Go To Downloads</strong>.</li>
<li>Tap on the <strong>card icon</strong> in the top right corner of the screen.</li>
<li>Your DisneyLife Membership ID will appear under your name.</li>
</ol>
<h4>Outside of the app </h4>
<ol>
<li>Go to the <strong>Home screen</strong> of your device.</li>
<li>Tap on <strong>Settings</strong>.</li>
<li>Tap on <strong>DisneyLife</strong> appearing at the bottom of a list on the left side of the screen.</li>
<li>Your Membership ID will be located under DisneyLife Settings.</li>
</ol>
<h3>Android devices</h3>
<h4>Within the app</h4>
<ol>
<li>Go to the DisneyLife Home screen.</li>
<li>Tap the <strong>list icon</strong> in the top left corner.</li>
<li>Tap on the <strong>card icon</strong> that appears next to your character.</li>
<li>Your DisneyLife Membership ID will appear under your name.</li>
</ol>
<p>If you would like to check out your Membership ID when your device is not connected to the internet:</p>
<ol>
<li>You will be asked to Go To Downloads or Reconnect. Tap on <strong>Go To Downloads</strong>.</li>
<li>Tap on the <strong>card icon</strong> in the top right corner of the screen.</li>
<li>Your DisneyLife Membership ID will appear under your name.</li>
</ol>
Another Example
<p>Not sure how to play things on DisneyLife? Check out How do I use the player?<br /> If the player isn’t responding, try the following steps. Check after each one to see if the problem has been solved.</p>
<h3><br /> <span class="wysiwyg-font-size-large">Check your internet</span></h3>
<ul>
<li>A slow internet connection could be the problem. So check your location, and the number of devices connected to your network. Both of these can slow things down. </li>
<li>A weak internet connection can also cause issues. Check the strength on your device – if it’s low, try moving closer to your Wi-Fi router.</li>
<li>If the issue seems to be with your device, check out What can I do if my app isn’t connecting to the internet?</li>
</ul>
<h3><br /> <span class="wysiwyg-font-size-large">Check on another device</span></h3>
<ul>
<li> Try another device to see if the problem is the same.</li>
</ul>
<h3> </h3>
<h3><span class="wysiwyg-font-size-large">Update your device</span></h3>
<p>Make sure your device is running on the latest version of operating system. To find out more about how to update your device go to your device manufacturer’s website.<br /> <br /> To find out more about compatible devices check out <a href="/hc/en-gb/articles/115007672547-Ways-to-Watch" target="_blank" rel="noopener noreferrer">Ways to Watch</a>.<br /> <br /> If you are using the player on our website please try the steps below, check after each step to see if the issue has been resolved.</p>
<h3><br /> <span class="wysiwyg-font-size-large">Check another browser</span></h3>
<ul>
<li> Try another browser to see if the problem is the same</li>
</ul>
<h3> </h3>
<h3><span class="wysiwyg-font-size-large">Check your Silverlight</span></h3>
<ul>
<li>Our player requires Silverlight to stream videos. You can download this from <a href="https://www.microsoft.com/silverlight/" target="_blank" rel="noopener noreferrer">https://www.microsoft.com/silverlight/</a>.</li>
<li>You may need to update to the latest version, see <a href="/hc/en-gb/articles/115007672547-Ways-to-Watch" target="_blank" rel="noopener noreferrer">Ways to Watch</a> to see what version is required.<br /> <br /> </li>
</ul>
<h4 class="wysiwyg-text-align-center">‘There must be something wrong with the scream intake valve’<br /> – Jeff Fungus, Monsters, Inc.</h4>
<p> </p>
Cleaned Up Version
<p>Not sure how to play things on DisneyLife? Check out How do I use the player?</p>
<p>If the player isn’t responding, try the following steps. Check after each one to see if the problem has been solved.</p>
<h3>Check your internet</h3>
<ul>
<li>A slow internet connection could be the problem. So check your location, and the number of devices connected to your network. Both of these can slow things down. </li>
<li>A weak internet connection can also cause issues. Check the strength on your device – if it’s low, try moving closer to your Wi-Fi router.</li>
<li>If the issue seems to be with your device, check out What can I do if my app isn’t connecting to the internet?</li>
</ul>
<h3>Check on another device</h3>
<ul>
<li>Try another device to see if the problem is the same.</li>
</ul>
<h3>Update your device</h3>
<p>Make sure your device is running on the latest version of operating system. To find out more about how to update your device go to your device manufacturer’s website.</p>
<p> To find out more about compatible devices check out <a href="/hc/en-gb/articles/115007672547-Ways-to-Watch" target="_blank" rel="noopener noreferrer">Ways to Watch</a>.</p>
<p>If you are using the player on our website please try the steps below, check after each step to see if the issue has been resolved.</p>
<h3>Check another browser</h3>
<ul>
<li>Try another browser to see if the problem is the same</li>
</ul>
<h3>Check your Silverlight</h3>
<ul>
<li>Our player requires Silverlight to stream videos. You can download this from <a href="https://www.microsoft.com/silverlight/" target="_blank" rel="noopener noreferrer">https://www.microsoft.com/silverlight/</a>.</li>
<li>You may need to update to the latest version, see <a href="/hc/en-gb/articles/115007672547-Ways-to-Watch" target="_blank" rel="noopener noreferrer">Ways to Watch</a> to see what version is required.</li>
</ul>
<h4 class="wysiwyg-text-align-center">‘There must be something wrong with the scream intake valve’</h4>
<p class="wysiwyg-text-align-center"> – Jeff Fungus, Monsters, Inc.</p>