Skip to main content
Question

Use of HTML in articles - examples to share?

  • December 13, 2023
  • 3 replies
  • 556 views
trevhowes
Community Debut

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>

KhanZain
1 person likes this
  • KhanZain
    KhanZain
Did this topic help you find an answer to your question?

3 replies

KhanZain
Community Debut
  • KhanZain
  • Community Debut
  • 2 replies
  • May 6, 2024

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

     

     

     

     

Khan Zain
KhanZain
D
2 people like this
  • KhanZain
    KhanZain
  • D
    dtorresCC
D
Community Debut
  • dtorresCC
  • Community Debut
  • 1 reply
  • May 13, 2024

I would like to make an index that links to bookmarks within the FreshService solutions article. How would I go about it?

 

Thank you

Diego

A
Community Debut
  • AbiDavid90
  • Community Debut
  • 1 reply
  • February 18, 2025

Great question, Trevor! Using HTML in articles can definitely improve readability and structure. Elements like <strong>, <pre>, and <div> help highlight key information and make content more engaging.

Here’s an example of how HTML can be used to format a solution article in a structured and easy-to-read way using headings, highlights, callout boxes, and links:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Solution Article Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
            background-color: #f9f9f9;
        }
        .container {
            max-width: 800px;
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }
        .callout {
            padding: 15px;
            margin: 20px 0;
            border-left: 5px solid #007bff;
            background: #e9f5ff;
        }
        .code-block {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 5px;
            font-family: monospace;
        }
        a {
            color: #007bff;
            text-decoration: none;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>How to Enable API Access in Freshdesk</h2>
    <p>Follow these steps to enable API access in your Freshdesk account.</p>

    <div class="callout">
        <strong>Note:</strong> This feature is available

Hope so these examples will help you alot. Also, structured formatting plays a big role in marketing—a well-organized article enhances user experience, keeps readers engaged, and improves SEO. A clear, visually appealing layout can make a big difference in how your audience interacts with your content!

Reply


Most helpful members this week

Terms of UsePrivacy Notice