How to display html tag with css using esc_html?

I am editing the woocommerce orders.php template and ran into a problem. The template shows to user the orders he has placed. There are now several variables that I think need to be coded for security, such as $date_created or $view_order which contains the order link. So I’m trying to add esc_html to these and other variables but when I do it displays plain text on screen and not html tag with its css.

Is there a way to use esc_html and keep the output clean so it displays html and css tags normally? Sorry but I’m new to all this, I’m trying to learn step by step, I hope someone can show me a possible way / solution. I appreciate any help, thanks.

Basically I use this to display variables and everything works fine, the variable is displayed with its css:

<td class="product_data">
  <span>'. $date_created .'</span>
</td>

If I try to do this, the variables is displayed without its css style

<td class="product_data">
  <span><?php echo esc_html($date_created); ?></span>
</td>

Another example, if I have $example = esc_html( '<a href="http://www.example.com/">A link</a>' ); this displayed as <a href="http://www.example.com/">A link</a> instead of A link. Is there any way to solve this problem?

This is my orders.php template: I don’t think it matters, but I have entered the complete template.

<?php
//* echo do_shortcode('[elementor-template id="40136"]'); *//
?><div class="orders-container"><?php

defined( 'ABSPATH' ) || exit;

do_action( 'woocommerce_before_account_orders', $has_orders );
                
?><table class="table_orders heading"><tr>
 <td class="product_number">Ordine</td>
 <td class="product_name">Prodotto</td>
 <td class="product_data">Data</td>
 <td class="product_price">Totale</td>
 <td class="product_status">Stato</td>
 <td class="product_action">File</td>
</tr></table><?php

if ( $has_orders ) {
    // Get Access $order variable Foreach
    foreach ( $customer_orders->orders as $customer_order ) {
     // Get $product object from $order / $order_id
     $order = wc_get_order( $customer_order );
     $items = $order->get_items();
     
     $orders_id = $order->get_id();
     $status =  wc_get_order_status_name( $order->get_status() );
     $date_created = $order->get_date_created()->date('d/m/Y');
     $payment_method = $order->get_payment_method_title();
     $order_total = $order->get_formatted_order_total();

        // Get Access Items & Product Variable Foreach
        foreach ( $items as $item ) {
         $product_name = $item->get_name();
         
         // Get product image - https://www.businessbloomer.com/woocommerce-easily-get-product-info-title-sku-desc-product-object/
         $product = $item->get_product();
            if( $product instanceof WC_Product ){
             $order_img = $product->get_image();
            }
    
         //Get product download button 
         $downloads = $order->get_downloadable_items();
            if(is_array($downloads)) {
                foreach($downloads as $product){
                 $download_button = '<a href="'. $product['download_url'] .'" target="_blank">Download</a>';
                } 
            } 
            
         $view_order = $order->get_view_order_url();
            
            //Start Prov Echo
            ?>
            <td class="product_data">
                <span class="mobile title">Data</span>
                <span><?php echo esc_html($date_created); ?></span>
            </td>
            <?php
            
            // Start echo
            echo '
                <table class="table_orders">
                <tr class="table_row_items">
                    <td class="product_number">
                     <span class="mobile title">Ordine</span>
                     <span>#'. $orders_id .'</span>
                    </td>
    
                    <td class="product_name">
                     <span class="mobile title">Prodotto</span>
                     <a href="'. $view_order .'">'. $product_name .'</a>
                    </td>
    
                    <td class="product_data">
                     <span class="mobile title">Data</span>
                     <span>'. $date_created .'</span>
                    </td>
    
                    <td class="product_price">
                     <span class="mobile title">Prezzo</span>
                     <span>'. $order_total .'</span>
                    </td>
    
                    <td class="product_status">
                     <span class="mobile title">Stato</span>
                     <span>'. $status .'</span>
                    </td>
 
                    <td class="product_action">
                     <span class="mobile title">File</span>
                     <a target=”_blank” href="'. $view_order .'">Visualizza<i class="fa-duotone fa-eye"></i></a>
                    </td>
                </tr>    
                </table> 
            '; //End Echo

             // Tasto download funzionante - if($downloads) { echo '<div class="container_orders_download"> '. $download_button .' </div>'; }
        }
    }
    
    // Pagination button - Responsabile dei bottoni e numerazione delle pagine della cronologia ordini
    ?><div class="container-pagination"><?php 
        $args = array(
         'base'          => esc_url( wc_get_endpoint_url( 'orders') ) . '%_%',
         'format'        => '%#%',
         'total'         => $customer_orders->max_num_pages,
         'current'       => $current_page,
         'show_all'      => false,
         'end_size'      => 3,
         'mid_size'      => 3,
         'prev_next'     => true,
         'prev_text' => __('<i class="fa-solid fa-angle-left"></i>'), 
         'next_text' => __('<i class="fa-solid fa-angle-right"></i>'),
         'type'          => 'plain',
         'add_args'      => false,
         'add_fragment'  => ''
        ); 
        echo paginate_links($args);
}       
        else {
         ?><div class="msg_orders">La tua cronologia ordini è vuota!</div><?php
        } 
    ?></div><?php

do_action( 'woocommerce_after_account_orders', $has_orders ); 

?>
</div>

Answer

You can use wp_kses_post, it filters text content and strips out disallowed HTML.

echo wp_kses_post( $date_created );