Question

Use of HTML in articles - examples to share?

  • 13 December 2023
  • 1 reply
  • 101 views

Hi, I wanted to format solution articles to look better and be easier to read etc. I found the following as two examples in current articles from freshdesk.

Can you help by sharing any others or point me to where some might be?

Many thanks in advance.

Trevor..

 

<div class="single-article-content article-body">

        <pre class="fd-callout fd-callout--note" dir="ltr">We have recently refreshed our branding across our offerings and changed the names of our pricing plans. If you have signed up before Aug 9, 2021, please click <strong>Previous plans</strong> to view your applicable plans.<br>We assure you that this change will not impact your product experience, and no action is required on your part.</pre>

 

 

<pre class="fd-callout fd-callout--info" dir="ltr">This feature is available on-demand currently. Please write to <a href="mailto:support@freshdesk.com">support@freshdesk.com</a> to get it enabled for your account.</pre><p><br>


1 reply

Certainly! Here are a few examples of how HTML can be used to format solution articles:

  1. Using Headers and Paragraphs
    <h2>Problem:</h2>
    <p>The problem statement goes here...</p>

    <h2>Solution:</h2>
    <p>The solution description goes here...</p>

     

  2. Using Lists:
    <h2>Steps to Solve:</h2>
    <ol>
    <li>First step...</li>
    <li>Second step...</li>
    <li>Third step...</li>
    </ol>

     

  3. Using Tables:
    <table>
    <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    </tr>
    <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    </tr>
    <tr>
    <td>Data 3</td>
    <td>Data 4</td>
    </tr>
    </table>

     

  4. Using Callouts or Alerts:
    <div class="alert alert-success">
    <strong>Success!</strong> Your message has been sent successfully.
    </div>

    <div class="alert alert-warning">
    <strong>Warning!</strong> Please make sure to save your work before proceeding.
    </div>

    <div class="alert alert-danger">
    <strong>Error!</strong> Something went wrong. Please try again later.
    </div>

     

  5. Using Links:
    <p>For more information, visit <a href="https://example.com">this link</a>.</p>

     

  6. Using Code Blocks
    <pre><code>
    This is a code block for showing code snippets.
    function example() {
    return "Hello, World!";
    }
    </code></pre>

    These are just a few examples. Depending on the content and the platform you're using, there can be more variations and customization options available.

    Here are the best HTML online learning platforms:
    1. W3School  2. Iqra Technology

     

     

     

     

Reply